Routify 3 public BETA is here! Check it out

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 the full functionality of Routify. If starting a new project isn't an option, we refer to our Starter Template for the implementation of features like SSR, prerendering, and deployments.

1. Install module

Run in project folder

npm i -D @roxi/routify npm-run-all
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", ... }
/** 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} />
<!-- src/App.svelte -->
  import { Router } from "@roxi/routify";
  import { routes } from "../.routify/routes";
<Router {routes} />


SPA forwarding

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

For Sirv, enable the single option.

/** package.json **/ ... "scripts": { "start": "sirv public --single" ... }
/** 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" ... }, ...
/* rollup.config.js */
output: {
  "format": "esm",
  "dir": "dist/build"

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