Deploy Create React App to Azure App Services

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

4. localhost:3000 will open automatically

Create Azure App Service

1. Login to https://portal.azure.com
2. Click App Services
3. Click Create app service
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)
8. Click Review + create
9. Click Create
10. Click Go to resource
11. Click Get publish profile to download a .PublishSettings file
12. Verify your site is publicly available (you might need to wait a little)

Create Github Repo

1. Login to Github and go to https://github.com/new
2. Enter a name
3. Click Create repository
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

5. Open a new Terminal window
6. Enter cd ~/Desktop/my-app
7. Paste the code from Github
8. Go back to Github and refresh the page

Deploy to App Service

1. Click Settings, Secrets, and then Actions
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

5. Click Add secret
6. Click Actions
7. Click Configure under Deploy Node.js to Azure Web App
8. Set AZURE_WEBAPP_NAME (to reactapptutorial in this example)
9. Find the step named Upload artifact for deployment job and change path from . to build
10. 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 }}

11. Press Start commit and Commit new file
12. Go to Actions (wait until the pipeline finishes)
13. Go back to Azure Portal, and click Configuration followed by General settings
14. Enter pm2 serve /home/site/wwwroot --no-daemon --spa under Startup Command and click Save
15. Go back to your site (https://reactapptutorial.azurewebsites.net in this example) and refresh (You may need to wait a minute)
16. Go back to Terminal and enter git pull

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

Series