React on Azure App Service

Summary

In this article, I want to share the experiments of React app deployed on Azure App Service. The two patterns work correctly, 1) Root folder with node_modules, 2) Build folder with Startup commands. The startup command should be carefully chosen depending on your zip folder structure that is deployed to Azure App Service.

Code samples

• azuredeploy.json
• react-pipeline.yml
• frontend

React on App Service deployment experiments

TOC

• Successful configuration
• Experiments
  • Responses
  • Run from files or ZIP package
  • Deployed folder inside App Service
  • Results: Root folder
  • Results: Build folder

Successful configuration

The contents below show how you configure React and Azure App Service to make it work correctly.

Uploaded folder

root is React root folder. build is generated with npm run build for React app.

root

.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
└── tsconfig.json

root + node_modules

.
├── node_modules
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
└── tsconfig.json

build

upload.zip
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
    ├── css
    │   ├── main.073c9b0a.css
    │   └── main.073c9b0a.css.map
    ├── js
    │   ├── 787.9750ae9a.chunk.js
    │   ├── 787.9750ae9a.chunk.js.map
    │   ├── main.e0162b9f.js
    │   ├── main.e0162b9f.js.LICENSE.txt
    │   └── main.e0162b9f.js.map
    └── media
        └── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg

Startup command and WEBSITE_RUN_FROM_PACKAGE

You can see the sample ARM template sample, whici sets up startup command npm install -g serve && serve -s . and appsettings "WEBSITE_RUN_FROM_PACKAGE":"1". The reason behind this is discussed later in this article.

{
  "type": "Microsoft.Web/sites",
  "kind": "app",
  "properties": {
    "siteConfig": {
      "linuxFxVersion": "NODE|16-lts",
      "appCommandLine": "npm install -g serve && serve -s ."
    }
  }
},
{
  "type": "Microsoft.Web/sites/config",
  "properties": {
    "WEBSITE_RUN_FROM_PACKAGE":"1"
  }
}

Experiments

In this chapter, I am trying describe what trials I did and what were those results.

Responses

Application Error

Hey, Node developers! (hostingstart.html)

404

Success

Run from files or ZIP package

When you set appsettings WEBSITE_RUN_FROM_PACKAGE=1, the uploaded zip file and packagename.txt are generated. When you update the deployment source, zip files are added but packagename.txt is updated so it points to the newest zip file.

home
└── Data
    └── SitePackages
        ├── 20220110085830.zip
        ├── 20220110094211.zip
        ├── 20220110100120.zip
        ├── 20220110100833.zip
        └── packagename.txt

packagename.txt

20220110100833.zip

Deployed folder inside App Service

Red mark means newly added after deployment. Deployment is done through Azure CLI.

Azure CLI Powershell command example

az webapp config appsettings set --resource-group {Resource Group name} --name {App Service name} --settings WEBSITE_RUN_FROM_PACKAGE="1"
az webapp deployment source config-zip --resource-group {Resource Group name} --name {App Service name} --src .\upload.zip

WEBSITE_RUN_FROM_PACKAGE=0

WEBSITE_RUN_FROM_PACKAGE=1

Experiments: Root folder

I expected Root folder without node_module works when setting up npm install as Azure App Service Startup command. However, it did not work. I tried npm install and npm install && npm start but neither worked. The only way is to deploy together with node_modules folder. Usually node_modules folder is large and you do not want to upload it as deployment. So, deploying Root folder is not an actual option as workflow.

Experiments: Build folder

In this experiment, I create upload.zip folder and deploy to Azure App Service by CLI command. upload.zip includes index.html directly under upload.zip level. So, serve -s . works correctly. serve -s build does not work like the official documentation. Also, from the stack over flow Default documents not serving on node web app hosted on Azure, pm2 serve /home/site/wwwroot --no-daemon --spa works too for Startup command.

When you do not set up any Startup command, it will show you "Hey, Node Developers!" page, because it points to /opt/startup/hostingstart.html.

opt
├── startup
│   └── hostingstart.html
home
└── site
    └── wwwroot
        └── hostingstart.html