WEBVTT 00:00.020 --> 00:03.230 Okay, now we're all set up on Azure to deploy our application. 00:03.230 --> 00:05.090 So let's head back to VS code. 00:05.090 --> 00:09.230 And I'll just close all of this stuff down and let's open up our terminal. 00:09.230 --> 00:11.840 We'll stop our API server from running. 00:12.080 --> 00:15.830 And inside here we're going to create a published version of our. 00:16.040 --> 00:17.330 Net application. 00:17.330 --> 00:25.400 In fact, before we do let's go to Source Control and we'll stage and commit our changes prior to publishing. 00:25.400 --> 00:33.320 So I'll stage the changes and I'll just say pre publish as the commit name and I'll commit and I'll 00:33.320 --> 00:35.270 sync them up with GitHub. 00:35.270 --> 00:43.640 And then inside our terminal inside the API folder we will use dotnet publish. 00:44.240 --> 00:46.550 And then we give it a configuration value. 00:46.550 --> 00:49.850 And we'll give it a value of release. 00:49.880 --> 00:52.730 And then we'll give it an output directory. 00:52.730 --> 00:59.030 And we'll say period forward slash bin forward slash publish as the directory. 00:59.060 --> 01:06.980 We're going to publish our compiled and built production enabled application two and press return. 01:06.980 --> 01:10.370 And this will go ahead and do just that. 01:11.090 --> 01:17.810 And if we go and take a look at our File Explorer this time because we don't see our bin folder inside 01:17.810 --> 01:18.740 Solution Explorer. 01:18.740 --> 01:24.830 But if we go to the File explorer expand API expand bin, then we've got our publish folder. 01:24.830 --> 01:28.010 And this contains effectively our application. 01:28.010 --> 01:32.630 It's got our root folder copied into this as is. 01:32.630 --> 01:37.190 And then we've got all of the DLLs that make up our application. 01:37.190 --> 01:43.010 All of the parts of DotNet that we've used inside our application that we're using, they're all get 01:43.010 --> 01:46.310 built into our published version of our application. 01:46.310 --> 01:51.830 The idea being that we can take this and run this on any server that has the. 01:52.010 --> 01:53.510 Net runtime available. 01:53.510 --> 01:56.450 And of course Azure does have that available. 01:56.450 --> 01:59.210 So how do we get this from here to Azure. 01:59.240 --> 02:03.290 Well we'll use a VSCode extension to help us do that. 02:03.290 --> 02:13.820 And if we do take a look for Azure inside here, then what we can utilize is the Azure App Service Management 02:13.820 --> 02:16.340 extension for Visual Studio Code. 02:16.340 --> 02:21.740 And this will give us an option to right click and publish to Azure. 02:21.770 --> 02:24.440 So let's go ahead and install this one. 02:25.730 --> 02:30.470 And once this is installed let's go back to our File Explorer. 02:30.470 --> 02:36.590 And in fact what we do have now is the Azure extension available. 02:36.590 --> 02:41.810 And it looks like it's picked up from a previous sign in for myself. 02:41.810 --> 02:44.930 So I can see Azure subscription inside here. 02:44.960 --> 02:51.170 But if you do come on to the Azure tab, then there should be an option to log in to Azure through this. 02:51.200 --> 02:56.090 And once you've logged in you should see something similar to what I have here. 02:56.090 --> 03:01.010 But we're not going to use this tool like it is to deploy our application. 03:01.130 --> 03:05.600 We'll go back to the File Explorer and we'll go to our publish folder. 03:05.600 --> 03:10.100 We'll right click and we've got a Deploy to Web app option. 03:10.100 --> 03:11.960 I'm going to select this one. 03:11.990 --> 03:17.300 And this is going to go out to Azure and check what's available for me to deploy this to. 03:17.330 --> 03:24.020 And the one that I'm going to deploy it to is Restore Course, the one that I created in the demo previously 03:24.380 --> 03:27.230 or in the previous lesson, and select that one. 03:27.770 --> 03:33.230 And then we'll get the pop up saying, are we sure this will overwrite any previous deployments and 03:33.230 --> 03:34.100 cannot be undone? 03:34.100 --> 03:38.900 I'm going to say, okay, deploy and then we'll get another prompt. 03:38.930 --> 03:41.330 Always deploy the workspace here. 03:41.360 --> 03:45.500 I'll say skip for now, and then we'll get our progress inside here. 03:45.500 --> 03:49.430 And already that has happened and it's been deployed. 03:49.430 --> 03:51.860 So then we can browse the website. 03:52.190 --> 03:59.090 So if we go across to our browser I may need to do this in a new browser window because I don't think 03:59.090 --> 04:00.770 refreshing is going to do it. 04:00.800 --> 04:07.130 Oh, it has done it in previous testing that didn't have the desired effect, but we do have now our 04:07.130 --> 04:10.330 Are deployed application living on the internet. 04:10.330 --> 04:18.070 And if I go to the catalog, then we can see our list of products and all of our functionality should 04:18.070 --> 04:19.600 be working as it did before. 04:19.630 --> 04:20.950 It's very fast. 04:20.950 --> 04:22.000 This is deployed. 04:22.000 --> 04:22.840 This is on the internet. 04:22.840 --> 04:23.770 This is not local. 04:23.770 --> 04:27.940 This is a SQL server and our web app living on the internet. 04:27.940 --> 04:33.190 And if I add something to the cart then we can see that functionality is working again. 04:33.190 --> 04:35.320 It's lightning fast in fact. 04:35.320 --> 04:37.210 And let's click on our basket. 04:37.210 --> 04:38.830 We see the products that have been added there. 04:38.860 --> 04:45.220 We'll test a bit more functionality, and the loading bar doesn't barely get a chance to appear before 04:45.220 --> 04:46.540 it's already loaded. 04:46.540 --> 04:48.070 So pretty fast. 04:48.070 --> 04:50.770 And I'll click on checkout, which takes us to the login. 04:50.770 --> 04:53.560 So I'll log in as Bob at test.com. 04:53.560 --> 04:58.510 When we deployed our app and Azure started our app, it would have seeded the data in there. 04:58.510 --> 05:02.980 So we should be able to use our Bob at Test.com user to do this. 05:02.980 --> 05:06.520 So I'll sign in and then we get taken to our checkout page. 05:06.520 --> 05:13.840 So I'll just pick an address in the US, and I'll use Bob test as the name and in the address. 05:13.840 --> 05:19.420 We should still have our Google autocomplete here, so we can start typing the first line of the address. 05:19.420 --> 05:21.370 And then we get some options. 05:21.370 --> 05:24.010 So let's go for this one here. 05:24.040 --> 05:25.720 Doesn't really matter of course. 05:25.720 --> 05:28.540 And I'll click on save as default address. 05:28.540 --> 05:30.310 And I'll click on next. 05:30.340 --> 05:32.590 And then we get taken to our card number. 05:32.590 --> 05:36.580 So let's try a successful payment because we should see the full process here. 05:36.580 --> 05:42.880 Because stripe is going to be sending that webhook to our deployed application. 05:42.880 --> 05:46.780 So I'll just add the standard card number of all 40 twos. 05:46.810 --> 05:50.350 I'll put an expiry date in the future with the security code. 05:50.350 --> 05:51.700 I'll click on next. 05:51.700 --> 05:58.600 And then we get taken to our billing and delivery information, etc. and then I can pay seven six, 05:58.630 --> 06:03.250 eight and I'll try this and we get the success. 06:03.250 --> 06:08.500 And if we go and view the order then we can see that the payment has indeed been received. 06:08.500 --> 06:17.590 And that confirms that stripe has sent the webhook to our API endpoint on our production server. 06:17.620 --> 06:19.270 So awesome. 06:19.270 --> 06:20.200 We've made it. 06:20.230 --> 06:23.830 We've got our published application on the internet. 06:23.830 --> 06:30.070 We're able to make an order and successfully receive the payment, so that was pretty easy. 06:30.070 --> 06:35.830 But I do want to take the deployment a step further, because we had to right click something and do 06:35.830 --> 06:38.590 something manually to deploy our application. 06:38.590 --> 06:43.690 Wouldn't it be nice is if we made a code change and added some enhancement? 06:43.690 --> 06:51.130 Or a new feature to our application is if when we deployed that updated code to GitHub, then something 06:51.130 --> 06:57.280 automatically happened in the background to then publish those code changes to Azure and automatically 06:57.280 --> 06:59.440 updates our published application. 06:59.440 --> 07:06.550 And that's effectively CI, CD, which stands for Continuous integration, Continuous Deployment or 07:06.580 --> 07:09.400 often shortened to just Continuous Delivery. 07:09.400 --> 07:13.630 And we're going to take a look at that and implement that next.