In this tutorial, we will be looking into how we can use Azure blob storage to deploy a react-app. At the end of the tutorial, you will be able to host a static site developed on react, that can be accessed publicly.

You will be learning how to,

  • Configure static website hosting in Azure
  • Deploy a react.js web application

Prerequisites

Before we jump into our configurations, first and foremost of all we will need a Azure subscriptions to beign with. Incase you do not have a Azure account, then you will need to create a free account.

Next we will need to create an Azure storage account. You create an Azure storage account using the Azure portal,Azure PowerShell, or Azure CLI. If you need to know how to create a storage account, go to create storage account for more details.

We will be using visual studio code as part of the development IDE throughout this tutorial. In case you do not have visual studio code, you can find it here and install it.

React app creation

Next we will be creating the react website. For more on creating a react website refer to the following,

https://facebook.github.io/create-react-app/docs/getting-started

You can update the content in app.js to anything that you prefer.

Configuring a static website hosting

The next step will be to sign-in to the Azure portal to get the configurations in place.

Now we will be looking into the configuration settings in Azure storage to deploy our react website.Azure Storage automatically creates a container named $web, when we configure our account for static website hosting. The $web will contain all our react files that need to be hosted.

  1. Open up the Azure portal in your web browser.
  2. Search for your storage account created and display the account overview.
  3. Next, select the Static website to view the configuration page for static websites.
  4. Now we need to click on Enabled to enable static website hosting for the storage account.
  5. In the Index document name field, specify a default index page of index.html.
  6. In the Error document path field, specify a default error page of 404.html.
  7. Finally click save, and now you can find your static website end point under primary end point field.

Extension installation

Once visual studio code is up and ready, next would be to install the Azure Storage preview extension that is available for visual studio code.This extension will be helpful in Azure storage management functionality and also to deploy the react website to Azure storage. The extension can be install in the following way,

  1. Open visual studio code
  2. On the toolbar, click Extensions. Search for Azure Storage, and select the Azure Storage extension from the list. Then click the Install button to install the extension.

Deployment of application

On the right hand side of VS code, you should be able to find an azure icon.

  1. Click on the azure icon on the right hand side on vs code.
  2. Expand the pay as you go option.
  3. Click on the blob storage account name that you created.
  4. Next expand the blob container and under that the $web folder.
  5. On the $web folder right click and you will find an option called deploy to static site. Click on that option.
  6. Select your react- app folder and go into the build folder to find the build files. Build files can only be hosted.Now upload the folder inside the build folder.

Now you should be able to access your static react site using the end point given in azure portal when the blob storage was created.

Furthermore, watch the below tutorial on more explanation on hosting a ReactJs website on Azure blob storage.