WEBVTT 00:00.020 --> 00:03.560 Okay, so we've had a successful deployment that didn't actually change anything. 00:03.590 --> 00:10.430 If I go back to my published application and I just refresh this page, we might see a bit of a delay 00:10.430 --> 00:15.440 as the application would have restarted whilst we go and load our application for the first time. 00:15.440 --> 00:19.310 But if I go and take a look at the order details, well, this hasn't changed. 00:19.310 --> 00:24.590 I've still got the same problem inside here because the updated code did not get deployed. 00:24.590 --> 00:26.540 So that's what we're going to take a look at now. 00:26.540 --> 00:28.580 And we'll go back to VS code. 00:28.580 --> 00:32.780 And let's close these down and inside our File Explorer. 00:32.810 --> 00:40.130 What we don't have at this moment in time is the GitHub folder or the workflow that Azure created for 00:40.130 --> 00:40.670 us. 00:40.670 --> 00:43.070 So we need to pull that down from GitHub. 00:43.070 --> 00:45.470 So I'm just going to go to the version control tab. 00:45.470 --> 00:50.270 And if we click on the ellipses here we should be able to click the pull. 00:50.270 --> 00:57.980 And this is going to pull the changes from GitHub into our code. 00:57.980 --> 01:03.820 And if I go back to the File Explorer now now I've got the GitHub folder inside here, the workflows 01:03.820 --> 01:06.880 and the workflow that we were looking at on Azure. 01:06.910 --> 01:09.430 And do we want to install this extension. 01:09.430 --> 01:10.360 I'll leave that up to you. 01:10.390 --> 01:11.560 It can be helpful. 01:11.590 --> 01:14.920 It will give you some intellisense and so on and so forth. 01:14.920 --> 01:19.840 I feel I've got enough extensions for the time being, so I'm just going to ignore that prompt. 01:19.840 --> 01:22.990 So we want to make a change or two inside here. 01:22.990 --> 01:30.850 And what I'd like to do is be able to publish or build our react application as part of this workflow. 01:30.850 --> 01:36.250 And we can do that inside here, because we're effectively running this workflow on a windows machine. 01:36.250 --> 01:39.400 We can use windows functionality. 01:39.400 --> 01:42.580 So we can set up node on this little server. 01:42.580 --> 01:49.060 And then we can use node to use npm to install our packages and build our application. 01:49.060 --> 01:55.000 So inside here we need to do this after actions checkout because this is checking out our repository 01:55.000 --> 01:56.230 from GitHub. 01:56.230 --> 02:06.500 So below this step I'm going to add a dash And give it a name and say set up Node.js and below. 02:06.530 --> 02:06.980 Name. 02:06.980 --> 02:11.780 I'm going to say users and we're going to use a specific workflow. 02:12.020 --> 02:15.770 From the workflow marketplace, which is what these effectively are. 02:15.800 --> 02:21.110 There's code inside here that have the ability to check out our code. 02:21.110 --> 02:22.730 So we don't need to write that manually. 02:22.730 --> 02:26.780 We're just using a pre-created action that somebody else has already created. 02:26.810 --> 02:28.610 And we're going to do the same here as well. 02:28.610 --> 02:34.460 We're going to use a workflow called setup dash node at v3. 02:34.460 --> 02:37.670 And then below users we can specify with. 02:37.760 --> 02:44.270 And then I'm just going to use node dash version colon and 20 as that is compatible with what we're 02:44.270 --> 02:45.080 doing here. 02:45.080 --> 02:48.080 So once we have node we can then use node. 02:48.080 --> 02:56.750 So below the setup node job I'll add another dash and give this a name and just say install deps and 02:56.750 --> 03:00.070 build client Its app. 03:00.430 --> 03:08.170 And inside here we can use a run command, which effectively uses a windows terminal or command prompt. 03:08.200 --> 03:11.530 So we add a pipe because we're going to have multiple lines. 03:11.620 --> 03:17.830 Then we're going to CD into the client because we're going to be working at the level of our solution 03:17.830 --> 03:18.400 at the moment. 03:18.400 --> 03:21.790 So just like on a client, if we were going to do the same thing. 03:21.790 --> 03:25.030 So do be aware that you're not going to get any help with this. 03:25.060 --> 03:30.640 If you've called your client application something else, then you need to specify the name of that 03:30.640 --> 03:31.150 folder. 03:31.150 --> 03:35.410 So I'm working at the level of the solution. 03:35.410 --> 03:38.650 So I'm going to CD into this folder the CD client. 03:38.680 --> 03:40.030 Mine is called client. 03:40.030 --> 03:42.190 So that's what I'm seeding into. 03:42.340 --> 03:49.060 Below the CD client we can then just use npm install as we need to install our client packages. 03:49.090 --> 03:55.240 And then we can use npm run build, which is going to use the V8 tools to build a production version 03:55.240 --> 03:57.010 of our react application. 03:57.010 --> 04:04.800 Once that's finished its build, then it's going to output the updated react code into our W-w-w root 04:04.800 --> 04:07.980 folder inside the API folder. 04:07.980 --> 04:11.580 So that's going to include the latest changes that we've made in development. 04:11.580 --> 04:14.880 And the rest of this can stay exactly the same. 04:14.880 --> 04:18.210 So we've already made the code changes that we're going to deploy. 04:18.210 --> 04:20.370 We've now updated our workflow. 04:20.430 --> 04:24.060 And this is going to be the final action that we do inside this section. 04:24.060 --> 04:28.080 We do have another section coming up to deal with admin functionality. 04:28.110 --> 04:32.430 But just because we've deployed our app doesn't stop us from enhancing our application. 04:32.430 --> 04:37.950 And with this continuous integration, all of our changes, well, when we do commit them to GitHub, 04:37.950 --> 04:41.580 we're effectively deploying them to our production environment. 04:41.580 --> 04:43.350 So that's the way we're going to approach this. 04:43.350 --> 04:50.130 But we'll now in order to deploy our updates to our app, all we need to do because of the configuration 04:50.130 --> 04:56.640 setting inside here on push to the main branch, and because we've got this push to the main branch 04:56.640 --> 05:00.400 as one of the workflow triggers when I I'd commit my changes here. 05:00.400 --> 05:05.890 This is going to then kick off that workflow and hopefully deploy our changes to Azure. 05:05.980 --> 05:10.090 So to make this happen, then all we need to do is commit our changes. 05:10.090 --> 05:19.390 So I'm going to stage the changes and then I'm going to say end of section 12 as this is the last thing 05:19.390 --> 05:21.130 we're doing inside this section. 05:21.400 --> 05:22.960 And I've got my two changes. 05:22.960 --> 05:29.050 It's going to update the app, I've got the YAML file, I'll commit these and I'll sync these up with 05:29.080 --> 05:30.100 GitHub. 05:30.160 --> 05:36.910 Now what should be happening now if we go back to the browser and we go back to GitHub and we go back 05:36.910 --> 05:43.150 to actions, what we should see is that we've got our end of section 12 commits. 05:43.150 --> 05:46.510 And this has kicked off the workflow. 05:46.510 --> 05:48.820 So we're going to build and then we're going to deploy. 05:48.850 --> 05:54.550 Now this probably will take a few minutes because we've also got to build our react application as part 05:54.550 --> 05:55.480 of this step. 05:55.480 --> 06:02.760 So I'll pause the video and then I'll come back when it's either completed successfully or it's failed. 06:02.760 --> 06:04.680 And it did indeed fail. 06:04.680 --> 06:11.610 And if we go and take a look at the build and we can go and take a look at what the error is that we 06:11.610 --> 06:14.820 received here, and it's the standard error. 06:14.850 --> 06:23.160 I forgot that I was using react 19 release candidates, and when I use npm install, if I do not include 06:23.160 --> 06:29.490 that legacy dependency or legacy peer deps switch, then we get this kind of error. 06:29.490 --> 06:31.830 So it failed at the client stage. 06:31.830 --> 06:37.980 So okay fine, we've got a failing workflow, but it's pretty obvious what we need to do to fix this. 06:37.980 --> 06:40.140 So I'm going to go back to the code. 06:40.320 --> 06:51.060 And all I need to do to resolve this particular error is add on where I've got the npm install we have 06:51.060 --> 06:52.290 to continue to use. 06:52.290 --> 06:54.420 And I'm just going to copy that from the error actually. 06:54.420 --> 07:00.130 So I don't make any typos in this file because I'm not going to get any help with this. 07:00.130 --> 07:06.220 We need this switch, so I'm just going to copy it into my clipboard, head back to the code and paste 07:06.250 --> 07:07.270 it in here. 07:07.270 --> 07:09.430 And we have to have this. 07:09.430 --> 07:17.230 If we're on a beta release candidate version of react then this is required. 07:17.230 --> 07:19.930 So not quite what I was hoping for. 07:19.930 --> 07:31.840 Now I've got another change to commit to GitHub and I'll stage this change and I'll say end of section 07:31.870 --> 07:40.600 12 updated and I'll commit and I'll sync the changes again. 07:40.960 --> 07:45.580 So hopefully this time that will resolve this issue. 07:45.580 --> 07:48.760 So I'll come back to GitHub and I'll go back to the actions. 07:48.760 --> 07:53.290 And we've got our next workflow or the next version of this workflow underway. 07:53.320 --> 07:56.710 So once again hopefully this time it should work. 07:57.130 --> 08:02.490 And I'll pause the video and come back once it's either succeeded or it's failed. 08:03.120 --> 08:04.470 And we have success. 08:04.470 --> 08:09.360 This built and deployed successfully, and we can go and check the logs and see what happened inside. 08:09.360 --> 08:12.810 Here you can take a look at any specific part you want to take a look at. 08:12.840 --> 08:17.340 If we take a look at installing dependencies and building the client app, this is new. 08:17.370 --> 08:19.470 So we can see what's going on inside there. 08:19.470 --> 08:25.080 And it's pretty much the same output that we saw when we built this manually inside our application. 08:25.080 --> 08:27.360 And it deploys it to that API folder. 08:27.360 --> 08:30.810 Then it goes through the rest of the steps and we've seen those before. 08:30.810 --> 08:32.970 And then we get our deployment steps. 08:32.970 --> 08:34.950 And brilliant this now works. 08:34.950 --> 08:37.350 We do have one small warning here. 08:37.500 --> 08:41.100 Something about the output option isn't supported when building a solution. 08:41.100 --> 08:48.120 Specifying a solution level output path results in all projects copying outputs to the same directory, 08:48.120 --> 08:50.190 which can lead to inconsistent builds. 08:50.700 --> 08:53.820 I'm not sure about that warning whether or not it's going to affect us. 08:53.820 --> 08:59.150 We'll soon see anyway, because we're going to take a look at our deployed application and warnings 08:59.150 --> 09:00.710 are not errors. 09:00.710 --> 09:07.430 And this is specifically related to net publish, by the way, and this is the workflow that Azure give 09:07.460 --> 09:10.070 us the same company that makes. 09:10.250 --> 09:15.740 Net that we're using that provides the dotnet tools that specify an output directory. 09:15.740 --> 09:20.840 So I'm not going to worry about this particular warning unless our application fails of course. 09:20.840 --> 09:25.340 So I'll go back to our application and let's go back to the catalog. 09:25.580 --> 09:30.800 Might have to wait a little bit longer the first time that we do this, because it does have to effectively 09:30.800 --> 09:32.630 restart our application as well. 09:32.630 --> 09:33.950 But let's go to the orders. 09:33.950 --> 09:39.380 First of all, click on my orders and let's click on the order details. 09:39.380 --> 09:44.660 Because what we'd like to see is that being updated to 600 MB. 09:44.690 --> 09:45.590 That hasn't been. 09:45.590 --> 09:51.140 Let me just refresh the page, because we might be dealing with a cached version of our application. 09:51.140 --> 09:58.270 And in fact, because I've lost my login, that does suggest that it is a cached version of this application. 09:58.390 --> 10:06.520 So let me refresh and it appears I do have some issues now because that isn't working at all. 10:06.550 --> 10:10.360 So it does appear there's a problem with our deployment after all. 10:10.360 --> 10:12.130 But what can we do about this? 10:12.130 --> 10:15.220 We've got a loading flag that's not doing anything. 10:15.220 --> 10:19.660 And let's go and take a look at the console, see if we can get any information here. 10:19.780 --> 10:24.310 And it's telling us missing value for stripe API key should be a string. 10:24.310 --> 10:28.510 And it looks like I've got some logging information left over here. 10:28.780 --> 10:31.300 Parsing error okay. 10:31.300 --> 10:32.620 That's interesting. 10:32.800 --> 10:37.990 And it looks like we've got a bit of troubleshooting to do here because that's interesting. 10:37.990 --> 10:42.970 And even though I was hoping that would be the end of this section, it looks like we've got something 10:43.000 --> 10:43.870 to solve. 10:43.870 --> 10:51.370 But that's not a problem, because troubleshooting our application on production is something that we 10:51.370 --> 10:52.540 need to think about. 10:52.540 --> 10:57.790 And in the next lesson, we'll take a look at what the problem could be with this.