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

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

Bing Search as tool for OpenAI

Image
  Image from https://www.pexels.com/@skitterphoto/ Many times, we need to search for information in the web when we are working with OpenAI. One of the reasons is that the dataset for training for OpenAI is never up to date. For instance, the OpenAI GPT-4 Turbo has knowledge of events up to April 2023. Here is the Python implementation with Pydantic model. Dependencies python = "^3.10" pydantic-settings = "^2.1.0" pydantic = "^2.5.2" azure-cognitiveservices-search-websearch = "^2.0.0" Environment These are the environment parameters needed. Have the following in a .env file. azure_bing_search_endpoint="https://api.bing.microsoft.com" azure_bing_search_key="<key>" We look under "Keys and Endpoint" for these values. Pydantic Setting Model from pydantic_settings import BaseSettings class BingSearchSettings(BaseSettings): azure_bing_search_endpoint: str azure_bing_search_key: str class Config:
Read more

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