Install to existing project

This is a guide for installing Routify in an existing project. If you wish to create a new project instead. Please refer to our getting started guide.

We recommend using the Starter Template for full functionality of Routify. If starting a new project isn't an option, we refer to our Starter Template for implementation of features like SSR, prerendering and deployments.

1. Install module

Run in project folder

npm i -D @sveltech/routify
npm i -D @sveltech/routify

2. Update package.json

/** package.json **/ ... "scripts": { "dev": "routify -c my-server", "my-server": "rollup -c -w", "build": "routify -b && rollup -c", ... }
/** package.json **/
...
"scripts": {
    "dev": "routify -c my-server",
    "my-server": "rollup -c -w",
    "build": "routify -b && rollup -c",
    ...
}

routify -c is shorthand for routify --childprocess . If you do not wish to launch your server as a child process, you can use an npm task runner like npm-run-all

3. Add router to your app

<!-- src/App.svelte --> <script> import { Router } from "@sveltech/routify"; import { routes } from "@sveltech/routify/tmp/routes"; </script> <Router {routes} />
<!-- src/App.svelte -->
<script>
  import { Router } from "@sveltech/routify";
  import { routes } from "@sveltech/routify/tmp/routes";
</script>

<Router {routes} />

4. Enable SPA

Make sure that your server redirects all 404s to your app's path. Usually "/index.html" or just "/".

For Sirv, enable the single option.

/** package.json **/ ... "scripts": { "start": "sirv public --single" ... }
/** package.json **/
...
"scripts": {
    "start": "sirv public --single"
    ...
}

Writing good documentation that is up-to-date is difficult. If you notice a mistake, help us out.