WEBVTT 00:00.020 --> 00:04.190 Okay, now that we've got our web app and our database set up at least on Azure. 00:04.220 --> 00:10.040 Now we need to take a look at configuring them because our app needs to know where to find this database. 00:10.070 --> 00:11.720 We have just created. 00:11.720 --> 00:16.400 And also we need to give it access to be able to connect to this database as well. 00:16.400 --> 00:21.290 As well as setting up any environment variables we want to make available to our application. 00:21.320 --> 00:27.680 So we'll start with a connection string because we're here and we've got a link here to show the database 00:27.680 --> 00:28.910 connection strings. 00:28.910 --> 00:32.570 And we need to use this connection string. 00:32.630 --> 00:34.280 Now it's almost complete. 00:34.280 --> 00:38.390 But we just need to replace your password with the actual password. 00:38.390 --> 00:41.120 So I'm just going to copy this into my clipboard. 00:41.120 --> 00:42.620 We'll go to. 00:42.890 --> 00:46.100 And here's where we need to navigate around Azure. 00:46.130 --> 00:49.940 We need to go to our web app to its settings next. 00:49.940 --> 00:53.750 So inside our resource group. 00:53.750 --> 01:01.310 And it's easier just to go to the resource group typically because then we can find our web app inside 01:01.310 --> 01:04.370 here, which is the app service. 01:04.370 --> 01:07.160 So I'll click on Restore Course in my case. 01:07.490 --> 01:12.440 And then we can go to the settings and the environment variables. 01:12.440 --> 01:16.250 And we have a connection string setting here. 01:16.340 --> 01:20.000 And we can add a connection string. 01:20.000 --> 01:25.700 And we're going to call it default connection which needs to match what we've used inside our app settings. 01:25.700 --> 01:27.590 And then we need to give it a value. 01:27.650 --> 01:32.780 And we just need to replace your password with the actual password. 01:32.780 --> 01:35.420 Everything else will stay the same inside here. 01:35.420 --> 01:38.300 So I used a very simple password for mine. 01:38.420 --> 01:40.460 And this database won't survive long. 01:40.460 --> 01:46.040 But even then it's not possible to access this directly because of the firewall settings inside here, 01:46.040 --> 01:47.690 which we'll take a look at soon. 01:47.690 --> 01:53.660 And we've got a setting here for the type SQL server or SQL Azure I'll go for SQL Azure. 01:53.690 --> 01:55.400 I think that would be correct. 01:56.000 --> 01:59.510 And we don't use the deployment slot setting. 01:59.640 --> 02:01.740 And we'll click apply. 02:02.250 --> 02:04.230 And then we'll click apply again. 02:04.920 --> 02:06.240 And we can confirm. 02:06.990 --> 02:11.970 So that's going to update our connection string I'm hesitating about the type here because why would 02:11.970 --> 02:16.260 they have SQL Azure and SQL server as the type. 02:16.830 --> 02:19.710 Something to ponder and we'll see if it works anyway. 02:19.710 --> 02:25.260 And that will be one thing that maybe we'll take a look at and say, maybe we should change this to 02:25.290 --> 02:26.100 SQL server. 02:26.100 --> 02:30.420 But anyway, let's cancel this and we'll come back and deal with that if we need to. 02:30.450 --> 02:35.700 We're also going to deal with our app settings here as well, and we're going to specify what we have 02:35.700 --> 02:38.280 from our app settings development Jason. 02:38.280 --> 02:40.800 And we're going to add those settings inside here. 02:40.800 --> 02:45.750 So if we go back and let's take a look at what we have inside our app settings. 02:45.750 --> 02:49.050 And we'll go to App Settings Development Jason. 02:49.050 --> 02:56.220 And we need these values applied to Azure effectively just our stripe settings. 02:56.220 --> 03:03.570 So you may find it easier to just use copy and paste to supply these, because typos are a real pain 03:03.570 --> 03:05.190 at this point in the course. 03:05.190 --> 03:10.830 Because Azure can be tricky to troubleshoot because it's a production platform, it's not our development 03:10.830 --> 03:12.810 settings that we're dealing with anymore. 03:12.840 --> 03:19.350 So I'm going to use the copy paste technique to go back and add each of the environment variables that 03:19.350 --> 03:20.010 we need. 03:20.040 --> 03:24.240 So I'm going to click on add and the name is going to be Stripe settings. 03:24.240 --> 03:27.960 And then instead of a colon here we use underscore. 03:27.990 --> 03:31.740 Underscore has to be that double underscore for the name. 03:31.740 --> 03:35.520 And for the next part of this we will need the publishable key. 03:35.550 --> 03:37.140 And I'll paste that in here. 03:37.140 --> 03:38.850 And then we can get the value. 03:38.850 --> 03:44.850 And it's just a case of copying this value and pasting it inside. 03:44.850 --> 03:48.210 We're not going to worry about creating a production stripe key. 03:48.240 --> 03:50.700 We'll just use the same one we used in development. 03:50.700 --> 03:51.990 And I'll click apply. 03:52.800 --> 03:55.710 And then I'm going to add another environment variable. 03:55.710 --> 03:58.440 I'll go back and do the same I did last time. 03:58.440 --> 04:01.350 Stripe settings and stripe settings. 04:01.350 --> 04:08.280 Double underscore and go and grab the other or the next variable we need, which is the secret key. 04:08.310 --> 04:17.790 And then I'll just grab its value into my clipboard without the quotes and paste it into the value and 04:17.790 --> 04:19.020 click apply on that one. 04:19.050 --> 04:28.320 I'll click add again and go back, get the stripe settings, paste in there, double underscore, and 04:28.320 --> 04:33.570 the next one is going to be our w h secret and paste that there. 04:33.570 --> 04:39.990 But instead of using what we have from our app settings, we'll go to stripe and we'll get the actual 04:39.990 --> 04:42.900 webhook secret for our application. 04:42.900 --> 04:46.200 So let's go to stripe. 04:46.200 --> 04:47.640 We'll need this URL. 04:47.670 --> 04:53.160 So keep this one handy because we need to let stripe know where to find our web application. 04:53.160 --> 04:56.490 And in a separate tab I'll go to Stripe.com. 04:56.490 --> 04:58.860 And we'll go to our dashboard. 04:58.890 --> 05:07.980 And then we'll go to the developers tab, we'll go to webhooks and we'll add a webhook endpoint. 05:08.580 --> 05:11.580 And we'll paste in the endpoint URL. 05:11.610 --> 05:18.390 And we'll get this from well I'll just copy it from here and paste it in here. 05:18.420 --> 05:26.310 Then it needs to be forward slash API forward slash payments forward slash webhook so that stripe can 05:26.310 --> 05:27.480 find this. 05:27.900 --> 05:30.930 And then we select the events we wish to listen to. 05:30.960 --> 05:32.520 So we'll select events. 05:32.520 --> 05:36.300 And we need to go down to the payment intent. 05:36.870 --> 05:46.350 And we want to listen for the payments intent payment failed and the payment intent succeeded. 05:46.350 --> 05:49.110 And we'll add these two events. 05:49.110 --> 05:51.840 And then we can add this endpoint. 05:51.840 --> 05:55.890 And what this gives us is the signing secret. 05:55.890 --> 06:04.570 So I can reveal this copy this into my clipboard and I can go back to the environment. 06:04.600 --> 06:09.820 Add application setting and paste this inside there and click apply. 06:09.880 --> 06:13.510 So those are the three values that we need inside here. 06:13.510 --> 06:15.100 So I'm going to click apply again. 06:15.100 --> 06:17.500 And then I'm going to confirm this. 06:17.500 --> 06:20.020 And that's the keys that we need inside there. 06:20.020 --> 06:24.160 We don't need to worry about the react stuff because we need to build our react application. 06:24.160 --> 06:26.590 And at that point those values get applied. 06:26.590 --> 06:31.090 We don't need to add our client side environment configuration inside here. 06:31.390 --> 06:36.460 We've got another thing to look at though, because at the moment our web application will not have 06:36.460 --> 06:39.130 access to our database server. 06:39.130 --> 06:41.620 So I'm going to go back to the resource group. 06:41.620 --> 06:46.120 And I'm going to go to the SQL server in this case. 06:46.300 --> 06:50.620 And we need to take a look at the networking settings from here. 06:50.620 --> 06:59.500 And we need to select the selected networks inside the public access and for our firewall rules, we 06:59.500 --> 07:05.050 need to check the box that allows Azure services and resources to access this server. 07:05.050 --> 07:13.570 And if we did want our own client address to be able to access SQL Server on Azure directly, then we 07:13.570 --> 07:16.360 would need to also enable this. 07:16.390 --> 07:22.600 Although this looks like a IPv6 address, so it looks like the Azure portal, at least in my case, 07:22.600 --> 07:27.790 isn't doing what it used to do, which was give us the IPv4 address. 07:27.790 --> 07:30.610 That's an IPv6 address and it doesn't like that. 07:30.610 --> 07:31.840 But I'm not going to do that. 07:31.840 --> 07:36.490 I'm not going to demonstrate connecting to SQL Server on Azure from here. 07:36.490 --> 07:42.010 I'm just going to allow other Azure services and resources to access this server. 07:42.010 --> 07:44.590 And I'll click Save Us. 07:44.830 --> 07:45.940 And great. 07:45.970 --> 07:50.380 Now our web app will be able to access this server. 07:50.380 --> 07:53.320 So that's the configuration side of things done. 07:53.320 --> 07:58.540 And next we'll take a look at actually deploying our application to Azure.