How to deploy a Sapper PWA on GitHub Pages

Here is a quick and easy tutorial on how to deploy a PWA made with Sapper & Svelte on GitHub Pages.

Configure your project's GitHub repository (in the repository /settings) to use the GitHub Pages functionality and choose to publish the content of the gh-pages branch.

Pay extra attention to your repository slug name: it will become the foldername value to use later. In this example, it is "mathr", a personal project of mine (math quizz game for my bored teenage girl 🤓 )

1. Build your SPA

... until the point of readiness (obviously ;-) )

2. Export the code and check if it is good to go

npx sapper export
npx serve __sapper__/export

4. Serving from a subfolder

That's the tricky part. Since as a GitHub Pages, your project will most probably be served in a subfolder (unless you use your own domain name), modify the file src/server.js, to mention your subfolder. It will be used as the base tag href attribute value:

This was really useful - thanks!! Just want to point out that if you choose the webpack option when setting up Sapper, the --legacy export option doesn't work, so you'll need to make sure you use Rollup.