WEBVTT 00:00.020 --> 00:02.960 Okay, so we've got ourselves a problem in production. 00:02.960 --> 00:08.240 And when it comes to troubleshooting problems in production, this is the worst possible position to 00:08.240 --> 00:08.930 be in. 00:09.110 --> 00:15.500 Ideally, we'd like these things to happen in development and not just appear in production because 00:15.500 --> 00:19.700 it's much easier to troubleshoot and solve problems in development. 00:19.700 --> 00:27.200 If we have something like this on production, then it's normally really, really tricky to troubleshoot. 00:27.200 --> 00:31.790 So what I want to do is I think I know what the issue with this is. 00:31.820 --> 00:37.940 And in fact, a Google search will get us to a Stack Overflow post that will tell us pretty quickly 00:37.940 --> 00:38.600 what this is. 00:38.600 --> 00:44.180 I should think, and if I just paste that into Google, then inside Stack Overflow. 00:44.210 --> 00:46.580 We're not the first to come across this. 00:46.580 --> 00:49.790 And if we take a look inside here, a different technology. 00:49.790 --> 00:52.070 It's using Vue instead of react. 00:52.070 --> 00:53.540 But same kind of deal. 00:53.540 --> 00:57.290 They've got the key being passed as an environment variable. 00:57.290 --> 01:04.380 And if we take a look down here in the solutions then the issue is solved by typecasting the key to 01:04.410 --> 01:05.130 a string. 01:05.160 --> 01:10.560 When it's getting it from our environment variables, it's not specifying it as a string, it's something 01:10.560 --> 01:11.280 else. 01:11.280 --> 01:16.140 And by putting it in backticks, then that forces it to be a string. 01:16.140 --> 01:22.560 Why we don't get this in development or it's only just appeared now is something I do not know, but 01:22.560 --> 01:23.430 it has. 01:23.460 --> 01:29.580 But anyway, that looks to be what the issue is, and a simple Google search pretty much tells us what 01:29.580 --> 01:31.290 we need to do to fix this. 01:31.290 --> 01:37.290 But what if it's not something that's so simple to Google and say, hey, what's the problem with this? 01:37.320 --> 01:38.520 What if it's something else? 01:38.520 --> 01:45.300 Well, I do want to double check and just go through the options we have with Azure, because troubleshooting 01:45.330 --> 01:49.170 a production application in the cloud is tricky. 01:49.170 --> 01:55.440 So inside our app service we do have the option to diagnose and solve problems. 01:55.440 --> 01:58.830 Let's just click on this first of all. 01:58.830 --> 02:06.440 And there are tools inside here that can help, but the one that I would typically go for straight away 02:06.590 --> 02:09.290 is the application event logs. 02:09.290 --> 02:15.140 And if you click on this, then this will give you the event logs as though you're running on a windows 02:15.140 --> 02:15.920 machine. 02:15.920 --> 02:21.170 And if you had a net error then the exception would be outputs into. 02:21.200 --> 02:23.450 Here we're not working with a net error. 02:23.450 --> 02:27.770 So all I've got is info inside here on the logs. 02:27.770 --> 02:32.120 But if you did have a net error then please come to this section. 02:32.120 --> 02:36.620 This is the equivalent of having an exception in development. 02:36.620 --> 02:38.930 And taking a look at the API logs. 02:38.930 --> 02:41.960 The exceptions are going to be output into here. 02:41.960 --> 02:43.430 And you would see the errors. 02:43.430 --> 02:50.510 And then if you select it then below you'll see the details about the error the same as you would see 02:50.510 --> 02:52.280 them in the net terminal. 02:52.520 --> 02:56.720 Obviously that's not going to help us with what we're doing here, but I would encourage you to take 02:56.720 --> 02:57.830 a look at this. 02:58.220 --> 03:01.050 Other things like database connectivity issues. 03:01.050 --> 03:04.830 They're all typically resolved by fixing the connection string. 03:04.830 --> 03:07.020 That's typically the issue with that side of things. 03:07.020 --> 03:11.970 So also double check your environment variables as well and make sure they're accurate. 03:11.970 --> 03:21.180 Because one big difference between what we did by right clicking publish folder and deploying compared 03:21.180 --> 03:29.070 to what we're doing with the workflow deployment, is the workflow is relying on the code that we have 03:29.460 --> 03:31.710 inside our GitHub repository. 03:31.740 --> 03:38.790 Now, anything that we've ignored from GitHub and thinking about it now, I've thought about it a bit 03:38.790 --> 03:39.240 more. 03:39.270 --> 03:41.100 That is the problem. 03:41.100 --> 03:45.390 And in fact, casting that to a string isn't going to solve that problem either. 03:45.390 --> 03:54.210 Because if I go back to the code and I take a look at what we're doing here, we've got our env file 03:54.210 --> 03:57.630 and our env production file, these are both dimmed out. 03:57.630 --> 04:02.540 So it's actually not an issue with casting this to a string at all. 04:02.540 --> 04:03.950 This is absolutely fine. 04:03.950 --> 04:11.960 But because this is not going up to GitHub, then we're not sending up our key with this. 04:12.140 --> 04:13.940 So how do we resolve this then? 04:13.970 --> 04:20.750 Well, we actually do need our production key to be in our GitHub repository if we want continuous integration 04:20.750 --> 04:21.680 to work. 04:21.890 --> 04:28.970 So where I've got the env production being excluded from GitHub, I actually need to make this available 04:28.970 --> 04:29.780 to GitHub. 04:29.780 --> 04:34.400 So I'll go back to the let's see how can I just do it from here? 04:34.400 --> 04:35.480 I don't think I can. 04:35.510 --> 04:38.090 I think I'm going to need to go to the git ignore file. 04:38.090 --> 04:46.490 And let's scroll down inside here and find where we've got the env production excluded. 04:46.490 --> 04:50.330 It should be added at the bottom because that's one we added manually. 04:50.330 --> 04:53.510 And I'm going to remove this from the git ignore file. 04:54.230 --> 04:59.300 And we're going to send that up with our git repository code. 04:59.300 --> 05:04.590 And then this will be able to be used when we build our react application. 05:04.590 --> 05:06.990 And it should solve that problem. 05:06.990 --> 05:10.200 So not that tricky to resolve I think. 05:10.230 --> 05:16.110 Well I actually am going to touch word cross fingers and use my lucky rabbit's foot because now I've 05:16.140 --> 05:23.280 said it out loud, it's never going to work first time, but let's give that a go. 05:23.280 --> 05:25.800 So currently I don't even have my catalog loading. 05:25.830 --> 05:33.120 And my presumption is that that's related to the stripe API key being missing from our react application. 05:33.120 --> 05:37.830 So back to version control tab and a couple of changes in here. 05:37.830 --> 05:40.560 I'm going to need to stage these changes. 05:40.680 --> 05:47.040 And I'll just give it a commit message of git ignore updated. 05:49.110 --> 05:52.860 And I'll commit this and I'll sync changes with GitHub. 05:52.890 --> 05:57.480 Now what this means is we're going to have to wait for the workflow to do its thing all over again. 05:57.480 --> 06:02.810 Now, in my case, that took about 3 or 4 minutes to build both the react application and the. 06:03.020 --> 06:04.070 Net application. 06:04.070 --> 06:10.490 So now's a good time to get that cup of tea or coffee that you've been thinking about as. 06:10.520 --> 06:15.890 Or I'll just make sure it's actually started first before I go and do that myself. 06:15.890 --> 06:18.320 But we can see that our workflow is indeed running. 06:18.320 --> 06:20.780 So this may take a minute or two. 06:20.810 --> 06:24.140 So I'll pause the video and come back once it has completed. 06:24.830 --> 06:28.670 Okay, so that did complete successfully five minutes 43 seconds. 06:28.670 --> 06:34.100 That is quite time consuming to deploy our application, but it's not something that we need to keep 06:34.100 --> 06:34.730 an eye on. 06:34.730 --> 06:39.770 Once we commit our changes, we can normally be typically confident after it's worked 1 or 2 times, 06:39.770 --> 06:44.630 it's going to continue to work in the background, and it's not something that we need to have our eyeballs 06:44.630 --> 06:46.130 on as it's going on. 06:46.130 --> 06:47.990 But did this solve the problem? 06:47.990 --> 06:54.980 Let's go back to the application, the published application, and let's try refreshing the page and 06:54.980 --> 06:56.780 see if we get progress. 06:56.780 --> 07:03.510 And sure, the catalog is now back and I can presume that that API key was the problem. 07:03.600 --> 07:09.780 So just a reminder really, that when we do use a GitHub workflow to deploy our code, it does rely 07:09.780 --> 07:16.170 on the code that we have in our GitHub repository and not the code that we have inside VSCode so much. 07:16.170 --> 07:23.040 And anything that we exclude from git ignore is also excluded from our deployment. 07:23.040 --> 07:26.430 It doesn't matter about the app settings or the app settings development. 07:26.580 --> 07:31.650 Jason, which is not used when we're making a production dotnet application because we supply those 07:31.650 --> 07:36.840 values directly to Azure using the environment variables that we've already looked at. 07:36.840 --> 07:41.460 So let's go and take a look and see if our application actually has been updated. 07:41.460 --> 07:43.140 So I'll go to Bob's orders. 07:43.170 --> 07:44.550 Click on my orders. 07:44.550 --> 07:46.410 Click on the order. 07:46.590 --> 07:53.100 And what we should see now is that the code change that we were expecting to be implemented has indeed 07:53.130 --> 08:01.580 been implemented, because now I can see that my three snowboards now amounts to 600 instead of 200. 08:01.610 --> 08:01.850 There. 08:01.850 --> 08:05.240 So I'm fairly confident that the code change has been deployed. 08:05.240 --> 08:10.820 But let's go and take a look at creating another order with a payment failed card. 08:11.300 --> 08:13.880 And I'll just add let's see. 08:13.880 --> 08:19.040 Let's just add a cheap product into the cart just to make sure the delivery fee stuff works as well. 08:19.070 --> 08:26.060 I'll go to the basket, I'll go to the checkout and we've got the address that we saved earlier. 08:26.090 --> 08:26.630 Great. 08:26.630 --> 08:27.200 That's good. 08:27.200 --> 08:37.550 I'll click next and I'll go and find a stripe test card and I'll get one of the declined options or 08:37.550 --> 08:41.270 I'll use 3D secure I think this time in fact. 08:41.270 --> 08:47.960 So I'll get the 3D secure authentication and I'll choose the one that says Always Authenticate. 08:47.960 --> 08:54.020 I'll go back to the app, I'll paste that card number in, I'll give it an expiry date in the future. 08:54.050 --> 08:55.790 Give it a security code. 08:55.790 --> 08:59.390 And I've got something else new that's come up now. 08:59.880 --> 09:06.900 And this is something else that again stripe is enabled by default. 09:07.260 --> 09:13.410 And I don't want to use the one click checkout with link. 09:13.410 --> 09:15.540 It's something that needs to be signed up for. 09:15.570 --> 09:17.190 Not something we're going to do. 09:17.220 --> 09:18.780 It's actually caught me by surprise. 09:18.810 --> 09:19.680 Again, stripe. 09:19.680 --> 09:24.180 They continue to add things in that I'm not using in this training course. 09:24.510 --> 09:30.450 Again, this is something else that you can disable in the payment methods that I looked at earlier. 09:30.450 --> 09:31.620 I'm going to ignore it for now. 09:31.620 --> 09:33.150 We don't need this for what we're doing. 09:33.150 --> 09:34.740 So I'm just going to click on next. 09:34.740 --> 09:38.160 And I'll get taken to the billing and delivery information. 09:38.670 --> 09:40.170 And I'll click on pay. 09:41.160 --> 09:44.010 And this should bring up the prompts. 09:44.010 --> 09:46.890 And on this occasion I'm going to click fail. 09:48.120 --> 09:50.130 And we should get taken back. 09:50.130 --> 09:52.200 And we see the toast okay. 09:52.290 --> 09:55.980 And what should have happened is that we've got a new order. 09:56.460 --> 09:59.250 And if we take a look at the orders we get, the payment failed. 09:59.250 --> 10:00.830 That's what we'd expect to see there. 10:00.830 --> 10:07.040 So I'll go back to the baskets and I'll need to go through the checkout again and click next and paste 10:07.040 --> 10:12.590 in the card number expiry dates in the future and give it a security code. 10:12.590 --> 10:18.380 I'll ignore the link pay thing, click next and I'll click pay. 10:19.910 --> 10:28.670 And this time I will complete the payment and we get taken to our success page. 10:28.670 --> 10:29.930 But what should happen now? 10:29.930 --> 10:31.820 If I go to my orders? 10:31.850 --> 10:39.470 Then we briefly see the loading indicator, but now we see that that's been updated to payment received 10:39.470 --> 10:41.150 and that's what we're looking for here. 10:41.270 --> 10:43.670 So that's the final action in this section. 10:43.670 --> 10:46.070 We've now got our application deployed onto the internet. 10:46.070 --> 10:49.160 And we've set up continuous integration as well. 10:49.160 --> 10:50.720 And we're looking good. 10:50.720 --> 10:55.040 So we don't need to commit to any more code changes into GitHub. 10:55.070 --> 10:57.380 Obviously we've been doing that as we've gone along. 10:57.380 --> 11:00.560 And we'll wrap up this section with a summary.