Static deployment of React-Redux-Router-based Web App to MS Azure

Some time building web app seems to easy then deploying the app :D. In this guide, I will explain to you how to do the static deployment of the router-based React-Redux web App to Azure and the common challenges we face during the deployment. This guide I have created according to my experience during deployment of the app and challenge faced.

Here Static means that we aren’t deploying any server code we will deploy just the front end files. Azure will do all of the web work for us. There are different ways to deploy the app in Azure like AzureRepo, Github, Bitbucket, Local git and FTP (Manually). We will be going to use the FTP — FileZilla for the deployment of the App.

Building React app for production :

Check first if your app is running perfectly at the local host and all feature is working as expected. Make a build by cmd mention below,

YARN: yarn build

NPM: npm run build

It will generate a build in the root folder with the folder name as “build”. The folder structure will look like mention below,

Create App Services on Microsoft Azure:

Now, it’s time to host your app on MS azure. We will be going to use an App service feature of Azure. Let’s go to azure portal and search for “App Service”. Click on Add and you come to the page look like mention below,

Here, I am assuming that you have already created Subscription and Resource groups. If not you can create here also. Now let’s go and select the existing Subscription and resource group name. Give a name to your app, select code, stack as a “Node LTS”, OS as “Linux” and your region. Finally, review and create. You will get all this detail of Hostname, Subscription ID and your Website URL.

Now, let’s go to Deployment center from your web project, you will see a screen like mention below,

Click on FTP and you will get dashboard copy UserName/Password and FTP EndPoint.

Deploy the app to Azure:

Open FileZilla file transfer tool. Enter the hostname (FTPS endpoint) and username that we copied from Azure Portal. Enter the password and click on “Quickconnect” as shown in the below image. Go to site/wwwroot folder and you can see it will be blank just upload your local files from the build folder to the wwwroot folder. It should look like this as mention below,

Note: The host URL should not contain FTP. It should look like this “waws-prod-*************.net”

Now try to run your website URL (https://yourappname.azurewebsites.net). If your app runs successfully then you are lucky else real headache started here.

Please follow the below step, I dig out after some research.

Step 1: Configuring Azure to reconcile client and server-side routing by web.config. Add a web.config file to wwwroot folder with the below content.

<?xml version=”1.0" encoding=”utf-8"?>

<configuration>

<system.webServer>

<rewrite>

<rules>

<rule name=”React Routes” stopProcessing=”true”>

<match url=”.*” />

<conditions logicalGrouping=”MatchAll”>

<add input=”{REQUEST_FILENAME}” matchType=”IsFile” negate=”true” />

<add input=”{REQUEST_FILENAME}” matchType=”IsDirectory” negate=”true” />

<add input=”{REQUEST_URI}” pattern=”^/(api)” negate=”true” />

</conditions>

<action type=”Rewrite” url=”/” />

</rule>

</rules>

</rewrite>

</system.webServer>

</configuration>

Note: It should be in proper XML format in the file.

Step 2: Add index.js file to the wwwroot folder with below content,

var express = require(‘express’);

var server = express();

var options = {

index: ‘index.html’

};

server.use(‘/’, express.static(‘/home/site/wwwroot’, options));

server.listen(process.env.PORT);

your folder should look like mention below,

Step 3: Now go to your azure web app -> SSH. It should look like mention below,

Open the SSH and go to site/wwwroot folder and run cmd “npm install — save express”

Here, we go now run your website again and you can see your website is running successfully. Enjoy :D.

Further, If you are using a react-redux-router based app you might get a page refresh issue for “URL not found”.

Please follow the below step, I dig out after so much effort.

Step 1: Register Service worker in react app. Go to your index.js of the app and register your service worker.

Step 2: Remove Cache or Try with Incognito in Chrome

NOTE: Please Don’t forgot to like and follow me if it helps you.

If you have any suggestions and question you’re free to ask and suggest.

Have a great day guys :D.