404 Problem with Sapper on github pages using a custom domain

Question

I have been trying to get my portfolio working on Github Pages with a custom domain, I have build everything with Sapper / Svelte. Locally everything works great, but when I deploy the site, I get my 404 error page when first loading the domain, if I then use the links to navigate the site it works perfect. What surprises me is that even the index works perfectly but ff I then reload the page, I get the 404 again.

I followed this Sapper and github tutorial. But I am using a CNAME in the static folder (it is deployed at the root) to get the domain name to work, I also changed the following places to include the domain.

In server.js I have the following line for the base url:

const dev = NODE_ENV === 'development';

const url = dev ? '/' : '/';

polka() // You can also use Express
    .use(
        url,
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )

In package.json I have the following:

"scripts": {
    "dev": "sapper dev",
    "build": "sapper build --legacy",
    "export": "sapper export --basepath <custom-domain> --legacy",
    "start": "node __sapper__/build",
    "deploy": "npm run export && node ./scripts/gh-pages.js"
  },

I have tried different combinations for the basepath and url. For example with and without https, I also tried the github repo name. And also tried it with and without CNAME file.

I probably don't understand the basepath well enough, but the documentation was not extensive enough for a beginner like me.

Does anybody know what I'm doing wrong?

Answer 1

After looking into the issue with colleagues, turns out that the problem was slightly different.

For custom domain, no base path adjustments need to be made. So no url in server.js and no --basepath in package.json.

The reason it did not update was because my gh-pages.js still used the wrong sapper export command.

scripts/gh-pages-js needs to look like:

ghpages.publish(
    '__sapper__/export/',
    {
        branch: 'master',
        repo: 'https://github.com/<user>/<repo>.git',
        user: {
            name: '<user-name>',
            email: '<email-adress>'
        }
    },
    () => {
        console.log('Deploy Complete!')
    }
)