Azure App Service Static Web Apps with Svelte + Sapper

Microsoft just announced Azure App Service Static Web Apps at Microsoft Build 2020. If you have any interest in the JAMstack, then this is terrific news! While Microsoft provided a means for static website hosting in Azure already, we’ve been on our own to come up with solutions to deploy supporting APIs. With Azure Static Web Apps, that’s changed. You can now trigger a build and deploy of your static website and optional Azure Functions from a git commit!

I’ll dig into that fantastic combo in later posts. For the present, I’ll stick to something simple: publishing a Sapper generated static website.

Create a Sapper App

Creating a Sapper app is very easy, and you can learn all you need to know through their excellent documentation. For our purposes, you’ll need to have node, npm, and npx installed. Then just follow the instructions from the Sapper site to create a new repo.

# for Rollup
npx degit "sveltejs/sapper-template#rollup" my-app
# for webpack
npx degit "sveltejs/sapper-template#webpack" my-app

cd my-app
npm install
npm run dev & open http://localhost:3000

You should see the following website open in your preferred browser:

Generate a static website

The Sapper template already has an export command configured in the package.json. You can generate a static site with npm run export, then launch the static site with npx sirv __sapper__/export.

Azure Static Web Apps will run npm run build on your static site each time you push a commit. Let’s make the necessary changes to the package.json to get Azure Static Web Apps to generate what we want:

"scripts": {
  ...,
  "build": "sapper build --legacy && sapper export --legacy",
  ...
}

If you run npm run build && npx serve __sapper__/export now, you should see your static site running from __sapper__/export, and it should look the same as above.

NOTE: The --legacy flag configures Sapper to build with polyfill support for older browsers. You can drop this if you only need to support evergreen browsers.

The rest of the steps are reproduced from the Azure Static Web Apps wiki article for Next.js, which I’ve copied below for your convenience.

Push your static website to GitHub

Azure Static Web Apps will deploy your app from a GitHub repository and it will keep doing so for every pushed commit. Set up a repository:

  1. Initialize a git repo
    # Initialize git git init # Add all files git add . # Commit changes git commit -m "initial commit"
  2. Create a blank GitHub repo (don’t create a README) from https://github.com/new and name it whatever you like for example, sapper-static-website.
  3. Add the GitHub repo as a remote to your local repo.
    git remote add origin https://github.com/<YOUR_USER_NAME>/<YOUR_REPO_NAME>
  4. Push your local repo up to GitHub.
    git push --set-upstream origin master

Deploy your static website

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

Create Azure Static Web App

  1. Navigate to the Azure Portal.
  2. Click Create a Resource then search for Static App and select it.
  3. Select a subscription from the Subscription dropdown list or use the default one.
  4. Click the New link below the Resource group dropdown. In New resource group name, type sapperstaticsite and click OK
  5. Provide a globally unique name for your app in the Name text box. Valid characters include a-zA-Z0-9, and -. This value is used as the URL prefix for your static app in the format of https://<APP_NAME>.....
  6. In the Region dropdown, choose a region closest to you.
  7. Select Basic from the SKU dropdown.

Add a GitHub repository

Azure Static Web App needs access to the repository where your Sapper app lives so it can automatically deploy commits:

  1. Click the Sign in with GitHub button
  2. Select the Organization under which you created the repo for your Nuxt.js project. It can also be your GitHub username.
  3. Find the name of the repository you created earlier and select it.
  4. Choose master as the branch from the Branch dropdown.

Configure the build process

There are few things that Azure Static Web App can assume–things like automatically installing npm modules and running npm run build. There are also few you have to be explicit about, like what folder will the static app be copied to after build so the static site can be served from there.

  1. Click on the Build tab to configure the static output folder.
  2. Type dist in the App artifact location text box.

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 resource and also provision a GitHub Action for deployment.
  3. Once the deployment is completed, click Go to resource
  4. On the resource screen, click the URL link to open your deployed application.

Summary

Congratulations! You now have a Sapper static website deployed to Azure Static Web Apps using GitHub Actions. If you git pull origin master, you’ll see a new .github/workflows folder with a file named something like azure-static-web-apps-....yml. Changing this file will change your deployment configuration to Azure Static Web Apps, so handle with care.

Once again, this merely scratches the surface of what Azure Static Web Apps was built to handle. In upcoming posts, I’ll explore a bit more of the support for Azure Functions and plan to walk through updating the Community for F# site (finally) with pages for videos, dojos, etc. In the meantime, you may want to have a look at the Azure Static Web Apps docs for more information.

If you tried this or have moved on to combining this with Azure Functions, what did you think? How does your experience compare with other JAMstack solutions?

Advertisement

One thought on “Azure App Service Static Web Apps with Svelte + Sapper

Comments are closed.