routify.dev Doc addition: Migrating from other templates

Doc addition. Any feedback welcome. Text starts below the line.

Migrating from svelte-template

Did you start your project using svelte-template but have decided you need a router? No worries. It's easy to transfer over your project to use Routify instead.

Copy over the dependencies and the npm tasks from package.json.
Copy over the full content from rollup.config.js
Put whatever static assets you had in the public folder into a new folder called static
Within your src folder, make sure the contents of App.svelte are the following:

<script>
  import { Router } from "@sveltech/routify";
  import { routes } from "@sveltech/routify/tmp/routes";
</script>

<Router {routes} />

Within your src folder, create a folder called pages
Within pages, create a file called index.svelte. This will correspond to /.
Now run npm i to install the necessary dependencies; and run npm run dev to run Routify's dev server.

Optional

If you are looking to deploy your project to Now or Netlify, look in the scripts folder and copy the files you need.

May 24 '20 16:05 Wolfr

How to migrate your Sapper project to Routify

Assuming you started from sapper-template, do the following.

Copy over the dependencies and the npm tasks from routify-starter's package.json.
Copy over the full content from routify-starter's rollup.config.js
Delete the following files in src: client.js, server.js
Rename the routes folder to pages
Move template.html to static/__index.html. You will have to remove the specific things like marked with %sapper%. Make any changes you feel necessary to correspond as much as possible to this file - most notably add the __SCRIPT__ marker somewhere in your <head> section.

Main layout and navigation

Remove any references to the segment prop as it does not exist in Routify. Refer to how to build up your navigation in Routify.

404 page

Remove _error.svelte and replace it with _fallback.svelte.

Remove files related to Cypress

If you won't use use cypress tests; remove the cypress folder and cypress.json in the root

Remove files related to server routes

If you used any server routes (Files with .json.js): these won't work with Routify, you will have to rewrite this code. The sapper template ships with a blog which uses a server route to retrieve posts.

Remove files related to PWA

Remove src/service-worker.js
Remove manifest.json from static

May 24 '20 16:05 Wolfr

Don't know how this issue eluded me. Great job, @Wolfr!

Should we post them?

Jun 20 '20 19:06 jakobrosenberg

Thank you, we might want to add this to the site yes. I am now going through all issues and pruning them.

Jun 30 '20 21:06 Wolfr

I think this part got out of date, or at least does things differently from the starter template:

  import { routes } from "@sveltech/routify/tmp/routes";

https://github.com/roxiness/routify-starter/blob/3b56ed4484f5c82728eed4b04c248d10a4a27da9/src/App.svelte#L3

  import { routes } from "../.routify/routes";

Aug 21 '20 22:08 tv42

The starter template recently changed routifyDir to .routify. Either approach is fine though.

Aug 22 '20 10:08 jakobrosenberg

It seems the /tmp/ thing was broken by yarn2 making node_modules read-only. Writing to node_modules seems sketchy, to me.

Aug 22 '20 21:08 tv42

As of recent package managers, node_modules has indeed become flaky. If you're interested in doing a PR, I'll be happy to merge it.

Aug 23 '20 14:08 jakobrosenberg