--- title: Migrating --- Until we reach version 1.0, there may be occasional changes to the project structure Sapper expects. If you upgrade and Sapper sends you here, it's because it was unable to fix your project automatically. ### 0.6 to 0.7 Consult [sapper-template](https://github.com/sveltejs/sapper-template) for full examples of all the below points. ##### package.json To start a dev server, use `sapper dev` rather than `node server.js`. In all likelihood, your package.json will have an `npm run dev` script that will need to be updated. ##### Entry points As of version 0.7, Sapper expects to find your entry points — for client, server and service worker — in an `app` folder. Instead of using magically-injected `__variables__`, each entry point imports from its corresponding file in the `app/manifests` folder. These are automatically generated by Sapper. ```js // app/client.js (formerly templates/main.js) import { init } from 'sapper/runtime.js'; import { routes } from './manifest/client.js'; init(document.querySelector('#sapper'), routes); if (module.hot) module.hot.accept(); // enable hot reloading ``` ```js // app/server.js (formerly server.js) // Note that we're now using ES module syntax, because this // file is processed by webpack like the rest of your app import sapper from 'sapper'; import { routes } from './manifest/server.js'; // ..other imports // we now pass the `routes` object to the Sapper middleware app.use(sapper({ routes })); ``` ```js // app/service-worker.js (formerly templates/service-worker.js) import { assets, shell, timestamp, routes } from './manifest/service-worker.js'; // replace e.g. `__assets__` with `assets` in the rest of the file ``` ##### Templates and error pages In previous versions, we had `templates/2xx.html`, `templates/4xx.html` and `templates/5xx.html`. Now, we have a single template, `app/template.html`, which should look like your old `templates/2xx.html`. For handling error states, we have a 'special' route: `routes/_error.html`. This page is just like any other, except that it will get rendered whenever an error states is reached. The component has access to `status` and `error` values. Note that you can now use `this.error(statusCode, error)` inside your `preload` functions. ##### Webpack configs Your webpack configs now live in a `webpack` directory: * `webpack.client.config.js` is now `webpack/client.config.js` * `webpack.server.config.js` is now `webpack/server.config.js` If you have a service worker, you should also have a `webpack/service-worker.config.js` file. See [sapper-template](https://github.com/sveltejs/sapper-template) for an example. ### <0.9 to 0.10 ##### app/template.html * Your `` element must contain `%sapper.base%` (see ([base URLs](guide#base-urls)) * Remove references to your service worker; this is now handled by `%sapper.scripts%` ##### Pages * Your `preload` functions should now use `this.fetch` instead of `fetch`. `this.fetch` allows you to make credentialled requests on the server, and means that you no longer need to create a `global.fetch` object in `app/server.js`. ### 0.11 to 0.12 In earlier versions, each page was a completely standalone component. Upon navigation, the entire page would be torn down and a new one created. Typically, each page would import a shared `` component to achieve visual consistency. As of 0.12, this changes: we have a single `` component, defined in `app/App.html`, which controls the rendering of the rest of the app. See [sapper-template](https://github.com/sveltejs/sapper-template/blob/master/app/App.html) for an example. This component is rendered with the following values: * `Page` — a component constructor for the current page * `props` — an object with `params`, `query`, and any data returned from the page's `preload` function * `preloading` — `true` during preload, `false` otherwise. Useful for showing progress indicators Sapper needs to know about your app component. To that end, you will need to modify your `app/server.js` and `app/client.js`: ```diff // app/server.js import polka from 'polka'; import sapper from 'sapper'; import serve from 'serve-static'; import { routes } from './manifest/server.js'; +import App from './App.html'; polka() .use( serve('assets'), - sapper({ routes }) + sapper({ App, routes }) ) .listen(process.env.PORT); ``` ```diff // app/client.js import { init } from 'sapper/runtime.js'; import { routes } from './manifest/client.js'; +import App from './App.html'; -init(target: document.querySelector('#sapper'), routes); +init({ + target: document.querySelector('#sapper'), + routes, + App +}); ``` Once your `App.html` has been created and your server and client apps updated, you can remove any `` components from your individual pages. ### 0.13 to 0.14 The `4xx.html` and `5xx.html` error pages have been replaced with a single page, `_error.html`. In addition to the regular `params`, `query` and `path` props, it receives `status` and `error`. ### 0.14 to 0.15 This release changed how routing is handled, resulting in a number of changes. Instead of a single `App.html` component, you can place `_layout.html` components in any directory under `routes`. You should move `app/App.html` to `routes/_layout.html` and modify it like so: ```diff - + -