Deploy Reactjs using Azure

What is Azure? 

Azure is a cloud computing platform created by Microsoft to deploy or publish applications & servers it's like AWS but in another style & options

How to deploy Reactjs using Azure?

Deploying Reactjs using Azure is an easy way but it might be hard a little bit at the beginning all you need to do is just following my lead 

Steps of deploying Reactjs with Azure

1. Create an Azure account & Choose the free trial
2. Create a new resource (Storage account)
3. Install Azure storage plugin to VSCode
4. Start deploying with one click only
5. Configure Azure storage with a static website (Frontend)

After creating a new account on Azure you will be redirected to the portal dashboard, and you have to start a new Resources group by clicking on “resources groups” then click + icon at the table heading and choose the name of the Resource & the data center location

Now go back to the portal dashboard then you should click on “Create a resource” at the top left of the service columns 

Then you will be redirected to the “create new resources” page, you will scroll down and click on the Storage account 

then scroll down to storage name, this is the only thing which you gonna fill (You don't need the other fields until you get to an advanced level you can take a look at them )

now click on Review + Create then click on create button again after reviewing the details (If you find the button is disabled hold on for few seconds until the validation process become completed)

Hold on until you see “Your deployment is complete” then click on Go to resources 

Now it's time to open VSCode and from Extensions search for “Azure Storage”, and install it 

Now open the project folder which you want to deploy, then click on the Azure icon on the left bar or Press on “Ctrl + Shift + A” then sign in  your Azure account from the extension like the screenshot below 

Then go back to the VSCode and check the storage tab in Azure 

Now it's the time of deployment, check the explorer tab (project files) and run 

npm run build

and when the process is completed and the built file become refreshed, right-click on "built" folder then choose “Deploy to static website via Azure storage” 

and choose the storage account name then accept the deployment and enable the web server on index.html and error page to index.html 

then you will get the notification of deployment complete successfully at the bottom right of the screen 

If you want to allow the web server config from the beginning you will need to visit the Static website settings from the storage resource overview like the screenshot below 

& the primary endpoint is the main URL of the website, and you can update it using the custom domain settings.

That's all for the article if you want any help or have any questions about the article let me know in the comments below and I will make sure to replay as soon as possible,
Good Luck