If you have a static website, blog or a react application, here is how you can host them for cheap with Azure Blob Storage. This article focuses on how you can configure Azure Blob Storage to host your static website or react application.
Starting with create-react-app
Creating a react application is simple with
create-react-app and then build the optimized output of the application by running
npm run build command. This will publish the optimized version of the react app in the
IMPORTANT: If you are using Next.JS or any other framework which require server-side rendering then hosting your application with Azure Blob Storage will not work as server-side rendering demands a web server to deliver the content to the client.
Creating and Configuring Azure Storage Account
Once the build is completed successfully, it is time to configure Azure Blob Storage to host the static website. Go to portal.azure.com and create a new resource by clicking
Create a resource and then search for
Select the resource offering which is provided by Microsoft. Click on
Create and follow the instructions to create a new
Blob Storage Account.
Basics tab, fill in the details like shown below.
I have created a new resource group and named it
staticweb. You can name it anything you want. The next is
Storage account name which you can set what you want but the name you choose here should be unique across Azure.
Region is the place where your resources/storage account will get created. You can select the region which is close to your geographic location for lower latencies. If your website, application or blog is very critical, then you can also opt for
Geo-zone-redundant-storage which is for critical business applications. As our use case is very simple and our application is not critical, we can select
Locally-redundant storage. For
Performance, you can select
Standard, but if you want lower latencies then you can select
Check pricing with Azure Pricing Calculator before you proceed with any service in Azure. This will give you an idea of how much money you have to spend with these settings over a period of a month.
Let’s keep all other settings as they are and click
Create to provision a new Storage Account.
After the storage account is created, under
Data management, select
Static websites are disabled by default. Click on
Enabled and you will see two fields are now visible asking for the index document name and error document path.
Depending on the landing, default or index page of your application, you can enter the name of the document here. In my case where I am hosting a react application, the index document name is
index.html and error document can be
404.html or something else. I don’t have an error document, so I am leaving it blank.
Save to save the setting. You will now have the URL of your static website along with the name of the container where the contents of your static app should be uploaded.
Notice the container name is
$web and the primary endpoint is https://myawesomewebsite.z13.web.core.windows.net/.
You can also navigate to this
$web container by clicking
Data storage section.
Upload static contents of web app
Uploading multiple files directly from the portal is a tedious task and takes a lot of time. I would recommend making use of an open-source tool called Azure Storage Explorer. Download this for your operating system and install it.
There are a few ways to connect to the storage account in Storage Explorer.
- Sign in with your Azure credentials and connect to all the storage accounts you have in your subscription.
- Use storage account connection string to connect to a specific storage account.
Attach a resource on the
Get Started page or right click
Storage Account and select
Connect to Azure storage…
You can also select
Blob container and then generate the
SAS token to connect to a container. I am connecting my storage account with storage account connection string. You can get the connection string from the Azure Portal.
Security + Networking, click
Access Keys and then click on
Show button for
Key1 > Connection string. Click
Copy to clipboard icon to copy the connection string.
Back in the Storage Explorer, click on
Connection string (Key or SAS).
Enter the connection information and click
Review the final details and click on
Connect to connect to the storage account.
After the connection is succeeded, you should see the list of all the containers in the storage account.
$web container and start uploading the files of your static web app.
Let’s check if our react application is running through static website blob storage url or not.
I built my react application by using the
npm run build command and these are the files which I am going to upload to the
Hooray!! Our react application is successfully hosted and served from Azure Blob Storage.