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

app creation output

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

running test app

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

build output 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

new resource

Search for Storage Account

new storage account

click Create

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

storage details

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

static website option

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

static website data

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.

static storage data

Now copy your build folder contents to the $web container

build output folder

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

hosted website