Sep 27, 2020 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

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 12 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 and then 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

5. Click Add secret
6. Click Actions
7. Click Set up this workflow under Deploy Node.js to Azure Web App
8. Change on release to on push
9. Set AZURE_WEBAPP_NAME (to reactapptutorial in this example)
10. Set AZURE_WEBAPP_PACKAGE_PATH to build
11. 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 }}

12. Press Start commit and Commit new file
13. Go to Actions (wait until the pipeline finishes)
14. Go back to your site (https://reactapptutorial.azurewebsites.net in this example) and refresh
15. Go back to Terminal and enter git pull

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

Series

1Deploy Create React App to Azure App ServicesSep 27, 20202Deploy Create React App to Azure Static Web AppsSep 27, 2020