React Azure Deployment

A continuation of the series...

Let's push our React application to a website. To a windows server running ASP.NET Core 3.1.

Note: Doing this the first time will take about 1 hour, subsequent deploys will take about 20 seconds, because everything is ready to go.

Azure is free up to $150 USD per month in charges. For a simple website, this means you will never have to pay to host it on Azure.

Disclaimer: This is not an ad for Azure. It's just a way to host your content on a website for free.

• Sign up for Azure

• You will have to enter a credit card number. Don't worry you won't be charged until you exceed $150/per month in charges. A small web site won't get near that amount.

• Once you are set up; sign into:
  https://portal.azure.com/

• Next click on App Service _{( Azure speak for website)} shown below.

• Then click on the "+Create" button, you may need to click twice.

You should see this:

• Click on create new and make the prefix RG for Resource Group.

RGReact

Then fill in the remaining fields like this:

Create the web site

• On the bottom there is a button "Review + Create", click it.

• Then confirm the site creation by clicking the "Create" button on bottom left once more.

You should see this:

NOTE: Our first attempt failed. So we just created another one using the same steps above but changed the web site name.

When the site creates you can "Browse" to it to see it. It should look like this:

• If you can't bring your website up, go back and try until you can see the image above.

Deployment

• In your VSC (Visual Studio Code) open your react application folder. Then run this command:

npm run build

Then in VSC go to file/openfolder and switch to the build folder just created.

• Note you must install Azure tools next, if you don't have them follow this:

Once they are installed click on the triangle highlighted in image below:

Then on the blue upload button.

You'll then be asked which folder to deploy which is this "Build" folder, and then to which Web Site, if you have more than one.

Once the deploy is finished your website is up and running!

Congratulations on creating your first React Web Site.

JWP2021 Create React Website.