DEV Community

loading...
Cover image for React Azure Deployment

React Azure Deployment

jwp profile image John Peters ・2 min read

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.

Alt Text

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

You should see this:

Alt Text

  • Click on create new and make the prefix RG for Resource Group.
RGReact
Enter fullscreen mode Exit fullscreen mode

Then fill in the remaining fields like this:

Alt Text

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:

Alt Text

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:

Alt Text

  • 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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

Alt Text

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

Alt Text

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.

Discussion (0)

Forem Open with the Forem app