Deploying React App on Microsoft Azure

Step by step guide for a newbie

Recently I participated in a Hackathon, where we were asked to build the solution and host it in any of the cloud service provider.

Till that day I never hosted any of my application in Cloud,So I was searching for some documentation to host it on Microsoft Azure but most of them are not understandable for newbie like me as well as they were about two years outdated.

Some how, after several hours of search and with the help of my friend, I was able to host it successfully.Then I thought sharing the knowledge I gained from this will help many newbies since there were no resources that are specially catered for newbie like me(This is just my point of view don’t misunderstand me).

fig:1

Yeah…. Now lets get our hands dirty!!!

Basic step up

Here I assume that you have already developed your React App and only just want to host it on Microsoft Azure.Alright there may be some people want to experiment hosting React App on Microsoft Azure.So for the sake of them,they can do the following in the CLI(command line interface)

npx create-react-app my-app
cd my-app
npm start

fig:2

Then open http://localhost:3000/ to see your app.Then you will see something like this….

fig:3 ,basic template created by create-react-app tool

When you’re ready to deploy to production, Let’s build the project using the following command:

npm run build

This will create a new folder called build which contains everything that is needed to run the web application in production.

Deploying on Azure Website

First of all you need to have a account in Microsoft Azure, if don’t have one you can create it here.

1.Once you have created your account, and if you navigate it to your portal you can see a Dashboard something like this

fig:4

2.As mentioned in the above diagram first step is to “Create a resource”, so if you select this option this will direct you to page where you need to select the type of resource

fig:5

3.As mentioned in above figure 5, we should select the “Web App” option to host our Application.This selection will proceed you to a set up page like following

fig:6

4.As mentioned in the above fig:6,

4.1 we need to give any valid name for the application, then we need to select the subscription,Resource group(leave them as default).

4.2 But you need to explicitly select the “App Service plan/Location” as per to your need

4.3 And finally click the Create button to finalise the set up configuration,this will create you resource (may take 1–2 min to initialise).Once successfully created you will be notified with a message as follows

fig:7

5.Now if we direct to our newly created resource dashboard, we could see something as follows

fig:8

6.If we try to access the URL, where we want to host our application using the link as indicated in the above figure we could see something as follows

fig:9 , Since we haven’t put any files yet, it will display something like this

7.Now we need to select the way to transfer our application files to the Azure server.

For your information, there several ways to transfer those files, so here we are looking into the way using the “local git”…

In the high level it means we create a git repository in our azure resource and push all our files to it from our local git repository.

fig:10

8.As mentioned in the above fig:10,We need to navigate to Deployment >Deployment Center to transfer our build files

Here we select option called “local Git” as mentioned in the above figure and press continue.

9.This will delegate us to select the “Build provider”,

fig:11

As mentioned in the above fig:11,we select “App Service build service” as the build provider and confirm it by pressing the continue.

10.This will finally navigates us to Summary where we need to confirm in order to create the git repository in Azure resource.This selection is indicated in the following diagram

fig:12

11.Once we finish above setup it’ll create Git URI, but before proceeding further we need to setup the deployment credential for secure transfer to the Azure git repository.Following figure indicate this setup

fig:13

12.As mentioned in the Above diagram,now in the Deployment >Deployment Center page we could see a tab called “Deployment Credential”. We need to select it and configure the “User Credential” with your desired Username and Password.This is the Username and password we need when we push the file from local repository to the Azure git repository

13.Once we have configure the Deployment Credential, now if we proceed to “Overview” tab of our resource we could see something as follows

fig:14

14.As mentioned in the above diagram, if we have successfully configured all setup required. We would able to see the Git Deployment Username,URL etc.Copy the git URL of the azure git repository.

Pushing to Azure Website

1. Now navigate to the Project location in you local computer using the CLI.
2. We have already created the “Build” for our application(refer Basic step up part).change you current working directory to that newly created “build” folder using

cd build

3.Now we need to initialise and configure the local git repository withing build folder.

// 3.1 Initialise Local Git repository
> git init
// 3.2 Put all files in build to staging area
> git add .
// 3.3 Commit it to local repository
> git commit -m 'Initial set of files'

4. Now we need to configure the Azure remote git repository.(Make use of the git url we copied from the resource overview page)

// 4.1 Setting the remote git url
> git remote add azure <copied git url>
// 4.2 To verify the remote git configuration
> git remote -v

5. If the remote repository configuration is correct now we can push our files,for the first push we should use ‘-f’ flag in order to force push(only for the first push)

> git push azure master -f

6.Once all the files in build is pushed to remote repository, now if we direct to the Application hosted URL(which was empty when we access early , fig:9).

Now will be with our Application running successfully.In my case, following figure shows the application I hosted for the Hackathon.

fig:15

Hope you have also successfully accomplished the task.So until see you all in my next blog.Good bye!!!