Deploy a Static Web App with Azure Static Web Apps.

Prerequisites

• Github account (free tier)
• Gitpod account or Github Workspaces (free tier)
  • If using Gitpod: VSCode Locally installed on your computer
• Microsoft Azure account

Instructions

1. In Github: Use this Template and Create a new repository
2. Launch the Gitpod or Github Codespaces
3. generate new react app npx create-react-app my-app
4. commit code to repo
5. Test the app works eg. cd my-app; npm start
6. (If using Gitpod) Gitpod: Open in VSCode (Open's Gitpod in your Local VSCode)
7. Install Azure Static Web Apps VSCode Extension on your Local Machine
8. Log into Azure within VSCode
9. Create and configure Azure Static Web-App (Within VSCode)
10. Browse Site for for the new Azure Static Web-app and confirm its deployed
11. Delete he Azure Static Web-app within VSCode

Gitpod Considerations

Gitpod uses the Open VSX Registry The extension we need is in Microsoft's proprietary marketplace which is the default Marketplace for Vscode. If you are using Gitpod you can get around this issue by simply launching Gitpod in your Local VSCode since that will be using Microsoft's proprietary marketplace.

Github Codespaces Considerations

Github Codespaces (at the time I created this lab) was defaulting to NodeJS. So I included a devcontainer to configure Github Codespaces to use Node 18.

The reason this matters is that Github Actions needed at least Node 12.

References

https://learn.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=vanilla-javascript