Routes not displaying on refresh

[mikebrits]

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.

[EmilTholin]

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.

[jacobgoh101]

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

[michaeljoser]

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

that is exactly what i was looking for as i am building single-page application dealing with firebase so i dont have a server.js file.. i just host the frontend files on firebase hosting. Please consider adding this to the docs :)

[dwivedithedev]

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!

[smc181002]

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!

It works well when we use npm but when I want to host it through apache web server, the issue still exists. I wish there is some hash-based routing to not manage the requests like at the server. I had a similar issue with react-router-dom and the hash router was useful. if there is something like that in svelte-routing, I would be happy. or else I need to move to svelte-spa-router

[drakiula]

I deployed my svelte-routing based app to an AWS S3 bucket, and was hitting the "404 No such key" issue upon routes navigation.

After configuring the static website hosting settings (within the S3 bucket Properties) with index.html for both Index document and Error document, routes started working as expected, the "No such key" issue was solved for me, I hope it helps other S3 users if needed.

[Tsuev]

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

Worked! Thanks!

[joshtune]

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

Thanks this worked for me

[siva2204]

I'm using webpack svelte template with svelte-routing, I tried to build and expose in apache server, having the issue : )
any help is appreciated @EmilTholin

[colantuomo]

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

[filipstoklasa]

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

I was searching for local dev solution and this is it. Thank you!