Create Azure Storage account

Now that you have a static website, let's deploy it to the cloud using Azure Storage. Azure Storage is simple file store/CDN with a built-in web server which makes it great for hosting static sites extremely fast.

In this section, we will setup our Azure Storage account and blob container.

  1. Login to Azure Portal

  2. Select Storage accounts from the left side menu bar.

    Note: If you don't see Storage accounts, select All services from the top of the menu, find it in the full list, and star it to dock it in your menu bar.

    Sign into Storage Explorer

  3. Click either + Add or Create Storage Accounts to create a new account.

    Create new storage account

  4. Fill in a Name for your storage account and the Resource group.

    Note the storage account name must be globally unique, so just add some random numbers to the end if the name you want is taken. Everything else can be left at the default value.

    When you're ready click Create and wait for the account to get created.

    Add name and resource group

  5. When account creation is complete, you will get a notification (the bell icon in the top menu bar).

    Click Go to resource.

  6. Click Blobs in the Services section

    Navigate to blobs

  7. Click the "+ Container", name your container, and set the access level to Blob.

    Create container

    If everything was creating successfully, you should see your container and storage account information in the Blob service blade. Keep this window open, you'll need this information later.

    Confirm container

Setting relative paths

By default create-react-app assumes that your app will live in the server's root directory, however our app will be in a container which adds an extra folder level to every path.

https://mystorageaccount12312.blob.core.windows.net/**my-container**

Luckily, there is an easy fix for this. Add the following to package.json with your own values in place of storage-account-name and container-name:

"homepage": "https://<storage-account-name>.blob.core.windows.net/<container-name>/"

This setting will make sure that all URLs generated during npm build contain the correct relative path that we need to serve the app. You can read more about relative paths in create-react-app on their GitHub README.


I created a storage container