Deploy Create React App to Azure Static Web Apps

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

1. Login to https://portal.azure.com
2. Click Static Web Apps
3. Click Create 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
7. Click Sign in with GitHub
8. Click Authorize Azure-App-Service-Static-Web-Apps
9. Select Organization (can be your personal account)
10. Select Repository my-app
11. Select Branch master
12. Select Build Presets React
13. Click Review + create
14. Click Create
15. Click Go to resource
16. Click URL (https://blue-mushroom-0267ed60f.azurestaticapps.net in this example)
17. Wait a little and refresh the page
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.

Series