Publish the API with GitHub Actions
You added your API to your web app and they're both running locally. Now it's time to publish your API and your app to Azure Static Web Apps.
When you created the Azure Static Web Apps instance and asked it to watch your main branch, a GitHub Action was generated for you. The GitHub Action listens to your repository's main branch for commits and pull requests. Then when the GitHub Action detects these changes, it builds and publishes your app.
When you created your Azure Static Web Apps resource, you provided the folder location for your API project by accepting the default value of Api. Azure Static Web Apps built and deployed the Azure Functions app in that folder. However, the app didn't work because the HTTP GET API isn't created yet.
Trigger the GitHub Action
The GitHub Action is ready to build and publish your web app and API once it detects a change to your main branch. You could either commit directly or create a pull request to the main branch. Both of these changes trigger the GitHub Action. When changes are detected on the main branch, it triggers the GitHub Action to publish the app at the same URL for your live web site.
Preproduction environments with preview URLs
Sometimes you want to see your changes in a staging site before publishing to the live web site. Azure Static Web Apps lets you see your changes through preproduction environments that each have their own preview URL. You can create a preproduction environment by creating a pull request against the branch that your GitHub Action is watching. Your live web site isn't affected. Instead, a new version of your app is created in its own preproduction environment. If you go back and check your pull request on GitHub, you notice that a link to the preproduction version is posted in the Conversation tab.
The following table shows how Azure Static Web Apps publishes your app to different URLs. Your app publishes to one URL while a pull request to the same branch publishes to another URL. These autogenerated URLs are provided by Azure Static Web Apps for the production app and pull requests. You can optionally assign a custom domain to the production app.
| Source | Description | URL |
|---|---|---|
| main branch | Example of a live web site URL | https://purple-rain-062d03304.azurestaticapps.net/ |
| Pull Request #5 | Example of a preview URL | https://purple-rain-062d03304-5.<location>.azurestaticapps.net/ |
You're currently working in the api branch. You make a pull request from your api branch to the main branch. When you create the pull request against the main branch, the GitHub Action publishes the app to a preproduction environment.
Once the workflow completes building and deploying your app, the GitHub bot adds a comment to your pull request. This comment contains a link to the URL of the preproduction environment. You can select this link to see your staged changes.
Next, you create a pull request and visit the staged version of your app.