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 16 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, Secrets, and then Actions 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 Configure under Deploy Node.js to Azure Web App Github Pipeline
  4. Set AZURE_WEBAPP_NAME (to reactapptutorial in this example)
  5. Find the step named Upload artifact for deployment job and change path from . to build
  6. Here's the yaml file after the changes

Here’s the yaml file after changes

# This workflow will build and push a node.js application to an Azure Web App when a commit is pushed to your default branch.
#
# This workflow assumes you have already created the target Azure App Service web app.
# For instructions see https://docs.microsoft.com/en-us/azure/app-service/quickstart-nodejs?tabs=linux&pivots=development-environment-cli
#
# To configure this workflow:
#
# 1. Download the Publish Profile for your Azure Web App. You can download this file from the Overview page of your Web App in the Azure Portal.
#    For more information: https://docs.microsoft.com/en-us/azure/app-service/deploy-github-actions?tabs=applevel#generate-deployment-credentials
#
# 2. Create a secret in your repository named AZURE_WEBAPP_PUBLISH_PROFILE, paste the publish profile contents as the value of the secret.
#    For instructions on obtaining the publish profile see: https://docs.microsoft.com/azure/app-service/deploy-github-actions#configure-the-github-secret
#
# 3. Change the value for the AZURE_WEBAPP_NAME. Optionally, change the AZURE_WEBAPP_PACKAGE_PATH and NODE_VERSION environment variables below.
#
# For more information on GitHub Actions for Azure: https://github.com/Azure/Actions
# For more information on the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# For more samples to get started with GitHub Action workflows to deploy to Azure: https://github.com/Azure/actions-workflow-samples

on:
  push:
    branches:
      - "master"
  workflow_dispatch:

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

permissions:
  contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: ${{ env.NODE_VERSION }}
        cache: 'npm'

    - name: npm install, build, and test
      run: |
        npm install
        npm run build --if-present
        npm run test --if-present

    - name: Upload artifact for deployment job
      uses: actions/upload-artifact@v3
      with:
        name: node-app
        path: build

  deploy:
    permissions:
      contents: none
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Development'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
    - name: Download artifact from build job
      uses: actions/download-artifact@v3
      with:
        name: node-app

    - name: 'Deploy to Azure WebApp'
      id: deploy-to-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 Azure Portal, and click Configuration followed by General settings Azure Portal App Service Configuration
  4. Enter pm2 serve /home/site/wwwroot --no-daemon --spa under Startup Command and click Save Run App as Single Page Application
  5. Go back to your site (https://reactapptutorial.azurewebsites.net in this example) and refresh (You may need to wait a minute) Create React App Deployed to Azure App Service Website
  6. Go back to Terminal and enter git pull

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