DEV Community

Cover image for How to deploy a Sapper PWA on GitHub Pages
Alexandre Plennevaux
Alexandre Plennevaux

Posted on

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.

  1. 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.

GitHub Settings interface

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
Enter fullscreen mode Exit fullscreen mode

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:

<base href="/yourproject">
Enter fullscreen mode Exit fullscreen mode
polka()
    .use(
        'yourproject', // <-- replace yourproject with your repo name
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .listen(PORT, err => {
        if (err) console.log('error', err);
    });

Enter fullscreen mode Exit fullscreen mode

5. Deploy via the Terminal

We want to be able to deploy using a simple command:

npm run deploy
Enter fullscreen mode Exit fullscreen mode

To achieve that, install this npm package: gh-pages - npm

npm install gh-pages --save-dev
Enter fullscreen mode Exit fullscreen mode

Then, in the root of your project folder, create the file /scripts/gh-pages.js with this content:

var ghpages = require('gh-pages');

ghpages.publish(
    '__sapper__/export/yourproject',// <-- replace yourproject with your repo name
    {
        branch: 'gh-pages',
        repo: 'https://github.com/username/yourproject.git',
        user: {
            name: 'Your name',
            email: 'Your Email address'
        }
    },
    () => {
        console.log('Deploy Complete!')
    }
)

Enter fullscreen mode Exit fullscreen mode

Finally, update your package.json project file with the following (again, replace yourproject with your repo name):

"scripts": {
...
    "export": "sapper export --basepath yourproject --legacy",
...
    "deploy": "npm run export && node ./scripts/gh-pages.js"
  },
Enter fullscreen mode Exit fullscreen mode


`

6. Finally, test it out !

From inside your project folder, launch this command:

bash
npm run deploy

Following these steps worked for me πŸš€. Do let me know if you run into hiccups ;-)

Top comments (5)

Collapse
 
emma profile image
Emma Goto πŸ™ • Edited

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.

Collapse
 
pixeline profile image
Alexandre Plennevaux

Hi Emma, Thank you for your feedback, I'm glad this was helpful :-)

Collapse
 
josecelano profile image
Jose Celano

Thank you! Very useful. Based on this post and a Svelte template I've created a repo to deploy the app automatically using GitHub Actions in case someone is wondering how to do automatically when you push to GitHub. Here is the link github.com/josecelano/svelte-deplo...

Collapse
 
jmsunseri profile image
Justin Sunseri

I don't think you even really need to create this new gh-pages.js file. I just made my deploy script as show here

"export": "sapper export --basepath reponame --legacy",
"deploy": "yarn export &&  gh-pages -d __sapper__/export/reponame"
Enter fullscreen mode Exit fullscreen mode
Collapse
 
shaone profile image
ShaOne

Very helpful, big thanks!

I'd had a few goes at this setup. Your article finally gave me the missing piece, with the explanation about the /subfolder, aha :)