Do you always need a full blown web server to host a React based website ?

In this post I’ll show you how easy it is to host a static ReactJS based website on Azure blob storage.

Create a ReactJS site locally

For ease of use we’ll utilise the CRA (Create React App) template from facebook. You can find more information about it Here.

It’s great because it’s easy to create a static site using npm build.

I find using the npm package easy to use. I installed it globally by using this command.

npm i create-react-app -g

Now we can go-ahead and create the application.

npx create-react-app test-app

You should see output similar to this

Now navigate to the created app folder

cd test-app

Use npm to start the application

npm start

The site will start and open a web browser. The site will look similar to this

Build a static production version

To deploy the site you need the production version of the site.

Run the following command in the root of the application

npm run build

this creates a static site under the /build folder

To test the build locally, in the root of the application, run the following command

serve -s build

Deploy to Azure Blob storage

Now we deploy the site

Navigate to your Azure portal and select Create a resource

Search for Storage Account

click Create

Add a name and resource group for your storage account and click create

Once the storage account is running, select the Static website option

Select the Enable option and add index.html as the Index document name

Click Save

Notice how azure has created a container called $web, This is where you’ll be copying your site to.

Also notice the url of your static site.

Now copy your build folder contents to the $web container

I’m using the excellent / free tool called Cloudberry Explorer for Azure Blob Storage to copy data to Azure. More details can be found Here

You should see the site running on the Url provided under the static website option