Reactjs Application Deployment In Azure storage Account

 1. Create an Azure storage account

2. From Settings of created storage account, select 'configuration', a) select 'Disabled' for 'Secure transfer required' -> this enables http. b) select 'Enabled' for 'Allow Blob anonymous access'

3. Save the changes

4. Under 'Data Storage', click on Containers, create a container with access level as Blob(anonymous read access for blobs only)

5. Using Upload under container, upload a file called index.hmtl which I have attached/shared.

6. create a 'Front Door and CDN' and do this, search for 'Front Door and CDN profiles', and click +Create button, select Exlore other offerings and Azure CDN Standard from Microsoft (classic). Provide resource group name and cdn profile name (ex: cdn-profile)

7. Next, create an Endpoint. To do this, click on cdn-profile you created and click on +Endpoint, provide Endpoint name (Ex: myreactapp), and choose Storage under Origin type. Select Origin hostname from dropdown (ex: mystorageaccount.blob.core.windows.net)

8. Now, select the Endpoint you created and click on 'Rule Engine' that appears in Settings

9. choose Add rules button under EndPoint. Now give a name to rules and Click on Add Condition and select 'URL File Extension', choose Operator 'less than' and Extension as 1 and case transform as No transform. Then click on the “Add action” button and select “URL rewrite” action. 

10. Click on Save button.

11. Now select container that you created under storage account and click Upload button and upload index.html OR your reacjs app after running npm build

12. Now you click on Endpoint created and click Endpoint hostname (ex: https://reactjsapp.azureedge.net) to open the hosted/deployed app in browser.