Let's carry out the following steps to deploy our frontend to a staging environment:
- We'll start by provisioning another Azure App Service. So, let's go to the Azure portal in a browser and go to the App Services area and click the Add option.
- Enter an app name and choose the existing resource group. Remember that the app name we choose needs to be reflected in the Frontend setting of the appsettings.Staging.json file in our backend project. Remember also that the runtime stack should be .NET Core 3.0 and Windows should be the operating system. Click the Review + Create button and then the Create button to create the app service.
- Let's move to Visual Studio Code now and create a staging build by running the following command in the Terminal:
> npm run build:staging
After the build has finished, the staging build will consist of all of the files in the build folder overwriting the production build.
- In the Azure App Service section in Visual Studio Code, we should see the frontend staging app service listed in the tree. Note that we might need to click the Refresh toolbar option for it to appear. Right-click on the frontend staging app service and choose the Deploy to Web App... option:
- We should select our build folder when prompted for the folder to deploy and then confirm the deployment when prompted.
- After a minute or so, we'll get confirmation that the deployment is complete. If we click on the Browse Website option, our staging frontend in Azure will show in a browser:
- Next, let's tell Auth0 about the Azure staging and production URLs it should trust. In Auth0, we need to update the following settings against our Q and A application:
- Allowed Callback URLs: This is shown in the following screenshot:
- Allowed Web Origins: This is shown in the following screenshot:
- Allowed Logout URLs: This is shown in the following screenshot:
We can find these settings by clicking on the Applications item in the left-hand navigation menu and then clicking on the Q and A application. We add the additional URLs for both the staging and production environments after the development environment URLs. The URLs for the different environments need to be separated by a comma.
- We should now be able to sign in to our production and staging Q and A apps successfully.
That completes the deployment of our frontend to both production and staging environments.