Deploy Create React App to Azure Static Web Apps

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 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 Static Web App

  1. Login to https://portal.azure.com Azure Portal Home
  2. Click Static Web Apps Static Web Apps
  3. Click Create static web app Create a New Static 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 any region Static Web App Basics
  7. Click Sign in with GitHub Authorize Azure Static Web Apps
  8. Click Authorize Azure-App-Service-Static-Web-Apps Create Static Web App After Github Access Granted
  9. Select Organization (can be your personal account)
  10. Select Repository my-app
  11. Select Branch master
  12. Select Build Presets React Build Details Filled Out
  13. Click Review + create Review Static Web App
  14. Click Create Deployment is Complete
  15. Click Go to resource Public URL
  16. Click URL (https://blue-mushroom-0267ed60f.azurestaticapps.net in this example) Azure Static App Before Deployment Finishes
  17. Wait a little and refresh the page Website Deployed to Azure Static Web Apps
  18. Go back to Terminal and enter git pull

Make a change and push. Wait a little, and refresh your public site to see the changes.

Author - David Marcus