{
  "$type": "site.standard.document",
  "description": "A quick and easy tutorial on how to deploy a PWA made with Sapper & Svelte on GitHub Pages.",
  "path": "/journal/2020-02-10/how-to-deploy-a-sapper-pwa-on-github-pages",
  "publishedAt": "2020-02-10T00:00:00.000Z",
  "site": "at://did:plc:v4zpi74gy7enfiwke7hmoxv5/site.standard.publication/3mon6xlk35v26",
  "tags": [
    "developer",
    "teacher"
  ],
  "textContent": "How to deploy a Sapper PWA on GitHub Page\n\nHere is a quick and easy tutorial on how to deploy a PWA made with SvelteKit/Sapper & Svelte on GitHub Pages.\n\n1. 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.\n\nPay 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 🤓 )\n\n1. Build your SPA\n... until the point of readiness (obviously ;-) )\n\n2. Export the code and check if it is good to go\n\nnpx sapper export\nnpx serve sapper/export\n\n4. Serving from a subfolder\nThat'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:\n\n<base href=\"/yourproject\">\n\npolka()\n\t.use(\n\t\t'yourproject', // <-- replace yourproject with your repo name\n\t\tcompression({ threshold: 0 }),\n\t\tsirv('static', { dev }),\n\t\tsapper.middleware()\n\t)\n\t.listen(PORT, err => {\n\t\tif (err) console.log('error', err);\n\t});\n\n5. Deploy via the Terminal\n\nWe want to be able to deploy using a simple command:\n\nnpm run deploy\n\nTo achieve that, install this npm package: gh-pages - npm\n\nnpm install gh-pages --save-dev\n\nThen, in the root of your project folder, create the file /scripts/gh-pages.js with this content:\n\nvar ghpages = require('gh-pages');\n\nghpages.publish(\n    'sapper/export/yourproject',// <-- replace yourproject with your repo name\n    {\n        branch: 'gh-pages',\n        repo: 'https://github.com/username/yourproject.git',\n        user: {\n            name: 'Your name',\n            email: 'Your Email address'\n        }\n    },\n    () => {\n        console.log('Deploy Complete!')\n    }\n)\n\nFinally, update your package.json project file with the following (again, replace yourproject with your repo name):\n\n\"scripts\": {\n...\n    \"export\": \"sapper export --basepath yourproject --legacy\",\n...\n    \"deploy\": \"npm run export && node ./scripts/gh-pages.js\"\n  },\n\n6. Finally, test it out !\n\nFrom inside your project folder, launch this command:\n\nnpm run deploy\n\nFollowing these steps worked for me 🚀. Do let me know if you run into hiccups ;-)",
  "title": "How to deploy a Sapper PWA on GitHub Pages"
}