Deploy Create React App to Azure App Services

Table of Contents

Create React App

  1. Open Terminal
  2. Copy and paste cd ~/Desktop
  3. Copy and paste all 3 lines
npx create-react-app my-app
cd my-app
npm start

Create a new React app

  1. localhost:3000 will open automatically localhost:3000 with React app

Create Azure App Service

  1. Login to https://portal.azure.com Azure Portal Home
  2. Click App Services Azure App Services
  3. Click Create app service Create Azure Service Web App
  4. Select any resource group (create one if you don’t have any)
  5. Add your app name (this is the site’s public url)
  6. Select Node 12 LTS on Linux using any region
  7. Select any size (keep in mind more space costs more) Azure Services Web App Before Creation
  8. Click Review + create Azure Services Web App Review Page
  9. Click Create Azure Services Deployment Complete
  10. Click Go to resource App Service Public Site URL
  11. Click Get publish profile to download a .PublishSettings file
  12. Verify your site is publicly available (you might need to wait a little) Public Website Before Deployment

Create Github Repo

  1. Login to Github and go to https://github.com/new
  2. Enter a name Create a new Github Repo
  3. Click Create repository Instructions to Push to Repo
  4. Copy the code under …or push an existing repository from the command line. In this example it’s
git remote add origin https://github.com/dmarcs/my-app.git
git branch -M master
git push -u origin master
  1. Open a new Terminal window
  2. Enter cd ~/Desktop/my-app
  3. Paste the code from Github Push React App to Github
  4. Go back to Github and refresh the page Create React App Code in Github

Deploy to App Service

  1. Click Settings and then Secrets Github Secrets
  2. Click New secret
  3. Enter AZURE_WEBAPP_PUBLISH_PROFILE as the name
  4. Paste the contents of the .PublishSettings file from Azure for the value (you already downloaded this in a previous step)

A quick way to copy the content is by entering this into Terminal (replace your app name with reactapptutorial)

pbcopy < ~/Downloads/reactapptutorial.PublishSettings

AZURE_WEBAPP_PUBLISH_PROFILE Secret

  1. Click Add secret Saved Secret
  2. Click Actions Azure Web App Github Action
  3. Click Set up this workflow under Deploy Node.js to Azure Web App Github Pipeline
  4. Change on release to on push
  5. Set AZURE_WEBAPP_NAME (to reactapptutorial in this example)
  6. Set AZURE_WEBAPP_PACKAGE_PATH to build
  7. Add a step right before Deploy to Azure WebApp
- name: add process.json
  run: |
    echo '{ script: "serve", env: { PM2_SERVE_SPA: "true", PM2_SERVE_HOMEPAGE: "/index.html" } }' >> build/process.json

This is needed because Azure App Services assumes you’re not going to run a SPA (single-page application).

Here’s the yaml file after changes

on: push

env:
  AZURE_WEBAPP_NAME: reactapptutorial # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: 'build'  # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: '10.x'                # set this to the node version to use

jobs:
  build-and-deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ env.NODE_VERSION }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ env.NODE_VERSION }}
    - name: npm install, build, and test
      run: |
        # Build and test the project, then
        # deploy to Azure Web App.
        npm install
        npm run build --if-present
        npm run test --if-present
    - name: add process.json
      run: |
        echo '{ script: "serve", env: { PM2_SERVE_SPA: "true", PM2_SERVE_HOMEPAGE: "/index.html" } }' >> build/process.json
    - name: 'Deploy to Azure WebApp'
      uses: azure/webapps-deploy@v2
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
  1. Press Start commit and Commit new file
  2. Go to Actions (wait until the pipeline finishes) Github Azure Workflow Complete
  3. Go back to your site (https://reactapptutorial.azurewebsites.net in this example) and refresh Create React App Deployed to Azure App Service Website
  4. Go back to Terminal and enter git pull

Now every time you push to this repo, the public website will be updated

Author - David Marcus