How To Host React App On Azure

Sep 27, 2020 Table of Contents

Create React App

Open Terminal
Copy and paste cd ~/Desktop
Copy and paste all 3 lines

          npx create-react-app my-app cd my-app npm start

Create a new React app

localhost:3000 will open automatically

Create Azure App Service

Login to https://portal.azure.com
Click App Services
Click Create app service
Select any resource group (create one if you don't have any)
Add your app name (this is the site's public url)
Select Node 12 LTS on Linux using any region
Select any size (keep in mind more space costs more)
Click Review + create
Click Create
Click Go to resource
Click Get publish profile to download a .PublishSettings file
Verify your site is publicly available (you might need to wait a little)

Create Github Repo

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

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

Deploy to App Service

Click Settings and then Secrets
Click New secret
Enter AZURE_WEBAPP_PUBLISH_PROFILE as the name
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

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

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