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 for Azure blob storage
Before we jump into our configurations, first and foremost of all we will need a Azure subscriptions, to begin with. In case you do not have a Azure account, then you will need to create a free account.
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,
You can update the content in app.js to anything that you prefer.
Configuring a static website hosting in Azure Blob Storage
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
- Open up the Azure portal in your web browser.
- Search for your storage account created and display the account overview.
- Next, select the Static website to view the configuration page for static websites.
- Now we need to click on Enabled to enable static website hosting for the storage account.
- In the Index document name field, specify a default index page of index.html.
- In the Error document path field, specify a default error page of 404.html.
- Finally click save, and now you can find your static website end point under primary end point field.
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
- Open visual studio code
- 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.
- Click on the azure icon on the right hand side on vs code.
- Expand the pay as you go option.
- Click on the blob storage account name that you created.
- Next expand the blob container and under that the $web folder.
- On the $web folder right click and you will find an option called deploy to static site. Click on that option.
- 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.
We are recognized as a Top Website Design Company on DesignRush