Tutorial: Publish a Gatsby site to Azure Static Web Apps Preview

This article demonstrates how to create and deploy a Gatsby web application to Azure Static Web Apps. The final result is a new Static Web Apps site (with the associated GitHub Actions) that give you control over how the app is built and published.

In this tutorial, you learn how to:

  • Create a Gatsby app
  • Setup an Azure Static Web Apps site
  • Deploy the Gatsby app to Azure

If you don't have an Azure subscription, create a free account before you begin.

Prerequisites

Create a Gatsby App

Create a Gatsby app using the Gatsby Command Line Interface (CLI):

  1. Open a terminal

  2. Use the npx tool to create a new app with the Gatsby CLI. This may take a few minutes.

    npx gatsby new static-web-app
    
  3. Navigate to the newly created app

    cd static-web-app
    
  4. Initialize a git repo

    git init
    git add -A
    git commit -m "initial commit"
    

Push your application to GitHub

You need to have a repository on GitHub to create a new Azure Static Web Apps resource.

  1. Create a blank GitHub repository (don't create a README) from https://github.com/new named gatsby-static-web-app.

  2. Next, add the GitHub repository you just created as a remote to your local repo. Make sure to add your GitHub username in place of the <YOUR_USER_NAME> placeholder in the following command.

    git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
    
  3. Push your local repository up to GitHub.

    git push --set-upstream origin master
    

Deploy your web app

The following steps show you how to create a new static site app and deploy it to a production environment.

Create the application

  1. Navigate to the Azure portal

  2. Click Create a Resource

  3. Search for Static Web Apps

  4. Click Static Web Apps (Preview)

  5. Click Create

    Create a Static Web Apps (Preview) in the portal

  6. For Subscription, accept the subscription that is listed or select a new one from the drop-down list.

  7. In Resource group, select New. In New resource group name, enter gatsby-static-web-app and select OK.

  8. Next, provide a globally unique name for your app in the Name box. Valid characters include a-z, A-Z, 0-9 and -. This value is used as the URL prefix for your Static Web App in the format of https://<YOUR_APP_NAME>.azurestaticapps.net.

  9. For Region, select an available region close to you.

  10. For SKU, select Free.

    Details filled out

  11. Click the Sign in with GitHub button.

  12. Select the Organization under which you created the repository.

  13. Select the gatsby-static-web-app as the Repository .

  14. For the Branch select master.

    Completed GitHub information

Build

Next, add configuration settings that the build process uses to build your app.

  1. Click the Next: Build > button to edit the build configuration

  2. To configure the settings of the step in GitHub Actions, set the App location to /.

  3. Set App artifact location to public.

    A value for API location isn't necessary as you aren't deploying an API at the moment.

    Build Settings

Review and create

  1. Click the Review + Create button to verify the details are all correct.

  2. Click Create to start the creation of the App Service Static Web App and provision a GitHub Action for deployment.

  3. Once the deployment completes click, Go to resource.

  4. On the resource screen, click the URL link to open your deployed application. You may need to wait a minute or two for the GitHub Action to complete.

    Deployed application

Clean up resources

If you're not going to continue to use this application, you can delete the Azure Static Web App resource through the following steps:

  1. Open the Azure portal
  2. In the top search bar, search for your application by the name you provided earlier
  3. Click on the app
  4. Click on the Delete button
  5. Click Yes to confirm the delete action

Next steps