Deploy ReactJS app to Azure Blob Storage through GitHub Actions using Terraform

Create a simple React app Choose a suitable working folder and then execute the following command in a terminal window to create a ReactJS app named react2az:

npx create-react-app react2az --use-npm cd react2az npm start The app will display in your default browser as shown below:

Run your application and you should experience the following web page:

Push ReactJS app to GitHub Note that your application already contains a .gitignore file. This means that the node_modules folder will be excluded for being pushed to GitHub.

Create a local git repo by running the following command in the root of your application:

git init git add . git commit -m "1st commit"

Using Terraform a resource group, a storage and a blob container will get created.

Click on "Go to resource". In the search field, enter the word static then click on "Static website".

Click on enabled

Click on your browser back button, clear the search field, then select "Access keys".

Click on "Show keys", copy the connection string, then temporarily paste it in a a text editor. GitHub Actions In GitHub, click on Settings:

Create a key named AZURE_STORAGE then paste the connection string that you previously saved in a text editor. Click on "Add secret".

Add all these secrets:

Run these commands:

az login

az ad sp create-for-rbac --name "sp-hello-azure-tf" --role Contributor --scopes /subscriptions/{subscriptionID} --sdk-auth

After this github actions will run:

Viewing our web application You must be dying to view the application hosted on Azure. Return to the Azure portal then go to "static websites". The URL for accessing your application is beside "Primary endpoint".

Visit the primary endpoint URL and you will see that your ReactJS app is happily hosted on Azure: