Okay, so now we've output our JavaScript files into the API's root folder.
Let's take a look at what we need to do to actually serve those files from our dotnet side of things.
So we need to do this in the Program.cs.
Our API server currently is not configured to return static assets from here.
In fact, we saw early on what happened if we just browse to localhost 5001 at the moment, and if I
go to a new tab and I browse to localhost 5001 without any further route parameters, then it doesn't
return us anything because it's not configured to return static assets and we need to tell it to.
So I'll go back to VSCode and inside the middleware here and just below the exception middleware.
The ordering is very important at this stage.
In fact middleware ordering is important.
Full stop.
But I just wanted to emphasize that point.
And inside here we're going to add some middleware.
And we're going to use the use default files middleware we get from dot net.
And if we hover over this, then this enables default file mapping on the current path, and files are
served from the path specified which defaults to the root subfolder.
So by doing that it's going to return the contents of the W-w-w root subfolder.
But we also need to tell it to return those static files as well.
And we have more middleware for this which is the app use static files middleware.
And this allows our API server to return the files inside that subfolder.
So we need a combination of both of those.
Now that alone will do something but it won't do everything.
And let me demonstrate why.
If I go back to the API tab and I'm just going to control R to restart the API server after adding that
middleware.
So let's see what this has actually done for us.
And if I go back to the browser and I refresh the page, then it looks like nothing's working.
But I think this has put the HTTP address in.
Addressing.
I do miss the days where the browser used to tell you whether or not you're running in HTTP or Https
very clearly, but nowadays it hides that information.
So what we can see is that by browsing to this, I do have access to my client app running on the server,
and if I click on the catalog, everything looks to be working just fine and it's pretty fast.
In fact, the loading is so fast it looks like it's a bit glitchy because it is very fast and everything
looks fine.
We've got our different products we can browse around, but where it all falls apart is if I refresh
the page and then it doesn't work and why doesn't it work?
And it's because of this root parameter of the catalog, because this is going to be handled by default
by the API server.
And the API server is saying, hey, I don't have any routes for catalog, I've got routes for API products,
I've got routes for API whatever, but I don't have a route for catalog, and we need to tell our API
to use a fallback option.
So if it doesn't recognize a route, then it passes that on to our react application, which does have
React Router and can handle that particular route.
So the typical approach to resolving this is to use a fallback controller, which tells our API what
to do if it cannot locate a route.
So we'll go back to VS code and inside the.
Let's go back to Solution Explorer and inside our API controllers.
Let's create a new file.
And it's going to be a class.
And we'll call it fallback controller.
And inside here we're not going to use our base API controller because this is not an API endpoint controller.
We'll just derive from controller.
And we'll bring this in from ASP.Net core MVC.
And if we hover over this then this is a base class for an MVC controller with Vue support and a view
really relates to an index.html page where returning HTML.
So we need this one for this particular controller.
We're also going to allow anonymous just to be explicit that we do not want to authorize any of the
endpoints inside here.
In fact, we're just going to have a single controller action inside here whose purpose is to return
index.html.
So inside here we're going to use public I action result.
And we'll call it index.
And inside here we're going to return a physical file.
And we need to specify the path and combine.
And then inside parentheses we specify directory and we can get the current directory.
Add parentheses.
Add a comma.
And then we tell this effectively what the path is to our index.html file.
So the second part of the path is going to be ww w routes.
Then we add a comma and we want the index dot HTML.
And to the right of the parentheses we'll specify the type of content.
And this is going to be text forward slash HTML.
And I'll just move some stuff down because I've gone off the edge there and add the semicolon.
So when this action is called then we return effectively the index dot HTML.
So the next step is to tell our program class about this additional controller and what to do if it
discovers a route that it doesn't know how to deal with.
So we're going to use app.
And then there's a map fallback to controller method that we can use.
Inside here we specify the action that we wish to call.
We called it index.
So I'll specify index there.
And then we can specify fallback as the name of the controller that we're using that contains that action.
And if I just restart the API controller once again we need to.
Anyway after doing that action then what we should find when we go back to our clients application.
If I refresh the page now.
Now we get taken to our catalog and everything should be working just as we'd expect it to, and it
should be working very quickly.
Now I've still retained my login, but let's just test the login logout functionality.
So I'll just log in and I'll log in as Bob at test.com with the password.
And I should be entered into my application and I should be able to add things to the cart.
I should be able to go to the basket, I should be able to click on checkout and we don't have the.
Or at least I've stopped the stripe CLI from running, so I don't have the full functionality running
at the moment, but I will presume that everything is going to be fine with that.
But what we currently have, and what we have been using all the way through this training course is
not a production level database server, and it's time to change.
And we're going to take a look at using a production database server.
We'll use SQL server and we'll take a look at configuring that next.