deploy React App in Azure Blob Storage $web container

on

 

Photo by Phil Kallahar on Pexels.com
Photo by Phil Kallahar on Pexels.com

In this blog, we show how to deploy React application to a Azure Blob Storage web container. Static websites on Azure Blob Storage is available in December 2018 [Announcement].

Liquid Guage
Liquid Guage


I have created a simple React Application with Liquid Gauge at GitHub. You can clone it and copy the content to a Azure Dev Git Repo.

Setup

1. Create Blob Storage Account

Create a Azure Blob Storage account under a Resource Group. After it is created, go to the Static website profile page and enable it. Set the Index document name to index.html.

Static Website Profile
Static Website Profile

Once this is done, you can see that a $web blob container is created for us.


2. Create a Project and Git Repo in Azure Dev Ops

Point your browser to https://dev.azure.com/<account-name>, and create a new Project. And a Git Repo will be created automatically. Do the followings

  1. git clone GitHub
  2. git clone the new Git Repo that you have created
  3. copy will the content in #1 to new Git Repo, except for .git folder.
  4. edit azure-pipeline.yml. Set the values for azureSubscription and storage.
  5. git commit and push to new Git Repo.
  6. go back to the browser and create a new Pipeline in the Project.
  7. Select Azure Repos Git and the azure-pipeline.yml will be picked up automatically.
  8. Run the pipeline. For the first time, you need to go into the job to authorized access to the storage account. Follow the instruction accordingly.
Create New Pipeline
Create New Pipeline

Authorizing access to blob storage
Authorizing access to blob storage


Accessing the web Application

Point your browser to the Primary endpoint of the Blob Storage (see the first diagram). And you should see that React application.

Summary

It is easy to develop application with React (which is not covered in this blog) if you are familiar with it. And, Typescript is commonly used for enterprise application. In my GitHub, we have Typescript and also demonstrated how to include a third-party library, react-liquid-gauge. Among other things, the React ecosystem is good as we get a lot of ready-to-use components. Once the React application is up, this blog shows how to deploy it in Azure Blob Storage.



Comments

Post a Comment