How to properly deploy ReactJS app as Azure web app

Question

I'm trying to deploy a ReactJS app created with create-react-app as an Azure web app and have run into a startup issue.

The create-react-app deployment page (https://create-react-app.dev/docs/deployment/) has a section that addresses Azure web apps which simply points to this medium blog (https://medium.com/@strid/host-create-react-app-on-azure-986bc40d5bf2#.pycfnafbg). This blog article is very helpful and might have worked at one point, but no longer.

The approach in the blog is to run the build in the repository directory of the web app and then move the contents of the build folder to wwwroot. The problem is that the build folder cannot be run by simply loading index.html. It must be started by

serve -s build

The way I have addressed this problem is to (1) add "serve" as a dependency in package.json and (2) added a startup command in the Azure web app:

node ../repository/node_modules/serve/bin/serve.js -s .

It works, but seems like a real kluge. What is the right way to do this? For completeness, here is my deploy.sh...

#!/bin/bash

# ----------------------
# KUDU Deployment Script
# Version: 1.0.17
# ----------------------

# Helpers
# -------

exitWithMessageOnError () {
  if [ ! $? -eq 0 ]; then
    echo "An error has occurred during web site deployment."
    echo $1
    exit 1
  fi
}

# Prerequisites
# -------------

# Verify node.js installed
hash node 2>/dev/null
exitWithMessageOnError "Missing node.js executable, please install node.js, if already installed make sure it can be reached from current environment."

# Setup
# -----

SCRIPT_DIR="${BASH_SOURCE[0]%\\*}"
SCRIPT_DIR="${SCRIPT_DIR%/*}"
ARTIFACTS=$SCRIPT_DIR/../artifacts
KUDU_SYNC_CMD=${KUDU_SYNC_CMD//\"}

if [[ ! -n "$DEPLOYMENT_SOURCE" ]]; then
  DEPLOYMENT_SOURCE=$SCRIPT_DIR
fi

if [[ ! -n "$NEXT_MANIFEST_PATH" ]]; then
  NEXT_MANIFEST_PATH=$ARTIFACTS/manifest

  if [[ ! -n "$PREVIOUS_MANIFEST_PATH" ]]; then
    PREVIOUS_MANIFEST_PATH=$NEXT_MANIFEST_PATH
  fi
fi

if [[ ! -n "$DEPLOYMENT_TARGET" ]]; then
  DEPLOYMENT_TARGET=$ARTIFACTS/wwwroot
else
  KUDU_SERVICE=true
fi

if [[ ! -n "$KUDU_SYNC_CMD" ]]; then
  # Install kudu sync
  echo Installing Kudu Sync
  npm install kudusync -g --silent
  exitWithMessageOnError "npm failed"

  if [[ ! -n "$KUDU_SERVICE" ]]; then
    # In case we are running locally this is the correct location of kuduSync
    KUDU_SYNC_CMD=kuduSync
  else
    # In case we are running on kudu service this is the correct location of kuduSync
    KUDU_SYNC_CMD=$APPDATA/npm/node_modules/kuduSync/bin/kuduSync
  fi
fi

# Node Helpers
# ------------

selectNodeVersion () {
  if [[ -n "$KUDU_SELECT_NODE_VERSION_CMD" ]]; then
    SELECT_NODE_VERSION="$KUDU_SELECT_NODE_VERSION_CMD \"$DEPLOYMENT_SOURCE\" \"$DEPLOYMENT_TARGET\" \"$DEPLOYMENT_TEMP\""
    eval $SELECT_NODE_VERSION
    exitWithMessageOnError "select node version failed"

    if [[ -e "$DEPLOYMENT_TEMP/__nodeVersion.tmp" ]]; then
      NODE_EXE=`cat "$DEPLOYMENT_TEMP/__nodeVersion.tmp"`
      exitWithMessageOnError "getting node version failed"
    fi

    if [[ -e "$DEPLOYMENT_TEMP/__npmVersion.tmp" ]]; then
      NPM_JS_PATH=`cat "$DEPLOYMENT_TEMP/__npmVersion.tmp"`
      exitWithMessageOnError "getting npm version failed"
    fi

    if [[ ! -n "$NODE_EXE" ]]; then
      NODE_EXE=node
    fi

    NPM_CMD="\"$NODE_EXE\" \"$NPM_JS_PATH\""
  else
    NPM_CMD=npm
    NODE_EXE=node
  fi
}

##################################################################################################################################
# Deployment
# ----------

echo Handling node.js deployment.


# 2. Select node version
# selectNodeVersion
NPM_CMD=npm
NODE_EXE=node

# 3. Install npm packages
if [ -e "$DEPLOYMENT_SOURCE/package.json" ]; then
  cd "$DEPLOYMENT_SOURCE"
  echo "Running $NPM_CMD install --production"
  eval $NPM_CMD install --production
  exitWithMessageOnError "npm failed"
  cd - > /dev/null
fi

# 1. KuduSync
if [[ "$IN_PLACE_DEPLOYMENT" -ne "1" ]]; then
  "$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.sh"
  exitWithMessageOnError "Kudu Sync failed"
fi

##################################################################################################################################
echo "Finished successfully."

IIRC there is a way to serve static websites with Azure, like Amazon S3 does: learn.microsoft.com/en-us/azure/storage/blobs/… You only have to specific that index.html is also served as an error page (for client-side routing etc.). With this approach you don't run your own webserver, you would only need to move the build artifacts to the right place. Projects with bigger scale would probably use Docker containers, K8s and nginx inside the container to serve the app. — timotgl
– timotgl, Commented Jan 19, 2020 at 15:19
The best way to do this nowadays is to deploy to an Azure Static Web App, which has React support built in. learn.microsoft.com/azure/static-web-apps/… — MarkXA
– MarkXA, Commented Nov 30, 2020 at 14:57

opticyclic · Accepted Answer · 2020-11-30 13:58:00Z

2

A slightly less kludge is to go to App Service - Configuration in the portal and set the Startup Command on the General Settings tab to:

npx serve -l 8080 build

This way you don't need to add serve as a dependency nor have a long path to start it.

answered Nov 30, 2020 at 13:58

opticyclic

8,22219 gold badges100 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to properly deploy ReactJS app as Azure web app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related