Solvedsvelte routing Routes not displaying on refresh

This might be completely obvious, but it's not clear from the readme as far as I can tell. I have created some links and routes, and everything is working fine, as long as I start the app at the root /. If I navigate to a link, and then refresh the page, I get a Page Not Found error.

While I have been referencing the example, I'm still not sure why this is happening, except that I have a sneaky suspicion that it has something to do with the server.js file mentioned in the readme. In the example it states that you should run npm start. When checking the package.json I noticed, that this runs a series of commands which will in essence be your server. The readme doesn't mention having to do any of this.

I feel like I am missing something completely obvious here? And if I am not, how would this work in production? Thanks for your help.

12 Answers

✔️Accepted Answer

For a Rollup based dev environment generated from npx degit sveltejs/template my-svelte-project, you can fix it by adding -s to these 2 lines in package.json

  "scripts": {
     .....
    "start": "sirv public -s",
    "start:dev": "sirv public --dev -s"
  },

from https://www.npmjs.com/package/sirv-cli

-s, --single       Serve single-page applications

Other Answers:

Hi guys!
The only thing that worked for was put "--single" inside writeBundle method in rollup.config.js

Like this:

    writeBundle() {
      if (server) return;
      server = require("child_process").spawn(
        "npm",
        ["run", "start", "--", "--dev", "--single"],
        {
          stdio: ["ignore", "inherit", "inherit"],
          shell: true,
        }
      );

      process.on("SIGTERM", toExit);
      process.on("exit", toExit);
    },
  };

Here is where I see that answer

For a Rollup based dev environment generated from npx degit sveltejs/template my-svelte-project, you can fix it by adding -s to these 2 lines in package.json

  "scripts": {
     .....
    "start": "sirv public -s",
    "start:dev": "sirv public --dev -s"
  },

from https://www.npmjs.com/package/sirv-cli

-s, --single       Serve single-page applications

PLEASE, Consider adding this to docs. This saved me. Thank you!

Hi @mikebrits!

You have to make sure your server serves the index.html file for all your routes and not just for the / path. How to do this is very dependent on what server you are using.

If you are using express you can check how server.js in the example directory does it, and this answer outlines a similar approach.

Related Issues:

69
svelte routing Routes not displaying on refresh
For a Rollup based dev environment generated from npx degit sveltejs/template my-svelte-project ...