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.

1. Install module

Run in project folder

npm i -D @roxi/routify npm-run-all

2. Update package.json

Run Routify alongside your original dev script. We’re using Rollup in the example, but you can use any bundler.

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

routify -b is shorthand for routify --single-build. Single-build doesn’t watch for file changes and produces a leaner routes.js file.

Note: You might also want to add the .routify folder to .gitignore, since it is only needed during development.

3. Add router to your app

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

Important

SPA forwarding

Unless you’re using hash based navigation, your server needs to forward all 404 to your HTML template.

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

Dynamic imports

Routify uses dynamic imports aka code splitting by default. If your bundler doesn’t support dynamic imports, you can either

• A) disable dynamic imports in routify by setting dynamicImports to false. See Config.
• B) enable dynamic imports for your bundler. (see Rollup example below)

/* rollup.config.js */
...
output: {
  "format": "esm",
  "dir": "dist/build"
  ...
},
...