deploy React App in Azure Blob Storage $web container

 

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

Popular posts from this blog

OpenAI: Functions Feature in 2023-07-01-preview API version

Image
  Image from https://www.pexels.com/@pavel-danilyuk/ One of the cool features of OpenAI version 2023-07-01 is its custom Functions feature. This feature is close to me because I am working on a project where we require OpenAI to generate JSON responses. We always want the generated JSON to be consistent, otherwise, we need to do some post-processing tasks to get the JSON object in the correct schema. In the blog, we observe the completion with and without this new feature. Development Setup python -m venv .venv poetry init poetry shell poetry add openai poetry add python-dotenv poetry add pydantic I am using Python version 3.11 Create .env file OPENAI_API_TYPE="azure" OPENAI_API_BASE="<OpenAI endpoint>" OPENAI_API_KEY="<OpenAI secret>" OPENAI_API_VERSION="2023-07-01-preview" OPENAI_DEPLOYMENT_ID="<deployment identifier>" Without OpenAI functions feature We use two sample texts for experimentation. We want to get the na
Read more

Storing embedding in Azure Database for PostgreSQL

Image
  Image from https://www.pexels.com/@tara-winstead/ There are many options to store text embeddings. In this blog, we shall look at storing embedding in Azure Database for PostgreSQL. Installing Azure Database for PostgreSQL Install Azure Database for PostgreSQL Flexible Server.  Once it is deployed, enable two extensions. Install Python modules python -m venv .venv poetry init poetry shell poetry add openai[datalib] poetry add python-dotenv poetry add psycopg2-binary My Python version is 3.10. Create .env OPENAI_API_TYPE="azure" OPENAI_API_BASE="<HTTP endpoint to Azure OpenAI Service>" OPENAI_API_KEY="<secret to Azure OpenAI Service>" OPENAI_API_VERSION="2023-05-15" TEXT_MODEL="<deployment id of text embedding model>" PGHOST="<my-service>.postgres.database.azure.com" PGUSER="<user name>" PGPASSWORD="<secret>" PGPORT="5432" PGDATABASE="< database name
Read more

Happy New Year, 2024 from DALL-E

Image
generated by DALL-E Wishing everyone a happy new year. Year 2023 is great for me because I learned much about OpenAI. I am involved in a live deployment with it, and involved in a handful of interesting user scenarios around it. On top of this, a copilot hackathon. The image above is generated by DALL-E and following is the code. 1. Dependencies python = "^3.10" pydantic-settings = "^2.1.0" openai = "^1.3.8" 2. Environment Parameters OPENAI_AZURE_ENDPOINT="<your azure openai endpoint>" AZURE_OPENAI_API_KEY="<your azure openai secret>" OPENAI_API_VERSION="2023-12-01-preview" OPENAI_DALLE_MODEL="dalle" Note: OPENAI_API_VERSION has to be 2023-12-01-preview otherwise you will get an exception openai.NotFoundError: Error code: 404 - {'error': {'code': '404', 'message': 'Resource not found'}} dalle  is the name of my dall-e-3 deployment model. You need to change it to
Read more