Okay, now that we've got our web app and our database set up at least on Azure.
Now we need to take a look at configuring them because our app needs to know where to find this database.
We have just created.
And also we need to give it access to be able to connect to this database as well.
As well as setting up any environment variables we want to make available to our application.
So we'll start with a connection string because we're here and we've got a link here to show the database
connection strings.
And we need to use this connection string.
Now it's almost complete.
But we just need to replace your password with the actual password.
So I'm just going to copy this into my clipboard.
We'll go to.
And here's where we need to navigate around Azure.
We need to go to our web app to its settings next.
So inside our resource group.
And it's easier just to go to the resource group typically because then we can find our web app inside
here, which is the app service.
So I'll click on Restore Course in my case.
And then we can go to the settings and the environment variables.
And we have a connection string setting here.
And we can add a connection string.
And we're going to call it default connection which needs to match what we've used inside our app settings.
And then we need to give it a value.
And we just need to replace your password with the actual password.
Everything else will stay the same inside here.
So I used a very simple password for mine.
And this database won't survive long.
But even then it's not possible to access this directly because of the firewall settings inside here,
which we'll take a look at soon.
And we've got a setting here for the type SQL server or SQL Azure I'll go for SQL Azure.
I think that would be correct.
And we don't use the deployment slot setting.
And we'll click apply.
And then we'll click apply again.
And we can confirm.
So that's going to update our connection string I'm hesitating about the type here because why would
they have SQL Azure and SQL server as the type.
Something to ponder and we'll see if it works anyway.
And that will be one thing that maybe we'll take a look at and say, maybe we should change this to
SQL server.
But anyway, let's cancel this and we'll come back and deal with that if we need to.
We're also going to deal with our app settings here as well, and we're going to specify what we have
from our app settings development Jason.
And we're going to add those settings inside here.
So if we go back and let's take a look at what we have inside our app settings.
And we'll go to App Settings Development Jason.
And we need these values applied to Azure effectively just our stripe settings.
So you may find it easier to just use copy and paste to supply these, because typos are a real pain
at this point in the course.
Because Azure can be tricky to troubleshoot because it's a production platform, it's not our development
settings that we're dealing with anymore.
So I'm going to use the copy paste technique to go back and add each of the environment variables that
we need.
So I'm going to click on add and the name is going to be Stripe settings.
And then instead of a colon here we use underscore.
Underscore has to be that double underscore for the name.
And for the next part of this we will need the publishable key.
And I'll paste that in here.
And then we can get the value.
And it's just a case of copying this value and pasting it inside.
We're not going to worry about creating a production stripe key.
We'll just use the same one we used in development.
And I'll click apply.
And then I'm going to add another environment variable.
I'll go back and do the same I did last time.
Stripe settings and stripe settings.
Double underscore and go and grab the other or the next variable we need, which is the secret key.
And then I'll just grab its value into my clipboard without the quotes and paste it into the value and
click apply on that one.
I'll click add again and go back, get the stripe settings, paste in there, double underscore, and
the next one is going to be our w h secret and paste that there.
But instead of using what we have from our app settings, we'll go to stripe and we'll get the actual
webhook secret for our application.
So let's go to stripe.
We'll need this URL.
So keep this one handy because we need to let stripe know where to find our web application.
And in a separate tab I'll go to Stripe.com.
And we'll go to our dashboard.
And then we'll go to the developers tab, we'll go to webhooks and we'll add a webhook endpoint.
And we'll paste in the endpoint URL.
And we'll get this from well I'll just copy it from here and paste it in here.
Then it needs to be forward slash API forward slash payments forward slash webhook so that stripe can
find this.
And then we select the events we wish to listen to.
So we'll select events.
And we need to go down to the payment intent.
And we want to listen for the payments intent payment failed and the payment intent succeeded.
And we'll add these two events.
And then we can add this endpoint.
And what this gives us is the signing secret.
So I can reveal this copy this into my clipboard and I can go back to the environment.
Add application setting and paste this inside there and click apply.
So those are the three values that we need inside here.
So I'm going to click apply again.
And then I'm going to confirm this.
And that's the keys that we need inside there.
We don't need to worry about the react stuff because we need to build our react application.
And at that point those values get applied.
We don't need to add our client side environment configuration inside here.
We've got another thing to look at though, because at the moment our web application will not have
access to our database server.
So I'm going to go back to the resource group.
And I'm going to go to the SQL server in this case.
And we need to take a look at the networking settings from here.
And we need to select the selected networks inside the public access and for our firewall rules, we
need to check the box that allows Azure services and resources to access this server.
And if we did want our own client address to be able to access SQL Server on Azure directly, then we
would need to also enable this.
Although this looks like a IPv6 address, so it looks like the Azure portal, at least in my case,
isn't doing what it used to do, which was give us the IPv4 address.
That's an IPv6 address and it doesn't like that.
But I'm not going to do that.
I'm not going to demonstrate connecting to SQL Server on Azure from here.
I'm just going to allow other Azure services and resources to access this server.
And I'll click Save Us.
And great.
Now our web app will be able to access this server.
So that's the configuration side of things done.
And next we'll take a look at actually deploying our application to Azure.