Deploy React App on Azure App Service using windows service plan.

Deploying React app on Azure App services took me a while before figuring out how the App is deployed.

Workflow

So, let's get straight to the point, First thing is to generate kudu script for deployment.

Kudu script allows the user to specify how to deploy the app or the procedures on deploying an app such as to run test cases or to build.

Generate Kudu Script using the following steps,

npm install -g kuduscript

switch to your project directory, generate the script.

kuduscript -y --node

There will be two files generated, check for the file deploy.cmd, Find the part, where deployment is written which looks something like this,

:Deployment
echo Handling node.js deployment.
:: 1. KuduSync
IF /I "%IN_PLACE_DEPLOYMENT%" NEQ "1" (
call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_SOURCE%" -t "%DEPLOYMENT_TARGET%" -n "%NEXT_MANIFEST_PATH%" -p "%PREVIOUS_MANIFEST_PATH%" -i ".git;.hg;.deployment;deploy.cmd"
IF !ERRORLEVEL! NEQ 0 goto error
)
:: 2. Select node version
call :SelectNodeVersion
:: 3. Install npm packages
IF EXIST "%DEPLOYMENT_TARGET%\package.json" (
pushd "%DEPLOYMENT_TARGET%"
call :ExecuteCmd !NPM_CMD! install --production
IF !ERRORLEVEL! NEQ 0 goto error
popd
)

That is where we have to do our work, the rest of the script can be ignored. Replace the above-mentioned code with the following code.

:Deployment
echo Handling node.js deployment, running on .cmd .
:: 1. Select node version
echo Selecting NodeVersion
call :SelectNodeVersion
:: 2. Install npm packages
echo Installing NPM Packages
IF EXIST "%DEPLOYMENT_SOURCE%\package.json" (
pushd "%DEPLOYMENT_SOURCE%"
call :ExecuteCmd !NPM_CMD! install
echo Installing NPM Packages Complete
IF !ERRORLEVEL! NEQ 0 goto error
popd
)
:: 3. Build React App
echo Building React App
IF EXIST "%DEPLOYMENT_SOURCE%\node_modules" (
pushd "%DEPLOYMENT_SOURCE%"
call :ExecuteCmd !NPM_CMD! run build
echo Building React App Completed
IF !ERRORLEVEL! NEQ 0 goto error
popd
)
:: 4. KuduSync
echo Running KuduSync
IF /I "%IN_PLACE_DEPLOYMENT%" NEQ "1" (
call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_SOURCE%\build" -t "%DEPLOYMENT_TARGET%" -n "%NEXT_MANIFEST_PATH%" -p "%PREVIOUS_MANIFEST_PATH%" -i ".git;.hg;.deployment;deploy.cmd"
IF !ERRORLEVEL! NEQ 0 goto error
:: Web.config for client side routing
IF EXIST "%DEPLOYMENT_SOURCE%\web.config" (
copy "%DEPLOYMENT_SOURCE%\web.config" "%DEPLOYMENT_TARGET%"
echo Web.config Copied
)
)

Deployment script is complete.

Next is to Specify WEBSITE_NODE_DEFAULT_VERSION and WEBSITE_NPM_DEFAULT_VERSION to required version of nodejs in Azure→web app→Application Settings.

(versions of nodejs available in azure can be found on https://(your-azure-website-name.scm.azurewebsites.net → Runtime versions)

(Optional, if client-side routing is used in react app) we need to have a web.config file for the server to serve static react app so that client-side routing works.

create a new file named web.config and add the following lines.

<?xml version="1.0"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <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>

Now the app is ready to be deployed in Azure web app service.

(this method only works for windows based web app service).

get going using Deployment Center on Azure Web App.