Azure Static Web Apps automatically builds and deploys full stack web apps from a code repository. In our extension, we currently only support GitHub repos which uses GitHub Actions.
Prerequisites
In order to create a Static Web App, the following is required:
- A .git project opened in your local VS Code workspace
- An Azure subscription
- Start Free or use a Sandbox account
- A GitHub account
Getting started
Start by clicking the "+" button.
For first-time users, this prompt will be displayed:
Click "Allow" and follow the steps to authorize VS Code to use GitHub.
Workspace Requirements
There are 4 requirements that are enforced by the Azure Static Web Apps extension:
- There must be a project opened in the VS Code workspace
- The opened project must be a .git repository
- The .git project must have a clean working-tree
- If the project exists on GitHub, admin access is required
Once the Azure Static Web Apps extension is authorized to use GitHub, next provide a name for the static web app.
- Names do not need to be globally unique
- Names can only contain alphanumeric characters and the symbol "-"
If the project selected does not have a GitHub remote that the user has admin access to, the next step will be to provide a name for the new GitHub repo. Azure Static Web Apps relies on GitHub Actions, so the extension will create the repo and push your local code up to GitHub as part of the static web app creation process.
Build Presets
The next step will be to select a build preset. Learn more here. Selecting a preset will only provide defaults for the app and output directory locations, but must be confirmed by the user.
App Location
The app location is where the project app code lives. For example, if the src folder exists in the app folder, then the value app should be entered.
Api Location
The location of your Azure Functions code. For example, 'api' represents a folder called 'api'.
Output Location
The output location is where the project build artifact will be built relative to the app location. For example, build is a common folder where the build artifact is created. If the user entered app as the app location, then if build is entered here, the location of the output should be app/build.
If there's a mistake in the build configuration, don't panic! It can be changed at anytime in the workflow yaml file that is automatically generated by Azure Static Web Apps.
You're Done!
Once the app and output locations are entered, the app will start creating. After it's done creating, Azure Static Web Apps will commit to the GitHub repo. The purpose of this is to generate the workflow configuration yaml file. This will be pulled down automatically upon creation and can be viewed by clicking "View/Edit Config"
GitHub Actions
Upon creation, GitHub Actions works in the background to build and deploy the web app. It can be monitored in the Actions tree item or by clicking "Open Actions in GitHub". Once the action is completed, a notification indicating success or failure should pop-up.
If there is a failure, it might be related to the build configuration. This can be changed in the workflow yaml file. It exists in the project at .github\workflows\azure-static-web-apps-random-name-randomnumbers.yml.
Workflow Configuration
Here are the settings that should be modified
