Exercise - Publish the API with GitHub Actions

  • 4 minutes

Your web app and API are both running locally. Now it's time to publish your web app and API to Azure Static Web Apps.

Push your changes to GitHub

You made changes to your API in the previous exercise. Commit those changes to the api branch and push them to GitHub by following these steps:

  1. In Visual Studio Code, open the command palette by pressing F1
  2. Type and select Git: Commit All. If Visual Studio Code prompts you to automatically stage all of your changes and commit them directly, select Yes.
  3. Enter a commit message such as api changes
  4. Open the command palette by pressing F1
  5. Type and select Git: Push
  6. If you're prompted with the message The branch 'api' has no upstream branch. Would you like to publish this branch? press the OK button

Create a Pull Request

You pushed your api branch to GitHub. Now you want the GitHub Action to publish your web app and API in a preview URL. So your next step is to create a pull request against the main branch.

  1. Open a browser

  2. Navigate to your repository

    https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

  3. Select the Pull requests link

  4. Select the New pull request button

  5. Select the main branch from the base dropdown

  6. Select the api branch from the compare dropdown

  7. Select the Create pull request button

  8. Again, select the second Create pull request button

Your GitHub Action is now triggered.

Watch the GitHub Action build and publish

You can stay in your browser on your repository and watch the GitHub Action's progress. Follow these steps to view the progress:

  1. Select the Actions menu
  2. Under the Workflows menu, select the Azure Static Web Apps CI/CD workflow item Screenshot showing how to find the correct workflow.
  3. Select the top link in the list of action runs.
  4. Select the Build and Deploy Job link.

Screenshot showing the build and deploy button on the workflow page.

You can see the progress of your GitHub Action as it builds and publishes your web app and API.

Browse to the preview URL

Once the GitHub Action successfully completes, you can view your running app in the browser.

  1. Select the Pull requests menu
  2. Select your pull request
  3. Select the link following the message Azure Static Web Apps: Your stage site is ready! Visit it here

Notice that the preview URL contains a hyphen followed by a number. The number matches the pull request number for the pull request you created. For every pull request you create, you get a unique and repeatable preview URL. The region is also used to form the preview URL.

Screenshot showing your angular web app.

Screenshot showing your react web app.

Screenshot showing your svelte web app.

Screenshot showing your vue web app.

Next steps

Congratulations, you created your first Azure Static Web Apps instance with a web app and API!