WEBVTT 00:00.110 --> 00:05.270 Okay, so now we've output our JavaScript files into the API's root folder. 00:05.270 --> 00:11.180 Let's take a look at what we need to do to actually serve those files from our dotnet side of things. 00:11.180 --> 00:13.850 So we need to do this in the Program.cs. 00:13.880 --> 00:20.030 Our API server currently is not configured to return static assets from here. 00:20.030 --> 00:26.750 In fact, we saw early on what happened if we just browse to localhost 5001 at the moment, and if I 00:26.750 --> 00:35.510 go to a new tab and I browse to localhost 5001 without any further route parameters, then it doesn't 00:35.540 --> 00:41.090 return us anything because it's not configured to return static assets and we need to tell it to. 00:41.120 --> 00:49.160 So I'll go back to VSCode and inside the middleware here and just below the exception middleware. 00:49.160 --> 00:52.400 The ordering is very important at this stage. 00:53.030 --> 00:55.640 In fact middleware ordering is important. 00:55.640 --> 00:56.750 Full stop. 00:56.780 --> 00:58.940 But I just wanted to emphasize that point. 00:58.940 --> 01:01.700 And inside here we're going to add some middleware. 01:01.700 --> 01:07.180 And we're going to use the use default files middleware we get from dot net. 01:07.180 --> 01:13.030 And if we hover over this, then this enables default file mapping on the current path, and files are 01:13.030 --> 01:19.720 served from the path specified which defaults to the root subfolder. 01:19.780 --> 01:26.740 So by doing that it's going to return the contents of the W-w-w root subfolder. 01:26.740 --> 01:30.340 But we also need to tell it to return those static files as well. 01:30.340 --> 01:36.280 And we have more middleware for this which is the app use static files middleware. 01:36.280 --> 01:42.970 And this allows our API server to return the files inside that subfolder. 01:42.970 --> 01:45.250 So we need a combination of both of those. 01:45.280 --> 01:49.930 Now that alone will do something but it won't do everything. 01:49.930 --> 01:51.520 And let me demonstrate why. 01:51.520 --> 01:59.110 If I go back to the API tab and I'm just going to control R to restart the API server after adding that 01:59.110 --> 02:00.070 middleware. 02:00.220 --> 02:02.560 So let's see what this has actually done for us. 02:02.590 --> 02:07.960 And if I go back to the browser and I refresh the page, then it looks like nothing's working. 02:07.960 --> 02:11.320 But I think this has put the HTTP address in. 02:11.320 --> 02:11.330 Addressing. 02:11.360 --> 02:16.880 I do miss the days where the browser used to tell you whether or not you're running in HTTP or Https 02:16.910 --> 02:20.660 very clearly, but nowadays it hides that information. 02:20.660 --> 02:26.990 So what we can see is that by browsing to this, I do have access to my client app running on the server, 02:26.990 --> 02:34.400 and if I click on the catalog, everything looks to be working just fine and it's pretty fast. 02:34.430 --> 02:40.130 In fact, the loading is so fast it looks like it's a bit glitchy because it is very fast and everything 02:40.130 --> 02:40.850 looks fine. 02:40.850 --> 02:47.570 We've got our different products we can browse around, but where it all falls apart is if I refresh 02:47.570 --> 02:53.270 the page and then it doesn't work and why doesn't it work? 02:53.300 --> 03:00.200 And it's because of this root parameter of the catalog, because this is going to be handled by default 03:00.200 --> 03:01.490 by the API server. 03:01.490 --> 03:07.880 And the API server is saying, hey, I don't have any routes for catalog, I've got routes for API products, 03:07.880 --> 03:13.820 I've got routes for API whatever, but I don't have a route for catalog, and we need to tell our API 03:13.850 --> 03:18.340 to use a fallback option. 03:18.340 --> 03:24.250 So if it doesn't recognize a route, then it passes that on to our react application, which does have 03:24.250 --> 03:27.520 React Router and can handle that particular route. 03:27.550 --> 03:34.480 So the typical approach to resolving this is to use a fallback controller, which tells our API what 03:34.510 --> 03:37.060 to do if it cannot locate a route. 03:37.060 --> 03:42.730 So we'll go back to VS code and inside the. 03:43.150 --> 03:50.830 Let's go back to Solution Explorer and inside our API controllers. 03:50.860 --> 03:53.020 Let's create a new file. 03:53.050 --> 03:56.140 And it's going to be a class. 03:56.140 --> 03:59.380 And we'll call it fallback controller. 04:00.430 --> 04:08.830 And inside here we're not going to use our base API controller because this is not an API endpoint controller. 04:08.830 --> 04:11.620 We'll just derive from controller. 04:12.160 --> 04:15.310 And we'll bring this in from ASP.Net core MVC. 04:15.310 --> 04:22.350 And if we hover over this then this is a base class for an MVC controller with Vue support and a view 04:22.650 --> 04:28.530 really relates to an index.html page where returning HTML. 04:29.040 --> 04:33.030 So we need this one for this particular controller. 04:33.090 --> 04:40.140 We're also going to allow anonymous just to be explicit that we do not want to authorize any of the 04:40.140 --> 04:41.400 endpoints inside here. 04:41.400 --> 04:48.510 In fact, we're just going to have a single controller action inside here whose purpose is to return 04:48.510 --> 04:50.040 index.html. 04:50.070 --> 04:54.810 So inside here we're going to use public I action result. 04:54.990 --> 04:57.360 And we'll call it index. 04:58.260 --> 05:02.190 And inside here we're going to return a physical file. 05:02.910 --> 05:06.660 And we need to specify the path and combine. 05:06.990 --> 05:13.170 And then inside parentheses we specify directory and we can get the current directory. 05:13.200 --> 05:14.400 Add parentheses. 05:14.430 --> 05:15.240 Add a comma. 05:15.240 --> 05:22.050 And then we tell this effectively what the path is to our index.html file. 05:22.080 --> 05:25.980 So the second part of the path is going to be ww w routes. 05:26.700 --> 05:30.560 Then we add a comma and we want the index dot HTML. 05:30.650 --> 05:35.300 And to the right of the parentheses we'll specify the type of content. 05:35.300 --> 05:38.480 And this is going to be text forward slash HTML. 05:38.480 --> 05:44.180 And I'll just move some stuff down because I've gone off the edge there and add the semicolon. 05:44.180 --> 05:49.400 So when this action is called then we return effectively the index dot HTML. 05:49.700 --> 05:56.270 So the next step is to tell our program class about this additional controller and what to do if it 05:56.270 --> 05:58.970 discovers a route that it doesn't know how to deal with. 05:59.000 --> 06:00.440 So we're going to use app. 06:00.440 --> 06:05.240 And then there's a map fallback to controller method that we can use. 06:05.360 --> 06:08.810 Inside here we specify the action that we wish to call. 06:08.810 --> 06:10.040 We called it index. 06:10.040 --> 06:11.840 So I'll specify index there. 06:11.840 --> 06:19.310 And then we can specify fallback as the name of the controller that we're using that contains that action. 06:19.340 --> 06:23.390 And if I just restart the API controller once again we need to. 06:23.420 --> 06:31.940 Anyway after doing that action then what we should find when we go back to our clients application. 06:31.940 --> 06:33.960 If I refresh the page now. 06:33.990 --> 06:40.710 Now we get taken to our catalog and everything should be working just as we'd expect it to, and it 06:40.710 --> 06:42.570 should be working very quickly. 06:43.170 --> 06:48.510 Now I've still retained my login, but let's just test the login logout functionality. 06:48.510 --> 06:54.180 So I'll just log in and I'll log in as Bob at test.com with the password. 06:54.240 --> 07:00.240 And I should be entered into my application and I should be able to add things to the cart. 07:00.270 --> 07:06.060 I should be able to go to the basket, I should be able to click on checkout and we don't have the. 07:06.090 --> 07:11.580 Or at least I've stopped the stripe CLI from running, so I don't have the full functionality running 07:11.580 --> 07:17.790 at the moment, but I will presume that everything is going to be fine with that. 07:17.790 --> 07:24.210 But what we currently have, and what we have been using all the way through this training course is 07:24.210 --> 07:30.390 not a production level database server, and it's time to change. 07:30.390 --> 07:34.230 And we're going to take a look at using a production database server. 07:34.260 --> 07:38.760 We'll use SQL server and we'll take a look at configuring that next.