-> v0.13.5

Merge pull request #294 from sveltejs/gh-289
fix handling of fatal errors
2026-01-13 11:35:28 +00:00 · 2018-06-26 18:30:46 -04:00 · 2018-06-26 18:29:56 -04:00 · 2018-06-26 13:49:11 -04:00 · 2018-06-18 22:45:51 -04:00 · 2018-06-18 22:44:55 -04:00
87 changed files with 4163 additions and 13699 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,38 +0,0 @@
-{
-    "root": true,
-    "rules": {
-        "semi": [ 2, "always" ],
-        "space-before-blocks": [ 2, "always" ],
-        "no-mixed-spaces-and-tabs": [ 2, "smart-tabs" ],
-        "no-cond-assign": 0,
-        "no-unused-vars": 2,
-        "object-shorthand":  [ 2, "always" ],
-        "no-const-assign": 2,
-        "no-class-assign": 2,
-        "no-this-before-super": 2,
-        "no-var": 2,
-        "no-unreachable": 2,
-        "valid-typeof": 2,
-        "quote-props": [ 2, "as-needed" ],
-        "one-var": [ 2, "never" ],
-        "prefer-arrow-callback": 2,
-        "prefer-const": [ 2, { "destructuring": "all" } ],
-        "arrow-spacing": 2,
-        "no-inner-declarations": 0
-    },
-    "env": {
-        "es6": true,
-        "browser": true,
-        "node": true,
-        "mocha": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:import/errors",
-        "plugin:import/warnings"
-    ],
-    "parserOptions": {
-        "ecmaVersion": 8,
-        "sourceType": "module"
-    }
-}
--- a/.gitignore
+++ b/.gitignore
@@ -1,15 +1,13 @@
 .DS_Store
 yarn.lock
+yarn-error.log
 node_modules
 cypress/screenshots
 test/app/.sapper
+test/app/app/manifest
+test/app/export
+test/app/build
+sapper
 runtime.js
-runtime.js.map
-cli.js
-cli.js.map
-middleware.js
-middleware.js.map
-core.js
-core.js.map
-webpack/config.js
-webpack/config.js.map
+dist
+!rollup.config.js
--- a/.travis.yml
+++ b/.travis.yml
@@ -19,4 +19,3 @@ install:
  - export DISPLAY=':99.0'
  - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
  - npm install
-  - (cd test/app && npm install)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,190 @@
 # sapper changelog

+## 0.13.5
+
+* Fix handling of fatal errors ([#289](https://github.com/sveltejs/sapper/issues/289))
+
+## 0.13.4
+
+* Focus `<body>` after navigation ([#287](https://github.com/sveltejs/sapper/issues/287))
+* Fix timing of hot reload updates
+* Emit `fatal` event if server crashes ([#285](https://github.com/sveltejs/sapper/pull/285))
+* Emit `stdout` and `stderr` events on dev watcher ([#285](https://github.com/sveltejs/sapper/pull/285))
+* Always refresh client assets in dev ([#286](https://github.com/sveltejs/sapper/pull/286))
+* Correctly initialise rebuild stats
+
+## 0.13.3
+
+* Make `fatal` events clonable for IPC purposes
+
+## 0.13.2
+
+* Emit a `basepath` event ([#284](https://github.com/sveltejs/sapper/pull/284))
+
+## 0.13.1
+
+* Reinstate ten-second interval between dev server heartbeats ([#276](https://github.com/sveltejs/sapper/issues/276))
+
+## 0.13.0
+
+* Expose `dev`, `build`, `export` and `find_page` APIs ([#272](https://github.com/sveltejs/sapper/issues/272))
+
+## 0.12.0
+
+* Each app has a single `<App>` component. See the [migration guide](https://sapper.svelte.technology/guide#0-11-to-0-12) for more information ([#157](https://github.com/sveltejs/sapper/issues/157))
+* Process exits with error code 1 if build/export fails ([#208](https://github.com/sveltejs/sapper/issues/208))
+
+## 0.11.1
+
+* Limit routes with leading dots to `.well-known` URIs ([#252](https://github.com/sveltejs/sapper/issues/252))
+* Allow server routes to sit in front of pages ([#236](https://github.com/sveltejs/sapper/pull/236))
+
+## 0.11.0
+
+* Create launcher file ([#240](https://github.com/sveltejs/sapper/issues/240))
+* Only keep necessary parts of webpack stats ([#251](https://github.com/sveltejs/sapper/pull/251))
+* Allow `NODE_ENV` to be overridden when building ([#241](https://github.com/sveltejs/sapper/issues/241))
+
+## 0.10.7
+
+* Allow routes to have a leading `.` ([#243](https://github.com/sveltejs/sapper/pull/243))
+* Only encode necessary characters in routes ([#234](https://github.com/sveltejs/sapper/pull/234))
+* Preserve existing `process.env` when exporting ([#245](https://github.com/sveltejs/sapper/pull/245))
+
+## 0.10.6
+
+* Fix error reporting in `sapper start`
+
+## 0.10.5
+
+* Fix missing service worker ([#231](https://github.com/sveltejs/sapper/pull/231))
+
+## 0.10.4
+
+* Upgrade chokidar, this time with a fix ([#227](https://github.com/sveltejs/sapper/pull/227))
+
+## 0.10.3
+
+* Downgrade chokidar ([#212](https://github.com/sveltejs/sapper/issues/212))
+
+## 0.10.2
+
+* Attach `store` to error pages
+* Fix sorting edge case ([#215](https://github.com/sveltejs/sapper/pull/215))
+
+## 0.10.1
+
+* Fix server-side `fetch` paths ([#207](https://github.com/sveltejs/sapper/pull/207))
+
+## 0.10.0
+
+* Support mounting on a path (this requires `app/template.html` to include `%sapper.base%`) ([#180](https://github.com/sveltejs/sapper/issues/180))
+* Support per-request server-side `Store` with client-side hydration ([#178](https://github.com/sveltejs/sapper/issues/178))
+* Add `this.fetch` to `preload`, with credentials support ([#178](https://github.com/sveltejs/sapper/issues/178))
+* Exclude sourcemaps from preload links and `<script>` block ([#204](https://github.com/sveltejs/sapper/pull/204))
+* Register service worker in `<script>` block
+
+
+## 0.9.6
+
+* Whoops — `tslib` is a runtime dependency
+
+## 0.9.5
+
+* Stringify clorox output ([#197](https://github.com/sveltejs/sapper/pull/197))
+
+## 0.9.4
+
+* Add `SAPPER_BASE` and `SAPPER_APP` environment variables ([#181](https://github.com/sveltejs/sapper/issues/181))
+* Minify template in `sapper build` ([#15](https://github.com/sveltejs/sapper/issues/15))
+* Minify all HTML files in `sapper export` ([#172](https://github.com/sveltejs/sapper/issues/172))
+* Log exported files ([#195](https://github.com/sveltejs/sapper/pull/195))
+* Add `--open`/`-o` flag to `sapper dev` and `sapper start` ([#186](https://github.com/sveltejs/sapper/issues/186))
+
+## 0.9.3
+
+* Fix path to `sapper-dev-client`
+
+## 0.9.2
+
+* Include `dist` files in package
+
+## 0.9.1
+
+* Include `sapper` bin
+
+## 0.9.0
+
+* Use `devalue` instead of `serialize-javascript`, allowing `preload` to return non-POJOs and cyclical/repeated references, but *not* functions ([#112](https://github.com/sveltejs/sapper/issues/112))
+* Kill child process if webpack crashes ([#177](https://github.com/sveltejs/sapper/issues/177))
+* Support HMR on remote devices ([#165](https://github.com/sveltejs/sapper/issues/165))
+* Remove hard-coded port (([#169](https://github.com/sveltejs/sapper/issues/169)))
+* Allow non-JS files, e.g. TypeScript to be used as entry points and server routes ([#57](https://github.com/sveltejs/sapper/issues/57))
+* Faster startup ([#173](https://github.com/sveltejs/sapper/issues/173))
+
+## 0.8.4
+
+* Fix route sorting ([#175](https://github.com/sveltejs/sapper/pull/175))
+
+## 0.8.3
+
+* Automatically select available port, or use `--port` flag for `dev` and `start` ([#169](https://github.com/sveltejs/sapper/issues/169))
+* Show stats after build/export ([#168](https://github.com/sveltejs/sapper/issues/168))
+* Various CLI improvements ([#170](https://github.com/sveltejs/sapper/pull/170))
+
+## 0.8.2
+
+* Rename `preloadRoutes` to `prefetchRoutes` ([#166](https://github.com/sveltejs/sapper/issues/166))
+
+## 0.8.1
+
+* Add `sapper start` command, for running an app built with `sapper build` ([#163](https://github.com/sveltejs/sapper/issues/163))
+
+## 0.8.0
+
+* Update to webpack 4
+* Add `preloadRoutes` function — secondary routes are no longer automatically preloaded ([#160](https://github.com/sveltejs/sapper/issues/160))
+* `sapper build` outputs to `build`, `sapper build custom-dir` outputs to `custom-dir` ([#150](https://github.com/sveltejs/sapper/pull/150))
+* `sapper export` outputs to `export`, `sapper export custom-dir` outputs to `custom-dir` ([#150](https://github.com/sveltejs/sapper/pull/150))
+* Improved logging ([#158](https://github.com/sveltejs/sapper/pull/158))
+* URI-encode routes ([#103](https://github.com/sveltejs/sapper/issues/103))
+* Various performance and stability improvements ([#152](https://github.com/sveltejs/sapper/pull/152))
+
+## 0.7.6
+
+* Prevent client-side navigation to server route ([#145](https://github.com/sveltejs/sapper/issues/145))
+* Don't serve error page for server route errors ([#138](https://github.com/sveltejs/sapper/issues/138))
+
+## 0.7.5
+
+* Allow dynamic parameters inside route parts ([#139](https://github.com/sveltejs/sapper/issues/139))
+
+## 0.7.4
+
+* Force `NODE_ENV='production'` when running `build` or `export` ([#141](https://github.com/sveltejs/sapper/issues/141))
+* Use source-map-support ([#134](https://github.com/sveltejs/sapper/pull/134))
+
+## 0.7.3
+
+* Handle webpack assets that are arrays instead of strings ([#131](https://github.com/sveltejs/sapper/pull/131))
+* Wait for new server to start before broadcasting HMR update ([#129](https://github.com/sveltejs/sapper/pull/129))
+
+## 0.7.2
+
+* Add `hmr-client.js` to package
+* Wait until first successful client build before creating service-worker.js
+
+## 0.7.1
+
+* Add missing `tslib` dependency
+
+## 0.7.0
+
+* Restructure app layout (see [migration guide](https://sapper.svelte.technology/guide#0-6-to-0-7)) ([#126](https://github.com/sveltejs/sapper/pull/126))
+* Support `this.redirect(status, location)` and `this.error(status, error)` in `preload` functions ([#127](https://github.com/sveltejs/sapper/pull/127))
+* Add `sapper dev` command
+* Add `sapper --help` command
+
 ## 0.6.4

 * Prevent phantom HMR requests in production mode ([#114](https://github.com/sveltejs/sapper/pull/114))
--- a/api.js
+++ b/api.js
@@ -0,0 +1 @@
+module.exports = require('./dist/api.ts.js');
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,65 +1,67 @@
 {
  "name": "sapper",
-  "version": "0.6.4",
+  "version": "0.13.5",
  "description": "Military-grade apps, engineered by Svelte",
-  "main": "middleware.js",
+  "main": "dist/middleware.ts.js",
  "bin": {
-    "sapper": "cli.js"
+    "sapper": "./sapper"
  },
  "files": [
-    "cli.js",
-    "core.js",
-    "middleware.js",
+    "*.js",
+    "*.ts.js",
    "runtime",
-    "runtime.js",
-    "webpack"
+    "webpack",
+    "sapper",
+    "dist"
  ],
  "directories": {
    "test": "test"
  },
  "dependencies": {
-    "chalk": "^2.3.0",
+    "ansi-colors": "^2.0.1",
    "cheerio": "^1.0.0-rc.2",
-    "chokidar": "^1.7.0",
-    "code-frame": "^5.0.0",
-    "escape-html": "^1.0.3",
-    "express": "^4.16.2",
+    "chokidar": "^2.0.3",
+    "cookie": "^0.3.1",
+    "devalue": "^1.0.1",
    "glob": "^7.1.2",
-    "locate-character": "^2.0.5",
+    "html-minifier": "^3.5.16",
    "mkdirp": "^0.5.1",
-    "node-fetch": "^1.7.3",
-    "relative": "^3.0.2",
+    "node-fetch": "^2.1.1",
+    "port-authority": "^1.0.2",
+    "pretty-bytes": "^5.0.0",
+    "pretty-ms": "^3.1.0",
    "require-relative": "^0.8.7",
    "rimraf": "^2.6.2",
+    "sade": "^1.4.1",
    "sander": "^0.6.0",
-    "serialize-javascript": "^1.4.0",
+    "source-map-support": "^0.5.6",
+    "tslib": "^1.9.1",
    "url-parse": "^1.2.0",
-    "walk-sync": "^0.3.2",
-    "webpack": "^3.10.0",
-    "webpack-hot-middleware": "^2.21.0"
+    "webpack-format-messages": "^2.0.1"
  },
  "devDependencies": {
-    "@std/esm": "^0.19.7",
    "@types/glob": "^5.0.34",
    "@types/mkdirp": "^0.5.2",
    "@types/rimraf": "^2.0.2",
-    "css-loader": "^0.28.7",
+    "compression": "^1.7.1",
    "eslint": "^4.13.1",
-    "eslint-plugin-import": "^2.8.0",
-    "get-port": "^3.2.0",
-    "mocha": "^4.0.1",
-    "nightmare": "^2.10.0",
-    "npm-run-all": "^4.1.2",
-    "rollup": "^0.53.0",
+    "eslint-plugin-import": "^2.12.0",
+    "express": "^4.16.3",
+    "mocha": "^5.2.0",
+    "nightmare": "^3.0.0",
+    "npm-run-all": "^4.1.3",
+    "polka": "^0.4.0",
+    "rollup": "^0.59.2",
+    "rollup-plugin-commonjs": "^9.1.3",
+    "rollup-plugin-json": "^3.0.0",
+    "rollup-plugin-string": "^2.0.2",
    "rollup-plugin-typescript": "^0.8.1",
-    "source-map-support": "^0.5.2",
-    "style-loader": "^0.19.1",
-    "svelte": "^1.49.1",
-    "svelte-loader": "^2.3.2",
-    "ts-node": "^4.1.0",
-    "tslib": "^1.8.1",
-    "typescript": "^2.6.2",
-    "wait-on": "^2.0.2"
+    "serve-static": "^1.13.2",
+    "svelte": "^2.6.3",
+    "svelte-loader": "^2.9.0",
+    "typescript": "^2.8.3",
+    "walk-sync": "^0.3.2",
+    "webpack": "^4.8.3"
  },
  "scripts": {
    "cy:open": "cypress open",
@@ -67,7 +69,8 @@
    "pretest": "npm run build",
    "build": "rollup -c",
    "dev": "rollup -cw",
-    "prepublish": "npm test"
+    "prepublishOnly": "npm test",
+    "update_mime_types": "curl http://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types | grep -e \"^[^#]\" > src/middleware/mime-types.md"
  },
  "repository": "https://github.com/sveltejs/sapper",
  "keywords": [
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,4 +1,7 @@
 import typescript from 'rollup-plugin-typescript';
+import string from 'rollup-plugin-string';
+import json from 'rollup-plugin-json';
+import commonjs from 'rollup-plugin-commonjs';
 import pkg from './package.json';

 const external = [].concat(
@@ -7,31 +10,45 @@ const external = [].concat(
 	'sapper/core.js'
 );

-const paths = {
-	'sapper/core.js': './core.js'
-};
-
-const plugins = [
-	typescript({
-		typescript: require('typescript')
-	})
-];
-
 export default [
-	{ name: 'cli', banner: true },
-	{ name: 'core', banner: true },
-	{ name: 'middleware' },
-	{ name: 'runtime', format: 'es' },
-	{ name: 'webpack', file: 'webpack/config' }
-].map(obj => ({
-	input: `src/${obj.name}/index.ts`,
-	output: {
-		file: `${obj.file || obj.name}.js`,
-		format: obj.format || 'cjs',
-		banner: obj.banner && '#!/usr/bin/env node',
-		paths,
-		sourcemap: true
+	{
+		input: `src/runtime/index.ts`,
+		output: {
+			file: `runtime.js`,
+			format: 'es'
+		},
+		plugins: [
+			typescript({
+				typescript: require('typescript')
+			})
+		]
 	},
-	external,
-	plugins
-}));
+
+	{
+		input: [
+			`src/api.ts`,
+			`src/cli.ts`,
+			`src/core.ts`,
+			`src/middleware.ts`,
+			`src/webpack.ts`
+		],
+		output: {
+			dir: 'dist',
+			format: 'cjs',
+			sourcemap: true
+		},
+		external,
+		plugins: [
+			string({
+				include: '**/*.md'
+			}),
+			json(),
+			commonjs(),
+			typescript({
+				typescript: require('typescript')
+			})
+		],
+		experimentalCodeSplitting: true,
+		experimentalDynamicImport: true
+	}
+];
--- a/2
+++ b/2
@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require('./dist/cli.ts.js');
--- a/sapper-dev-client.js
+++ b/sapper-dev-client.js
@@ -0,0 +1,38 @@
+let source;
+
+function check() {
+	if (module.hot.status() === 'idle') {
+		module.hot.check(true).then(modules => {
+			console.log(`[SAPPER] applied HMR update`);
+		});
+	}
+}
+
+export function connect(port) {
+	if (source || !window.EventSource) return;
+
+	source = new EventSource(`http://${window.location.hostname}:${port}/__sapper__`);
+
+	window.source = source;
+
+	source.onopen = function(event) {
+		console.log(`[SAPPER] dev client connected`);
+	};
+
+	source.onerror = function(error) {
+		console.error(error);
+	};
+
+	source.onmessage = function(event) {
+		const data = JSON.parse(event.data);
+		if (!data) return; // just a heartbeat
+
+		if (data.action === 'reload') {
+			window.location.reload();
+		}
+
+		if (data.status === 'completed') {
+			check();
+		}
+	};
+}
--- a/src/api.ts
+++ b/src/api.ts
@@ -0,0 +1,6 @@
+import { dev } from './api/dev';
+import { build } from './api/build';
+import { exporter } from './api/export';
+import { find_page } from './api/find_page';
+
+export { dev, build, exporter, find_page };
--- a/src/api/build.ts
+++ b/src/api/build.ts
@@ -0,0 +1,111 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import mkdirp from 'mkdirp';
+import rimraf from 'rimraf';
+import { EventEmitter } from 'events';
+import { minify_html } from './utils/minify_html';
+import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core'
+import { locations } from '../config';
+import * as events from './interfaces';
+
+export function build(opts: {}) {
+	const emitter = new EventEmitter();
+
+	execute(emitter, opts).then(
+		() => {
+			emitter.emit('done', <events.DoneEvent>{}); // TODO do we need to pass back any info?
+		},
+		error => {
+			emitter.emit('error', <events.ErrorEvent>{
+				error
+			});
+		}
+	);
+
+	return emitter;
+}
+
+async function execute(emitter: EventEmitter, {
+	dest = 'build',
+	app = 'app',
+	webpack = 'webpack',
+	routes = 'routes'
+} = {}) {
+	mkdirp.sync(dest);
+	rimraf.sync(path.join(dest, '**/*'));
+
+	// minify app/template.html
+	// TODO compile this to a function? could be quicker than str.replace(...).replace(...).replace(...)
+	const template = fs.readFileSync(`${app}/template.html`, 'utf-8');
+
+	// remove this in a future version
+	if (template.indexOf('%sapper.base%') === -1) {
+		const error = new Error(`As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`);
+		error.code = `missing-sapper-base`;
+		throw error;
+	}
+
+	fs.writeFileSync(`${dest}/template.html`, minify_html(template));
+
+	const route_objects = create_routes();
+
+	// create app/manifest/client.js and app/manifest/server.js
+	create_main_manifests({ routes: route_objects });
+
+	const { client, server, serviceworker } = create_compilers({ webpack });
+
+	const client_stats = await compile(client);
+	emitter.emit('build', <events.BuildEvent>{
+		type: 'client',
+		// TODO duration/warnings
+		webpack_stats: client_stats
+	});
+
+	const client_info = client_stats.toJson();
+	fs.writeFileSync(path.join(dest, 'client_info.json'), JSON.stringify(client_info));
+	fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(client_info.assetsByChunkName));
+
+	const server_stats = await compile(server);
+	emitter.emit('build', <events.BuildEvent>{
+		type: 'server',
+		// TODO duration/warnings
+		webpack_stats: server_stats
+	});
+
+	let serviceworker_stats;
+
+	if (serviceworker) {
+		create_serviceworker_manifest({
+			routes: route_objects,
+			client_files: client_stats.toJson().assets.map((chunk: { name: string }) => `client/${chunk.name}`)
+		});
+
+		serviceworker_stats = await compile(serviceworker);
+
+		emitter.emit('build', <events.BuildEvent>{
+			type: 'serviceworker',
+			// TODO duration/warnings
+			webpack_stats: serviceworker_stats
+		});
+	}
+}
+
+function compile(compiler: any) {
+	return new Promise((fulfil, reject) => {
+		compiler.run((err: Error, stats: any) => {
+			if (err) {
+				reject(err);
+				process.exit(1);
+			}
+
+			if (stats.hasErrors()) {
+				console.error(stats.toString({ colors: true }));
+				reject(new Error(`Encountered errors while building app`));
+			}
+
+			else {
+				fulfil(stats);
+			}
+		});
+	});
+}
--- a/src/api/dev.ts
+++ b/src/api/dev.ts
@@ -0,0 +1,471 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import * as http from 'http';
+import * as child_process from 'child_process';
+import * as ports from 'port-authority';
+import mkdirp from 'mkdirp';
+import rimraf from 'rimraf';
+import format_messages from 'webpack-format-messages';
+import { locations } from '../config';
+import { EventEmitter } from 'events';
+import { create_routes, create_main_manifests, create_compilers, create_serviceworker_manifest } from '../core';
+import * as events from './interfaces';
+
+export function dev(opts) {
+	return new Watcher(opts);
+}
+
+class Watcher extends EventEmitter {
+	dirs: {
+		app: string;
+		dest: string;
+		routes: string;
+		webpack: string;
+	}
+	port: number;
+	closed: boolean;
+
+	dev_server: DevServer;
+	proc: child_process.ChildProcess;
+	filewatchers: Array<{ close: () => void }>;
+	deferreds: {
+		client: Deferred;
+		server: Deferred;
+	};
+
+	crashed: boolean;
+	restarting: boolean;
+	current_build: {
+		changed: Set<string>;
+		rebuilding: Set<string>;
+		unique_warnings: Set<string>;
+		unique_errors: Set<string>;
+	}
+
+	constructor({
+		app = locations.app(),
+		dest = locations.dest(),
+		routes = locations.routes(),
+		webpack = 'webpack',
+		port = +process.env.PORT
+	}: {
+		app: string,
+		dest: string,
+		routes: string,
+		webpack: string,
+		port: number
+	}) {
+		super();
+
+		this.dirs = { app, dest, routes, webpack };
+		this.port = port;
+		this.closed = false;
+
+		this.filewatchers = [];
+
+		this.current_build = {
+			changed: new Set(),
+			rebuilding: new Set(),
+			unique_errors: new Set(),
+			unique_warnings: new Set()
+		};
+
+		// remove this in a future version
+		const template = fs.readFileSync(path.join(app, 'template.html'), 'utf-8');
+		if (template.indexOf('%sapper.base%') === -1) {
+			const error = new Error(`As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`);
+			error.code = `missing-sapper-base`;
+			throw error;
+		}
+
+		process.env.NODE_ENV = 'development';
+
+		process.on('exit', () => {
+			this.close();
+		});
+
+		this.init();
+	}
+
+	async init() {
+		if (this.port) {
+			if (!await ports.check(this.port)) {
+				this.emit('fatal', <events.FatalEvent>{
+					message: `Port ${this.port} is unavailable`
+				});
+				return;
+			}
+		} else {
+			this.port = await ports.find(3000);
+		}
+
+		const { dest } = this.dirs;
+		rimraf.sync(dest);
+		mkdirp.sync(dest);
+
+		const dev_port = await ports.find(10000);
+
+		const routes = create_routes();
+		create_main_manifests({ routes, dev_port });
+
+		this.dev_server = new DevServer(dev_port);
+
+		this.filewatchers.push(
+			watch_files(locations.routes(), ['add', 'unlink'], () => {
+				const routes = create_routes();
+				create_main_manifests({ routes, dev_port });
+			}),
+
+			watch_files(`${locations.app()}/template.html`, ['change'], () => {
+				this.dev_server.send({
+					action: 'reload'
+				});
+			})
+		);
+
+		this.deferreds = {
+			server: new Deferred(),
+			client: new Deferred()
+		};
+
+		// TODO watch the configs themselves?
+		const compilers = create_compilers({ webpack: this.dirs.webpack });
+
+		let log = '';
+
+		const emitFatal = () => {
+			this.emit('fatal', <events.FatalEvent>{
+				message: `Server crashed`,
+				log
+			});
+
+			this.crashed = true;
+			this.proc = null;
+		};
+
+		this.watch(compilers.server, {
+			name: 'server',
+
+			invalid: filename => {
+				this.restart(filename, 'server');
+				this.deferreds.server = new Deferred();
+			},
+
+			result: info => {
+				fs.writeFileSync(path.join(dest, 'server_info.json'), JSON.stringify(info, null, '  '));
+
+				this.deferreds.client.promise.then(() => {
+					const restart = () => {
+						log = '';
+						this.crashed = false;
+
+						ports.wait(this.port)
+							.then((() => {
+								this.emit('ready', <events.ReadyEvent>{
+									port: this.port,
+									process: this.proc
+								});
+
+								this.deferreds.server.fulfil();
+
+								this.dev_server.send({
+									status: 'completed'
+								});
+							}))
+							.catch(err => {
+								if (this.crashed) return;
+
+								this.emit('fatal', <events.FatalEvent>{
+									message: `Server is not listening on port ${this.port}`,
+									log
+								});
+							});
+					};
+
+					if (this.proc) {
+						this.proc.removeListener('exit', emitFatal);
+						this.proc.kill();
+						this.proc.on('exit', restart);
+					} else {
+						restart();
+					}
+
+					this.proc = child_process.fork(`${dest}/server.js`, [], {
+						cwd: process.cwd(),
+						env: Object.assign({
+							PORT: this.port
+						}, process.env),
+						stdio: ['ipc']
+					});
+
+					this.proc.stdout.on('data', chunk => {
+						log += chunk;
+						this.emit('stdout', chunk);
+					});
+
+					this.proc.stderr.on('data', chunk => {
+						log += chunk;
+						this.emit('stderr', chunk);
+					});
+
+					this.proc.on('message', message => {
+						if (message.__sapper__ && message.event === 'basepath') {
+							this.emit('basepath', {
+								basepath: message.basepath
+							});
+						}
+					});
+
+					this.proc.on('exit', emitFatal);
+				});
+			}
+		});
+
+		let first = true;
+
+		this.watch(compilers.client, {
+			name: 'client',
+
+			invalid: filename => {
+				this.restart(filename, 'client');
+				this.deferreds.client = new Deferred();
+
+				// TODO we should delete old assets. due to a webpack bug
+				// i don't even begin to comprehend, this is apparently
+				// quite difficult
+			},
+
+			result: info => {
+				fs.writeFileSync(path.join(dest, 'client_info.json'), JSON.stringify(info));
+				fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(info.assetsByChunkName, null, '  '));
+				this.deferreds.client.fulfil();
+
+				const client_files = info.assets.map((chunk: { name: string }) => `client/${chunk.name}`);
+
+				create_serviceworker_manifest({
+					routes: create_routes(),
+					client_files
+				});
+
+				// we need to wait a beat before watching the service
+				// worker, because of some webpack nonsense
+				setTimeout(watch_serviceworker, 100);
+			}
+		});
+
+		let watch_serviceworker = compilers.serviceworker
+			? () => {
+				watch_serviceworker = noop;
+
+				this.watch(compilers.serviceworker, {
+					name: 'service worker',
+
+					result: info => {
+						fs.writeFileSync(path.join(dest, 'serviceworker_info.json'), JSON.stringify(info, null, '  '));
+					}
+				});
+			}
+			: noop;
+	}
+
+	close() {
+		if (this.closed) return;
+		this.closed = true;
+
+		this.dev_server.close();
+
+		if (this.proc) this.proc.kill();
+		this.filewatchers.forEach(watcher => {
+			watcher.close();
+		});
+	}
+
+	restart(filename: string, type: string) {
+		if (this.restarting) {
+			this.current_build.changed.add(filename);
+			this.current_build.rebuilding.add(type);
+		} else {
+			this.restarting = true;
+
+			this.current_build = {
+				changed: new Set([filename]),
+				rebuilding: new Set([type]),
+				unique_warnings: new Set(),
+				unique_errors: new Set()
+			};
+
+			process.nextTick(() => {
+				this.emit('invalid', <events.InvalidEvent>{
+					changed: Array.from(this.current_build.changed),
+					invalid: {
+						server: this.current_build.rebuilding.has('server'),
+						client: this.current_build.rebuilding.has('client'),
+						serviceworker: this.current_build.rebuilding.has('serviceworker'),
+					}
+				});
+
+				this.restarting = false;
+			});
+		}
+	}
+
+	watch(compiler: any, { name, invalid = noop, result }: {
+		name: string,
+		invalid?: (filename: string) => void;
+		result: (stats: any) => void;
+	}) {
+		compiler.hooks.invalid.tap('sapper', (filename: string) => {
+			invalid(filename);
+		});
+
+		compiler.watch({}, (err: Error, stats: any) => {
+			if (err) {
+				this.emit('error', <events.ErrorEvent>{
+					type: name,
+					message: err.message
+				});
+			} else {
+				const messages = format_messages(stats);
+				const info = stats.toJson();
+
+				this.emit('build', {
+					type: name,
+
+					duration: info.time,
+
+					errors: messages.errors.map((message: string) => {
+						const duplicate = this.current_build.unique_errors.has(message);
+						this.current_build.unique_errors.add(message);
+
+						return mungeWebpackError(message, duplicate);
+					}),
+
+					warnings: messages.warnings.map((message: string) => {
+						const duplicate = this.current_build.unique_warnings.has(message);
+						this.current_build.unique_warnings.add(message);
+
+						return mungeWebpackError(message, duplicate);
+					}),
+				});
+
+				result(info);
+			}
+		});
+	}
+}
+
+const locPattern = /\((\d+):(\d+)\)$/;
+
+function mungeWebpackError(message: string, duplicate: boolean) {
+	// TODO this is all a bit rube goldberg...
+	const lines = message.split('\n');
+
+	const file = lines.shift()
+		.replace('[7m', '') // careful — there is a special character at the beginning of this string
+		.replace('[27m', '')
+		.replace('./', '');
+
+	let line = null;
+	let column = null;
+
+	const match = locPattern.exec(lines[0]);
+	if (match) {
+		lines[0] = lines[0].replace(locPattern, '');
+		line = +match[1];
+		column = +match[2];
+	}
+
+	return {
+		file,
+		line,
+		column,
+		message: lines.join('\n'),
+		originalMessage: message,
+		duplicate
+	};
+}
+
+class Deferred {
+	promise: Promise<any>;
+	fulfil: (value?: any) => void;
+	reject: (error: Error) => void;
+
+	constructor() {
+		this.promise = new Promise((fulfil, reject) => {
+			this.fulfil = fulfil;
+			this.reject = reject;
+		});
+	}
+}
+
+const INTERVAL = 10000;
+
+class DevServer {
+	clients: Set<http.ServerResponse>;
+	interval: NodeJS.Timer;
+	_: http.Server;
+
+	constructor(port: number, interval = 10000) {
+		this.clients = new Set();
+
+		this._ = http.createServer((req, res) => {
+			if (req.url !== '/__sapper__') return;
+
+			req.socket.setKeepAlive(true);
+			res.writeHead(200, {
+				'Access-Control-Allow-Origin': '*',
+				'Access-Control-Allow-Headers': 'Cache-Control',
+				'Content-Type': 'text/event-stream;charset=utf-8',
+				'Cache-Control': 'no-cache, no-transform',
+				'Connection': 'keep-alive',
+				// While behind nginx, event stream should not be buffered:
+				// http://nginx.org/docs/http/ngx_http_proxy_module.html#proxy_buffering
+				'X-Accel-Buffering': 'no'
+			});
+
+			res.write('\n');
+
+			this.clients.add(res);
+			req.on('close', () => {
+				this.clients.delete(res);
+			});
+		});
+
+		this._.listen(port);
+
+		this.interval = setInterval(() => {
+			this.send(null);
+		}, INTERVAL);
+	}
+
+	close() {
+		this._.close();
+		clearInterval(this.interval);
+	}
+
+	send(data: any) {
+		this.clients.forEach(client => {
+			client.write(`data: ${JSON.stringify(data)}\n\n`);
+		});
+	}
+}
+
+function noop() {}
+
+function watch_files(pattern: string, events: string[], callback: () => void) {
+	const chokidar = require('chokidar');
+
+	const watcher = chokidar.watch(pattern, {
+		persistent: true,
+		ignoreInitial: true,
+		disableGlobbing: true
+	});
+
+	events.forEach(event => {
+		watcher.on(event, callback);
+	});
+
+	return {
+		close: () => watcher.close()
+	};
+}
--- a/src/api/export.ts
+++ b/src/api/export.ts
@@ -0,0 +1,131 @@
+import * as child_process from 'child_process';
+import * as path from 'path';
+import * as sander from 'sander';
+import cheerio from 'cheerio';
+import URL from 'url-parse';
+import fetch from 'node-fetch';
+import * as ports from 'port-authority';
+import { EventEmitter } from 'events';
+import { minify_html } from './utils/minify_html';
+import { locations } from '../config';
+import * as events from './interfaces';
+
+export function exporter(opts: {}) {
+	const emitter = new EventEmitter();
+
+	execute(emitter, opts).then(
+		() => {
+			emitter.emit('done', <events.DoneEvent>{}); // TODO do we need to pass back any info?
+		},
+		error => {
+			emitter.emit('error', <events.ErrorEvent>{
+				error
+			});
+		}
+	);
+
+	return emitter;
+}
+
+async function execute(emitter: EventEmitter, {
+	build = 'build',
+	dest = 'export',
+	basepath = ''
+} = {}) {
+	const export_dir = path.join(dest, basepath);
+
+	// Prep output directory
+	sander.rimrafSync(export_dir);
+
+	sander.copydirSync('assets').to(export_dir);
+	sander.copydirSync(build, 'client').to(export_dir, 'client');
+
+	if (sander.existsSync(build, 'service-worker.js')) {
+		sander.copyFileSync(build, 'service-worker.js').to(export_dir, 'service-worker.js');
+	}
+
+	if (sander.existsSync(build, 'service-worker.js.map')) {
+		sander.copyFileSync(build, 'service-worker.js.map').to(export_dir, 'service-worker.js.map');
+	}
+
+	const port = await ports.find(3000);
+
+	const origin = `http://localhost:${port}`;
+
+	const proc = child_process.fork(path.resolve(`${build}/server.js`), [], {
+		cwd: process.cwd(),
+		env: Object.assign({
+			PORT: port,
+			NODE_ENV: 'production',
+			SAPPER_DEST: build,
+			SAPPER_EXPORT: 'true'
+		}, process.env)
+	});
+
+	const seen = new Set();
+	const saved = new Set();
+
+	proc.on('message', message => {
+		if (!message.__sapper__ || message.event !== 'file') return;
+
+		let file = new URL(message.url, origin).pathname.slice(1);
+		let { body } = message;
+
+		if (saved.has(file)) return;
+		saved.add(file);
+
+		const is_html = message.type === 'text/html';
+
+		if (is_html) {
+			file = file === '' ? 'index.html' : `${file}/index.html`;
+			body = minify_html(body);
+		}
+
+		emitter.emit('file', <events.FileEvent>{
+			file,
+			size: body.length
+		});
+
+		sander.writeFileSync(export_dir, file, body);
+	});
+
+	async function handle(url: URL) {
+		const r = await fetch(url.href);
+		const range = ~~(r.status / 100);
+
+		if (range >= 4) {
+			emitter.emit('failure', <events.FailureEvent>{
+				status: r.status,
+				pathname: url.pathname
+			});
+			return;
+		}
+
+		if (range === 2) {
+			if (r.headers.get('Content-Type') === 'text/html') {
+				const body = await r.text();
+				const $ = cheerio.load(body);
+				const urls: URL[] = [];
+
+				const base = new URL($('base').attr('href') || '/', url.href);
+
+				$('a[href]').each((i: number, $a) => {
+					const url = new URL($a.attribs.href, base.href);
+
+					if (url.origin === origin && !seen.has(url.pathname)) {
+						seen.add(url.pathname);
+						urls.push(url);
+					}
+				});
+
+				for (const url of urls) {
+					await handle(url);
+				}
+			}
+		}
+	}
+
+	return ports.wait(port)
+		.then(() => handle(new URL(`/${basepath}`, origin))) // TODO all static routes
+		.then(() => proc.kill());
+}
--- a/src/api/find_page.ts
+++ b/src/api/find_page.ts
@@ -0,0 +1,16 @@
+import * as glob from 'glob';
+import { locations } from '../config';
+import { create_routes } from '../core';
+
+export function find_page(pathname: string, files: string[] = glob.sync('**/*.*', { cwd: locations.routes(), dot: true, nodir: true })) {
+	const routes = create_routes({ files });
+
+	for (let i = 0; i < routes.length; i += 1) {
+		const route = routes[i];
+
+		if (route.pattern.test(pathname)) {
+			const page = route.handlers.find(handler => handler.type === 'page');
+			if (page) return page.file;
+		}
+	}
+}
--- a/src/api/interfaces.ts
+++ b/src/api/interfaces.ts
@@ -0,0 +1,44 @@
+import * as child_process from 'child_process';
+
+export type ReadyEvent = {
+	port: number;
+	process: child_process.ChildProcess;
+};
+
+export type ErrorEvent = {
+	type: string;
+	message: string;
+};
+
+export type FatalEvent = {
+	message: string;
+	log?: string;
+};
+
+export type InvalidEvent = {
+	changed: string[];
+	invalid: {
+		client: boolean;
+		server: boolean;
+		serviceworker: boolean;
+	}
+};
+
+export type BuildEvent = {
+	type: string;
+	errors: Array<{ message: string, duplicate: boolean }>;
+	warnings: Array<{ message: string, duplicate: boolean }>;
+	duration: number;
+	webpack_stats: any;
+}
+
+export type FileEvent = {
+	file: string;
+	size: number;
+}
+
+export type FailureEvent = {
+
+}
+
+export type DoneEvent = {}
--- a/src/api/utils/minify_html.ts
+++ b/src/api/utils/minify_html.ts
@@ -0,0 +1,21 @@
+import { minify } from 'html-minifier';
+
+export function minify_html(html: string) {
+	return minify(html, {
+		collapseBooleanAttributes: true,
+		collapseWhitespace: true,
+		conservativeCollapse: true,
+		decodeEntities: true,
+		html5: true,
+		minifyCSS: true,
+		minifyJS: true,
+		removeAttributeQuotes: true,
+		removeComments: true,
+		removeOptionalTags: true,
+		removeRedundantAttributes: true,
+		removeScriptTypeAttributes: true,
+		removeStyleLinkTypeAttributes: true,
+		sortAttributes: true,
+		sortClassName: true
+	});
+}
--- a/src/cli.ts
+++ b/src/cli.ts
@@ -0,0 +1,97 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as child_process from 'child_process';
+import sade from 'sade';
+import * as colors from 'ansi-colors';
+import prettyMs from 'pretty-ms';
+// import upgrade from './cli/upgrade';
+import * as ports from 'port-authority';
+import * as pkg from '../package.json';
+
+const prog = sade('sapper').version(pkg.version);
+
+prog.command('dev')
+	.describe('Start a development server')
+	.option('-p, --port', 'Specify a port')
+	.option('-o, --open', 'Open a browser window')
+	.action(async (opts: { port: number, open: boolean }) => {
+		const { dev } = await import('./cli/dev');
+		dev(opts);
+	});
+
+prog.command('build [dest]')
+	.describe('Create a production-ready version of your app')
+	.option('-p, --port', 'Default of process.env.PORT', '3000')
+	.example(`build custom-dir -p 4567`)
+	.action(async (dest = 'build', opts: { port: string }) => {
+		console.log(`> Building...`);
+
+		process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+		process.env.SAPPER_DEST = dest;
+
+		const start = Date.now();
+
+		try {
+			const { build } = await import('./cli/build');
+			await build();
+
+			const launcher = path.resolve(dest, 'index.js');
+
+			fs.writeFileSync(launcher, `
+				// generated by sapper build at ${new Date().toISOString()}
+				process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+				process.env.SAPPER_DEST = __dirname;
+				process.env.PORT = process.env.PORT || ${opts.port || 3000};
+
+				console.log('Starting server on port ' + process.env.PORT);
+				require('./server.js');
+			`.replace(/^\t+/gm, '').trim());
+
+			console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold.cyan(`node ${dest}`)} to run the app.`);
+		} catch (err) {
+			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
+			process.exit(1);
+		}
+	});
+
+prog.command('start [dir]')
+	.describe('Start your app')
+	.option('-p, --port', 'Specify a port')
+	.option('-o, --open', 'Open a browser window')
+	.action(async (dir = 'build', opts: { port: number, open: boolean }) => {
+		const { start } = await import('./cli/start');
+		start(dir, opts);
+	});
+
+prog.command('export [dest]')
+	.describe('Export your app as static files (if possible)')
+	.option('--basepath', 'Specify a base path')
+	.action(async (dest = 'export', opts: { basepath?: string }) => {
+		console.log(`> Building...`);
+
+		process.env.NODE_ENV = 'production';
+		process.env.SAPPER_DEST = '.sapper/.export';
+
+		const start = Date.now();
+
+		try {
+			const { build } = await import('./cli/build');
+			await build();
+			console.error(`\n> Built in ${elapsed(start)}. Crawling site...`);
+
+			const { exporter } = await import('./cli/export');
+			await exporter(dest, opts);
+			console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold.cyan(`npx serve ${dest}`)} to run the app.`);
+		} catch (err) {
+			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
+			process.exit(1);
+		}
+	});
+
+// TODO upgrade
+
+prog.parse(process.argv);
+
+function elapsed(start: number) {
+	return prettyMs(Date.now() - start);
+}
--- a/src/cli/build.ts
+++ b/src/cli/build.ts
@@ -0,0 +1,32 @@
+import { build as _build } from '../api/build';
+import * as colors from 'ansi-colors';
+import { locations } from '../config';
+
+export function build() {
+	return new Promise((fulfil, reject) => {
+		try {
+			const emitter = _build({
+				dest: locations.dest(),
+				app: locations.app(),
+				routes: locations.routes(),
+				webpack: 'webpack'
+			});
+
+			emitter.on('build', event => {
+				console.log(colors.inverse(`\nbuilt ${event.type}`));
+				console.log(event.webpack_stats.toString({ colors: true }));
+			});
+
+			emitter.on('error', event => {
+				reject(event.error);
+			});
+
+			emitter.on('done', event => {
+				fulfil();
+			});
+		} catch (err) {
+			console.log(`${colors.bold.red(`> ${err.message}`)}`);
+			process.exit(1);
+		}
+	});
+}
--- a/src/cli/dev.ts
+++ b/src/cli/dev.ts
@@ -0,0 +1,78 @@
+import * as path from 'path';
+import * as colors from 'ansi-colors';
+import * as child_process from 'child_process';
+import prettyMs from 'pretty-ms';
+import { dev as _dev } from '../api/dev';
+import * as events from '../api/interfaces';
+
+export function dev(opts: { port: number, open: boolean }) {
+	try {
+		const watcher = _dev(opts);
+
+		let first = true;
+
+		watcher.on('ready', (event: events.ReadyEvent) => {
+			if (first) {
+				console.log(`${colors.bold.cyan(`> Listening on http://localhost:${event.port}`)}`);
+				if (opts.open) child_process.exec(`open http://localhost:${event.port}`);
+				first = false;
+			}
+
+			// TODO clear screen?
+
+			event.process.stdout.on('data', data => {
+				process.stdout.write(data);
+			});
+
+			event.process.stderr.on('data', data => {
+				process.stderr.write(data);
+			});
+		});
+
+		watcher.on('invalid', (event: events.InvalidEvent) => {
+			const changed = event.changed.map(filename => path.relative(process.cwd(), filename)).join(', ');
+			console.log(`\n${colors.bold.cyan(changed)} changed. rebuilding...`);
+		});
+
+		watcher.on('error', (event: events.ErrorEvent) => {
+			console.log(`${colors.red(`✗ ${event.type}`)}`);
+			console.log(`${colors.red(event.message)}`);
+		});
+
+		watcher.on('fatal', (event: events.FatalEvent) => {
+			console.log(`${colors.bold.red(`> ${event.message}`)}`);
+			if (event.log) console.log(event.log);
+		});
+
+		watcher.on('build', (event: events.BuildEvent) => {
+			if (event.errors.length) {
+				console.log(`${colors.bold.red(`✗ ${event.type}`)}`);
+
+				event.errors.filter(e => !e.duplicate).forEach(error => {
+					console.log(error.message);
+				});
+
+				const hidden = event.errors.filter(e => e.duplicate).length;
+				if (hidden > 0) {
+					console.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
+				}
+			} else if (event.warnings.length) {
+				console.log(`${colors.bold.yellow(`• ${event.type}`)}`);
+
+				event.warnings.filter(e => !e.duplicate).forEach(warning => {
+					console.log(warning.message);
+				});
+
+				const hidden = event.warnings.filter(e => e.duplicate).length;
+				if (hidden > 0) {
+					console.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
+				}
+			} else {
+				console.log(`${colors.bold.green(`✔ ${event.type}`)} ${colors.gray(`(${prettyMs(event.duration)})`)}`);
+			}
+		});
+	} catch (err) {
+		console.log(`${colors.bold.red(`> ${err.message}`)}`);
+		process.exit(1);
+	}
+}
--- a/src/cli/export.ts
+++ b/src/cli/export.ts
@@ -0,0 +1,35 @@
+import { exporter as _exporter } from '../api/export';
+import * as colors from 'ansi-colors';
+import prettyBytes from 'pretty-bytes';
+import { locations } from '../config';
+
+export function exporter(export_dir: string, { basepath = '' }) {
+	return new Promise((fulfil, reject) => {
+		try {
+			const emitter = _exporter({
+				build: locations.dest(),
+				dest: export_dir,
+				basepath
+			});
+
+			emitter.on('file', event => {
+				console.log(`${colors.bold.cyan(event.file)} ${colors.gray(`(${prettyBytes(event.size)})`)}`);
+			});
+
+			emitter.on('failure', event => {
+				console.log(`${colors.red(`> Received ${event.status} response when fetching ${event.pathname}`)}`);
+			});
+
+			emitter.on('error', event => {
+				reject(event.error);
+			});
+
+			emitter.on('done', event => {
+				fulfil();
+			});
+		} catch (err) {
+			console.log(`${colors.bold.red(`> ${err.message}`)}`);
+			process.exit(1);
+		}
+	});
+}
--- a/src/cli/index.ts
+++ b/src/cli/index.ts
@@ -1,29 +0,0 @@
-import { build, export as exporter } from 'sapper/core.js';
-import { dest, entry, isDev, src } from '../config';
-
-process.env.NODE_ENV = 'production';
-
-const cmd = process.argv[2];
-const start = Date.now();
-const dev = isDev();
-
-if (cmd === 'build') {
-	build({ dest, dev, entry, src })
-		.then(() => {
-			const elapsed = Date.now() - start;
-			console.error(`built in ${elapsed}ms`); // TODO beautify this, e.g. 'built in 4.7 seconds'
-		})
-		.catch(err => {
-			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
-		});
-} else if (cmd === 'export') {
-	build({ dest, dev: false, entry, src })
-		.then(() => exporter({ src, dest }))
-		.then(() => {
-			const elapsed = Date.now() - start;
-			console.error(`extracted in ${elapsed}ms`); // TODO beautify this, e.g. 'built in 4.7 seconds'
-		})
-		.catch(err => {
-			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
-		});
-}
--- a/src/cli/start.ts
+++ b/src/cli/start.ts
@@ -0,0 +1,39 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as child_process from 'child_process';
+import * as colors from 'ansi-colors';
+import * as ports from 'port-authority';
+
+export async function start(dir: string, opts: { port: number, open: boolean }) {
+	let port = opts.port || +process.env.PORT;
+
+	const resolved = path.resolve(dir);
+	const server = path.resolve(dir, 'server.js');
+
+	if (!fs.existsSync(server)) {
+		console.log(`${colors.bold.red(`> ${dir}/server.js does not exist — type ${colors.bold.cyan(dir === 'build' ? `npx sapper build` : `npx sapper build ${dir}`)} to create it`)}`);
+		return;
+	}
+
+	if (port) {
+		if (!await ports.check(port)) {
+			console.log(`${colors.bold.red(`> Port ${port} is unavailable`)}`);
+			return;
+		}
+	} else {
+		port = await ports.find(3000);
+	}
+
+	child_process.fork(server, [], {
+		cwd: process.cwd(),
+		env: Object.assign({
+			NODE_ENV: 'production',
+			PORT: port,
+			SAPPER_DEST: dir
+		}, process.env)
+	});
+
+	await ports.wait(port);
+	console.log(`${colors.bold.cyan(`> Listening on http://localhost:${port}`)}`);
+	if (opts.open) child_process.exec(`open http://localhost:${port}`);
+}
--- a/src/cli/upgrade.ts
+++ b/src/cli/upgrade.ts
@@ -0,0 +1,53 @@
+import * as fs from 'fs';
+import * as colors from 'ansi-colors';
+
+export default async function upgrade() {
+	const upgraded = [
+		await upgrade_sapper_main()
+	].filter(Boolean);
+
+	if (upgraded.length === 0) {
+		console.log(`No changes!`);
+	}
+}
+
+async function upgrade_sapper_main() {
+	const _2xx = read('templates/2xx.html');
+	const _4xx = read('templates/4xx.html');
+	const _5xx = read('templates/5xx.html');
+
+	const pattern = /<script src='\%sapper\.main\%'><\/script>/;
+
+	let replaced = false;
+
+	['2xx', '4xx', '5xx'].forEach(code => {
+		const file = `templates/${code}.html`
+		const template = read(file);
+		if (!template) return;
+
+		if (/\%sapper\.main\%/.test(template)) {
+			if (!pattern.test(template)) {
+				console.log(`${colors.red(`Could not replace %sapper.main% in ${file}`)}`);
+			} else {
+				write(file, template.replace(pattern, `%sapper.scripts%`));
+				console.log(`${colors.green(`Replaced %sapper.main% in ${file}`)}`);
+				replaced = true;
+			}
+		}
+	});
+
+	return replaced;
+}
+
+function read(file: string) {
+	try {
+		return fs.readFileSync(file, 'utf-8');
+	} catch (err) {
+		console.error(err);
+		return null;
+	}
+}
+
+function write(file: string, data: string) {
+	fs.writeFileSync(file, data);
+}
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,12 +1,10 @@
 import * as path from 'path';

-export const isDev = () => process.env.NODE_ENV !== 'production';
+export const dev = () => process.env.NODE_ENV !== 'production';

-export const templates = path.resolve(process.env.SAPPER_TEMPLATES || 'templates');
-export const src = path.resolve(process.env.SAPPER_ROUTES || 'routes');
-export const dest = path.resolve(process.env.SAPPER_DEST || '.sapper');
-
-export const entry = {
-	client: path.resolve(templates, '.main.rendered.js'),
-	server: path.resolve(dest, 'server-entry.js')
-};
+export const locations = {
+	base:   () => path.resolve(process.env.SAPPER_BASE || ''),
+	app:    () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_APP    || 'app'),
+	routes: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_ROUTES || 'routes'),
+	dest:   () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_DEST   || '.sapper')
+};
--- a/src/core.ts
+++ b/src/core.ts
@@ -0,0 +1,3 @@
+export * from './core/create_manifests';
+export { default as create_compilers } from './core/create_compilers';
+export { default as create_routes } from './core/create_routes';
--- a/src/core/build.ts
+++ b/src/core/build.ts
@@ -1,62 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import mkdirp from 'mkdirp';
-import rimraf from 'rimraf';
-import create_compilers from './create_compilers.js';
-import create_app from './create_app.js';
-import create_assets from './create_assets.js';
-
-export default function build({
-	src,
-	dest,
-	dev,
-	entry
-}: {
-	src: string;
-	dest: string;
-	dev: boolean;
-	entry: { client: string, server: string }
-}) {
-	mkdirp.sync(dest);
-	rimraf.sync(path.join(dest, '**/*'));
-
-	// create main.js and server-routes.js
-	create_app({ dev, entry, src });
-
-	return new Promise((fulfil, reject) => {
-		function handleErrors(err, stats) {
-			if (err) {
-				reject(err);
-				process.exit(1);
-			}
-
-			if (stats.hasErrors()) {
-				console.error(stats.toString({ colors: true }));
-				reject(new Error(`Encountered errors while building app`));
-			}
-		}
-
-		const { client, server } = create_compilers();
-
-		client.run((err, client_stats) => {
-			handleErrors(err, client_stats);
-			const client_info = client_stats.toJson();
-			fs.writeFileSync(
-				path.join(dest, 'stats.client.json'),
-				JSON.stringify(client_info, null, '  ')
-			);
-
-			server.run((err, server_stats) => {
-				handleErrors(err, server_stats);
-				const server_info = server_stats.toJson();
-				fs.writeFileSync(
-					path.join(dest, 'stats.server.json'),
-					JSON.stringify(server_info, null, '  ')
-				);
-
-				create_assets({ src, dest, dev, client_info, server_info });
-				fulfil();
-			});
-		});
-	});
-}
--- a/src/core/create_app.ts
+++ b/src/core/create_app.ts
@@ -1,90 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import create_routes from './create_routes';
-
-function posixify(file: string) {
-	return file.replace(/[/\\]/g, '/');
-}
-
-function fudge_mtime(file: string) {
-	// need to fudge the mtime so that webpack doesn't go doolally
-	const { atime, mtime } = fs.statSync(file);
-	fs.utimesSync(
-		file,
-		new Date(atime.getTime() - 999999),
-		new Date(mtime.getTime() - 999999)
-	);
-}
-
-function create_app({
-	src,
-	dev,
-	entry
-}: {
-	src: string;
-	dev: boolean;
-	entry: { client: string; server: string };
-}) {
-	const routes = create_routes({ src });
-
-	function create_client_main() {
-		const code = `[${routes
-			.filter(route => route.type === 'page')
-			.map(route => {
-				const params =
-					route.dynamic.length === 0
-						? '{}'
-						: `{ ${route.dynamic
-								.map((part, i) => `${part}: match[${i + 1}]`)
-								.join(', ')} }`;
-
-				const file = posixify(`${src}/${route.file}`);
-				return `{ pattern: ${
-					route.pattern
-				}, params: match => (${params}), load: () => import(/* webpackChunkName: "${
-					route.id
-				}" */ '${file}') }`;
-			})
-			.join(', ')}]`;
-
-		let main = fs
-			.readFileSync('templates/main.js', 'utf-8')
-			.replace(
-				/__app__/g,
-				posixify(path.resolve(__dirname, '../../runtime/app.js'))
-			)
-			.replace(/__routes__/g, code)
-			.replace(/__dev__/g, String(dev));
-
-		if (dev) {
-			const hmr_client = posixify(
-				require.resolve(`webpack-hot-middleware/client`)
-			);
-			main += `\n\nimport('${hmr_client}?path=/__webpack_hmr&timeout=20000'); if (module.hot) module.hot.accept();`;
-		}
-
-		fs.writeFileSync(entry.client, main);
-		fudge_mtime(entry.client);
-	}
-
-	function create_server_routes() {
-		const imports = routes
-			.map(route => {
-				const file = posixify(`${src}/${route.file}`);
-				return route.type === 'page'
-					? `import ${route.id} from '${file}';`
-					: `import * as ${route.id} from '${file}';`;
-			})
-			.join('\n');
-
-		const exports = `export { ${routes.map(route => route.id)} };`;
-
-		fs.writeFileSync(entry.server, `${imports}\n\n${exports}`);
-		fudge_mtime(entry.server);
-	}
-
-	create_client_main();
-	create_server_routes();
-}
-
-export default create_app;
--- a/src/core/create_assets.ts
+++ b/src/core/create_assets.ts
@@ -1,87 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import glob from 'glob';
-import { create_templates, render } from './templates';
-import create_routes from './create_routes';
-
-function ensure_array(thing) {
-	return Array.isArray(thing) ? thing : [thing]; // omg webpack what the HELL are you doing
-}
-
-export default function create_assets({ src, dest, dev, client_info, server_info }) {
-	create_templates(); // TODO refactor this...
-
-	const main_file = `/client/${ensure_array(client_info.assetsByChunkName.main)[0]}`;
-
-	const chunk_files = client_info.assets.map(chunk => `/client/${chunk.name}`);
-
-	const service_worker = generate_service_worker({ chunk_files, src });
-	const index = generate_index(main_file);
-
-	const routes = create_routes({ src });
-
-	if (dev) { // TODO move this into calling code
-		fs.writeFileSync(path.join(dest, 'service-worker.js'), service_worker);
-		fs.writeFileSync(path.join(dest, 'index.html'), index);
-	}
-
-	return {
-		client: {
-			main_file,
-			chunk_files,
-
-			main: read(`${dest}${main_file}`),
-			chunks: chunk_files.reduce((lookup, file) => {
-				lookup[file] = read(`${dest}${file}`);
-				return lookup;
-			}, {}),
-
-			// TODO confusing that `routes` refers to an array *and* a lookup
-			routes: routes.reduce((lookup, route) => {
-				lookup[route.id] = `/client/${ensure_array(client_info.assetsByChunkName[route.id])[0]}`;
-				return lookup;
-			}, {}),
-
-			index,
-			service_worker
-		},
-
-		server: {
-			entry: path.resolve(dest, 'server', server_info.assetsByChunkName.main)
-		},
-
-		service_worker
-	};
-}
-
-function generate_service_worker({ chunk_files, src }) {
-	const assets = glob.sync('**', { cwd: 'assets', nodir: true });
-
-	const routes = create_routes({ src });
-
-	const route_code = `[${
-		routes
-			.filter(route => route.type === 'page')
-			.map(route => `{ pattern: ${route.pattern} }`)
-			.join(', ')
-	}]`;
-
-	return read('templates/service-worker.js')
-		.replace(/__timestamp__/g, Date.now())
-		.replace(/__assets__/g, JSON.stringify(assets))
-		.replace(/__shell__/g, JSON.stringify(chunk_files.concat('/index.html')))
-		.replace(/__routes__/g, route_code);
-}
-
-function generate_index(main_file) {
-	return render(200, {
-		styles: '',
-		head: '',
-		html: '<noscript>Please enable JavaScript!</noscript>',
-		main: main_file
-	});
-}
-
-function read(file) {
-	return fs.readFileSync(file, 'utf-8');
-}
--- a/src/core/create_compilers.ts
+++ b/src/core/create_compilers.ts
@@ -1,16 +1,29 @@
 import * as path from 'path';
 import relative from 'require-relative';

-export default function create_compilers() {
-	const webpack = relative('webpack', process.cwd());
+export default function create_compilers({ webpack }: { webpack: string }) {
+	const wp = relative('webpack', process.cwd());
+
+	const serviceworker_config = try_require(path.resolve(`${webpack}/service-worker.config.js`));

 	return {
-		client: webpack(
-			require(path.resolve('webpack.client.config.js'))
+		client: wp(
+			require(path.resolve(`${webpack}/client.config.js`))
 		),

-		server: webpack(
-			require(path.resolve('webpack.server.config.js'))
-		)
+		server: wp(
+			require(path.resolve(`${webpack}/server.config.js`))
+		),
+
+		serviceworker: serviceworker_config && wp(serviceworker_config)
 	};
+}
+
+function try_require(specifier: string) {
+	try {
+		return require(specifier);
+	} catch (err) {
+		if (err.code === 'MODULE_NOT_FOUND') return null;
+		throw err;
+	}
 }
--- a/src/core/create_manifests.ts
+++ b/src/core/create_manifests.ts
@@ -0,0 +1,125 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as glob from 'glob';
+import { posixify, write_if_changed } from './utils';
+import { dev, locations } from '../config';
+import { Route } from '../interfaces';
+
+export function create_main_manifests({ routes, dev_port }: {
+	routes: Route[];
+	dev_port?: number;
+}) {
+	const path_to_routes = path.relative(`${locations.app()}/manifest`, locations.routes());
+
+	const client_manifest = generate_client(routes, path_to_routes, dev_port);
+	const server_manifest = generate_server(routes, path_to_routes);
+
+	write_if_changed(`${locations.app()}/manifest/client.js`, client_manifest);
+	write_if_changed(`${locations.app()}/manifest/server.js`, server_manifest);
+}
+
+export function create_serviceworker_manifest({ routes, client_files }: {
+	routes: Route[];
+	client_files: string[];
+}) {
+	const assets = glob.sync('**', { cwd: 'assets', nodir: true });
+
+	let code = `
+		// This file is generated by Sapper — do not edit it!
+		export const timestamp = ${Date.now()};
+
+		export const assets = [\n\t${assets.map((x: string) => `"${x}"`).join(',\n\t')}\n];
+
+		export const shell = [\n\t${client_files.map((x: string) => `"${x}"`).join(',\n\t')}\n];
+
+		export const routes = [\n\t${routes.filter((r: Route) => r.type === 'page' && !/^_[45]xx$/.test(r.id)).map((r: Route) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
+	`.replace(/^\t\t/gm, '').trim();
+
+	write_if_changed(`${locations.app()}/manifest/service-worker.js`, code);
+}
+
+function generate_client(routes: Route[], path_to_routes: string, dev_port?: number) {
+	let code = `
+		// This file is generated by Sapper — do not edit it!
+		export const routes = [
+			${routes
+				.map(route => {
+					const page = route.handlers.find(({ type }) => type === 'page');
+
+					if (!page) {
+						return `{ pattern: ${route.pattern}, ignore: true }`;
+					}
+
+					const file = posixify(`${path_to_routes}/${page.file}`);
+
+					if (route.id === '_4xx' || route.id === '_5xx') {
+						return `{ error: '${route.id.slice(1)}', load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
+					}
+
+					const params = route.params.length === 0
+						? '{}'
+						: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
+
+					return `{ pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
+				})
+				.join(',\n\t')}
+		];`.replace(/^\t\t/gm, '').trim();
+
+	if (dev()) {
+		const sapper_dev_client = posixify(
+			path.resolve(__dirname, '../sapper-dev-client.js')
+		);
+
+		code += `
+
+			if (module.hot) {
+				import('${sapper_dev_client}').then(client => {
+					client.connect(${dev_port});
+				});
+			}`.replace(/^\t{3}/gm, '');
+	}
+
+	return code;
+}
+
+function generate_server(routes: Route[], path_to_routes: string) {
+	let code = `
+		// This file is generated by Sapper — do not edit it!
+		${routes
+			.map(route =>
+				route.handlers
+					.map(({ type, file }, index) => {
+						const module = posixify(`${path_to_routes}/${file}`);
+
+						return type === 'page'
+							? `import ${route.id}${index} from '${module}';`
+							: `import * as ${route.id}${index} from '${module}';`;
+					})
+					.join('\n')
+			)
+			.join('\n')}
+
+		export const routes = [
+			${routes
+				.map(route => {
+					const handlers = route.handlers
+						.map(({ type }, index) =>
+							`{ type: '${type}', module: ${route.id}${index} }`)
+						.join(', ');
+
+					if (route.id === '_4xx' || route.id === '_5xx') {
+						return `{ error: '${route.id.slice(1)}', handlers: [${handlers}] }`;
+					}
+
+					const params = route.params.length === 0
+						? '{}'
+						: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
+
+					return `{ id: '${route.id}', pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), handlers: [${handlers}] }`;
+				})
+				.join(',\n\t')
+			}
+		];`.replace(/^\t\t/gm, '').trim();
+
+	return code;
+}
--- a/src/core/create_routes.ts
+++ b/src/core/create_routes.ts
@@ -1,31 +1,97 @@
 import * as path from 'path';
 import glob from 'glob';
+import { locations } from '../config';
+import { Route } from '../interfaces';

-export default function create_routes({ src, files = glob.sync('**/*.+(html|js|mjs)', { cwd: src }) }) {
-	const routes = files
-		.map(file => {
-			if (/(^|\/|\\)_/.test(file)) return;
+export default function create_routes({ files } = { files: glob.sync('**/*.*', { cwd: locations.routes(), dot: true, nodir: true }) }) {
+	const routes: Route[] = files
+		.filter((file: string) => !/(^|\/|\\)_/.test(file))
+		.map((file: string) => {
+			if (/(^|\/|\\)(_|\.(?!well-known))/.test(file)) return;

-			const parts = file.replace(/\.(html|js|mjs)$/, '').split('/'); // glob output is always posix-style
+			if (/]\[/.test(file)) {
+				throw new Error(`Invalid route ${file} — parameters must be separated`);
+			}
+
+			const base = file.replace(/\.[^/.]+$/, '');
+			const parts = base.split('/'); // glob output is always posix-style
 			if (parts[parts.length - 1] === 'index') parts.pop();

+			return {
+				files: [file],
+				base,
+				parts
+			};
+		})
+		.filter(Boolean)
+		.filter((a, index, array) => {
+			const found = array.slice(index + 1).find(b => a.base === b.base);
+			if (found) found.files.push(...a.files);
+			return !found;
+		})
+		.sort((a, b) => {
+			if (a.parts[0] === '4xx' || a.parts[0] === '5xx') return -1;
+			if (b.parts[0] === '4xx' || b.parts[0] === '5xx') return 1;
+
+			const max = Math.max(a.parts.length, b.parts.length);
+
+			for (let i = 0; i < max; i += 1) {
+				const a_part = a.parts[i];
+				const b_part = b.parts[i];
+
+				if (!a_part) return -1;
+				if (!b_part) return 1;
+
+				const a_sub_parts = get_sub_parts(a_part);
+				const b_sub_parts = get_sub_parts(b_part);
+				const max = Math.max(a_sub_parts.length, b_sub_parts.length);
+
+				for (let i = 0; i < max; i += 1) {
+					const a_sub_part = a_sub_parts[i];
+					const b_sub_part = b_sub_parts[i];
+
+					if (!a_sub_part) return 1; // b is more specific, so goes first
+					if (!b_sub_part) return -1;
+
+					if (a_sub_part.dynamic !== b_sub_part.dynamic) {
+						return a_sub_part.dynamic ? 1 : -1;
+					}
+
+					if (!a_sub_part.dynamic && a_sub_part.content !== b_sub_part.content) {
+						return (
+							(b_sub_part.content.length - a_sub_part.content.length) ||
+							(a_sub_part.content < b_sub_part.content ? -1 : 1)
+						);
+					}
+				}
+			}
+
+			throw new Error(`The ${a.base} and ${b.base} routes clash`);
+		})
+		.map(({ files, base, parts }) => {
 			const id = (
 				parts.join('_').replace(/[[\]]/g, '$').replace(/^\d/, '_$&').replace(/[^a-zA-Z0-9_$]/g, '_')
 			 ) || '_';

-			const dynamic = parts
-				.filter(part => part[0] === '[')
-				.map(part => part.slice(1, -1));
+			const params: string[] = [];
+			const param_pattern = /\[([^\]]+)\]/g;
+			let match;
+			while (match = param_pattern.exec(base)) {
+				params.push(match[1]);
+			}

+			// TODO can we do all this with sub-parts? or does
+			// nesting make that impossible?
 			let pattern_string = '';
 			let i = parts.length;
 			let nested = true;
 			while (i--) {
-				const part = parts[i];
-				const dynamic = part[0] === '[';
+				const part = encodeURI(parts[i].normalize()).replace(/\?/g, '%3F').replace(/#/g, '%23').replace(/%5B/g, '[').replace(/%5D/g, ']');
+				const dynamic = ~part.indexOf('[');

 				if (dynamic) {
-					pattern_string = nested ? `(?:\\/([^/]+)${pattern_string})?` : `\\/([^/]+)${pattern_string}`;
+					const matcher = part.replace(param_pattern, `([^\/]+?)`);
+					pattern_string = nested ? `(?:\\/${matcher}${pattern_string})?` : `\\/${matcher}${pattern_string}`;
 				} else {
 					nested = false;
 					pattern_string = `\\/${part}${pattern_string}`;
@@ -34,58 +100,55 @@ export default function create_routes({ src, files = glob.sync('**/*.+(html|js|m

 			const pattern = new RegExp(`^${pattern_string}\\/?$`);

-			const test = url => pattern.test(url);
+			const test = (url: string) => pattern.test(url);

-			const exec = url => {
+			const exec = (url: string) => {
 				const match = pattern.exec(url);
 				if (!match) return;

-				const params = {};
-				dynamic.forEach((param, i) => {
-					params[param] = match[i + 1];
+				const result: Record<string, string> = {};
+				params.forEach((param, i) => {
+					result[param] = match[i + 1];
 				});

-				return params;
+				return result;
 			};

 			return {
 				id,
-				type: path.extname(file) === '.html' ? 'page' : 'route',
-				file,
+				handlers: files.map(file => ({
+					type: path.extname(file) === '.html' ? 'page' : 'route',
+					file
+				})).sort((a, b) => {
+					if (a.type === 'page' && b.type === 'route') {
+						return 1;
+					}
+
+					if (a.type === 'route' && b.type === 'page') {
+						return -1;
+					}
+
+					return 0;
+				}),
 				pattern,
 				test,
 				exec,
 				parts,
-				dynamic
+				params
 			};
-		})
-		.filter(Boolean)
-		.sort((a, b) => {
-			let same = true;
-
-			for (let i = 0; true; i += 1) {
-				const a_part = a.parts[i];
-				const b_part = b.parts[i];
-
-				if (!a_part && !b_part) {
-					if (same) throw new Error(`The ${a.file} and ${b.file} routes clash`);
-					return 0;
-				}
-
-				if (!a_part) return -1;
-				if (!b_part) return 1;
-
-				const a_is_dynamic = a_part[0] === '[';
-				const b_is_dynamic = b_part[0] === '[';
-
-				if (a_is_dynamic === b_is_dynamic) {
-					if (!a_is_dynamic && a_part !== b_part) same = false;
-					continue;
-				}
-
-				return a_is_dynamic ? 1 : -1;
-			}
 		});

 	return routes;
+}
+
+function get_sub_parts(part: string) {
+	return part.split(/[\[\]]/)
+		.map((content, i) => {
+			if (!content) return null;
+			return {
+				content,
+				dynamic: i % 2 === 1
+			};
+		})
+		.filter(Boolean);
 }
--- a/src/core/export.ts
+++ b/src/core/export.ts
@@ -1,104 +0,0 @@
-import * as path from 'path';
-import * as sander from 'sander';
-import express from 'express';
-import cheerio from 'cheerio';
-import fetch from 'node-fetch';
-import URL from 'url-parse';
-import create_assets from './create_assets.js';
-// import middleware from '../middleware/index.js';
-
-const { PORT = 3000, OUTPUT_DIR = 'dist' } = process.env;
-
-const origin = `http://localhost:${PORT}`;
-
-const app = express();
-
-function read_json(file) {
-	return JSON.parse(sander.readFileSync(file, { encoding: 'utf-8' }));
-}
-
-export default function exporter({ src, dest }) { // TODO dest is a terrible name in this context
-	// Prep output directory
-	sander.rimrafSync(OUTPUT_DIR);
-
-	const { service_worker } = create_assets({
-		src, dest,
-		dev: false,
-		client_info: read_json(path.join(dest, 'stats.client.json')),
-		server_info: read_json(path.join(dest, 'stats.server.json'))
-	});
-
-	sander.copydirSync('assets').to(OUTPUT_DIR);
-	sander.copydirSync(dest, 'client').to(OUTPUT_DIR, 'client');
-	sander.writeFileSync(OUTPUT_DIR, 'service-worker.js', service_worker);
-
-	// Intercept server route fetches
-	function save(res) {
-		res = res.clone();
-
-		return res.text().then(body => {
-			const { pathname } = new URL(res.url);
-			let dest = OUTPUT_DIR + pathname;
-
-			const type = res.headers.get('Content-Type');
-			if (type && type.startsWith('text/html')) dest += '/index.html';
-
-			sander.writeFileSync(dest, body);
-
-			return body;
-		});
-	}
-
-	global.fetch = (url, opts) => {
-		if (url[0] === '/') {
-			url = `http://localhost:${PORT}${url}`;
-
-			return fetch(url, opts)
-				.then(r => {
-					save(r);
-					return r;
-				});
-		}
-
-		return fetch(url, opts);
-	};
-
-	const middleware = require('./middleware')({ dev: false }); // TODO this is filthy
-	app.use(middleware);
-	const server = app.listen(PORT);
-
-	const seen = new Set();
-
-	function handle(url) {
-		if (url.origin !== origin) return;
-
-		if (seen.has(url.pathname)) return;
-		seen.add(url.pathname);
-
-		return fetch(url.href)
-			.then(r => {
-				save(r);
-
-				if (r.headers.get('Content-Type') === 'text/html') {
-					return r.text().then(body => {
-						const $ = cheerio.load(body);
-						const hrefs = [];
-
-						$('a[href]').each((i, $a) => {
-							hrefs.push($a.attribs.href);
-						});
-
-						return hrefs.reduce((promise, href) => {
-							return promise.then(() => handle(new URL(href, url.href)));
-						}, Promise.resolve());
-					});
-				}
-			})
-			.catch(err => {
-				console.error(`Error rendering ${url.pathname}: ${err.message}`);
-			});
-	}
-
-	return handle(new URL(origin)) // TODO all static routes
-		.then(() => server.close());
-}
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -1,11 +0,0 @@
-import { create_templates, render, stream } from './templates'; // TODO templates is an anomaly... fix post-#91
-
-export { default as build } from './build';
-export { default as export } from './export.js';
-
-export { default as create_app } from './create_app';
-export { default as create_assets } from './create_assets';
-export { default as create_compilers } from './create_compilers';
-export { default as create_routes } from './create_routes';
-
-export const templates = { create_templates, render, stream };
--- a/src/core/templates.ts
+++ b/src/core/templates.ts
@@ -1,115 +0,0 @@
-import * as fs from 'fs';
-import glob from 'glob';
-import chalk from 'chalk';
-import framer from 'code-frame';
-import { locate } from 'locate-character';
-
-let templates;
-
-function error(e) {
-	if (e.title) console.error(chalk.bold.red(e.title));
-	if (e.body) console.error(chalk.red(e.body));
-	if (e.url) console.error(chalk.cyan(e.url));
-	if (e.frame) console.error(chalk.grey(e.frame));
-
-	process.exit(1);
-}
-
-export function create_templates() {
-	templates = glob.sync('*.html', { cwd: 'templates' })
-		.map(file => {
-			const template = fs.readFileSync(`templates/${file}`, 'utf-8');
-			const status = file.replace('.html', '').toLowerCase();
-
-			if (!/^[0-9x]{3}$/.test(status)) {
-				error({
-					title: `templates/${file}`,
-					body: `Bad template — should be a valid status code like 404.html, or a wildcard like 2xx.html`
-				});
-			}
-
-			const index = template.indexOf('%sapper.main%');
-			if (index !== -1) {
-				// TODO remove this in a future version
-				const { line, column } = locate(template, index, { offsetLine: 1 });
-				const frame = framer(template, line, column);
-
-				error({
-					title: `templates/${file}`,
-					body: `<script src='%sapper.main%'> is unsupported — use %sapper.scripts% (without the <script> tag) instead`,
-					url: 'https://github.com/sveltejs/sapper/issues/86',
-					frame
-				});
-			}
-
-			const specificity = (
-				(status[0] === 'x' ? 0 : 4) +
-				(status[1] === 'x' ? 0 : 2) +
-				(status[2] === 'x' ? 0 : 1)
-			);
-
-			const pattern = new RegExp(`^${status.split('').map(d => d === 'x' ? '\\d' : d).join('')}$`);
-
-			return {
-				test: status => pattern.test(status),
-				specificity,
-				render: data => {
-					return template.replace(/%sapper\.(\w+)%/g, (match, key) => {
-						return key in data ? data[key] : '';
-					});
-				},
-				stream: (res, data) => {
-					let i = 0;
-
-					function stream_inner() {
-						if (i >= template.length) {
-							return;
-						}
-
-						const start = template.indexOf('%sapper', i);
-
-						if (start === -1) {
-							res.end(template.slice(i));
-							return;
-						}
-
-						res.write(template.slice(i, start));
-
-						const end = template.indexOf('%', start + 1);
-						if (end === -1) {
-							throw new Error(`Bad template`); // TODO validate ahead of time
-						}
-
-						const tag = template.slice(start + 1, end);
-						const match = /sapper\.(\w+)/.exec(tag);
-						if (!match || !(match[1] in data)) throw new Error(`Bad template`); // TODO ditto
-
-						return Promise.resolve(data[match[1]]).then(datamatch => {
-							res.write(datamatch);
-							i = end + 1;
-							return stream_inner();
-						});
-					}
-
-					return Promise.resolve().then(stream_inner);
-				}
-			};
-		})
-		.sort((a, b) => b.specificity - a.specificity);
-
-	return templates;
-}
-
-export function render(status, data) {
-	const template = templates.find(template => template.test(status));
-	if (template) return template.render(data);
-
-	return `Missing template for status code ${status}`;
-}
-
-export function stream(res, status, data) {
-	const template = templates.find(template => template.test(status));
-	if (template) return template.stream(res, data);
-
-	return `Missing template for status code ${status}`;
-}
--- a/src/core/utils.ts
+++ b/src/core/utils.ts
@@ -0,0 +1,25 @@
+import * as sander from 'sander';
+
+const previous_contents = new Map();
+
+export function write_if_changed(file: string, code: string) {
+	if (code !== previous_contents.get(file)) {
+		previous_contents.set(file, code);
+		sander.writeFileSync(file, code);
+		fudge_mtime(file);
+	}
+}
+
+export function posixify(file: string) {
+	return file.replace(/[/\\]/g, '/');
+}
+
+export function fudge_mtime(file: string) {
+	// need to fudge the mtime so that webpack doesn't go doolally
+	const { atime, mtime } = sander.statSync(file);
+	sander.utimesSync(
+		file,
+		new Date(atime.getTime() - 999999),
+		new Date(mtime.getTime() - 999999)
+	);
+}
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -0,0 +1,21 @@
+export type Route = {
+	id: string;
+	handlers: {
+		type: 'page' | 'route';
+		file: string;
+	}[];
+	pattern: RegExp;
+	test: (url: string) => boolean;
+	exec: (url: string) => Record<string, string>;
+	parts: string[];
+	params: string[];
+};
+
+export type Template = {
+	render: (data: Record<string, string>) => string;
+	stream: (req, res, data: Record<string, string | Promise<string>>) => void;
+};
+
+export type Store = {
+	get: () => any;
+};
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -0,0 +1,475 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { URL } from 'url';
+import { ClientRequest, ServerResponse } from 'http';
+import cookie from 'cookie';
+import devalue from 'devalue';
+import fetch from 'node-fetch';
+import { lookup } from './middleware/mime';
+import { locations, dev } from './config';
+import sourceMapSupport from 'source-map-support';
+
+sourceMapSupport.install();
+
+type RouteObject = {
+	id: string;
+	type: 'page' | 'route';
+	pattern: RegExp;
+	params: (match: RegExpMatchArray) => Record<string, string>;
+	module: Component;
+	error?: string;
+}
+
+type Handler = (req: Req, res: ServerResponse, next: () => void) => void;
+
+type Store = {
+	get: () => any
+};
+
+interface Req extends ClientRequest {
+	url: string;
+	baseUrl: string;
+	originalUrl: string;
+	method: string;
+	path: string;
+	params: Record<string, string>;
+	headers: Record<string, string>;
+}
+
+interface Component {
+	render: (data: any, opts: { store: Store }) => {
+		head: string;
+		css: { code: string, map: any };
+		html: string
+	},
+	preload: (data: any) => any | Promise<any>
+}
+
+export default function middleware({ App, routes, store }: {
+	App: Component,
+	routes: RouteObject[],
+	store: (req: Req) => Store
+}) {
+	if (!App) {
+		throw new Error(`As of 0.12, you must supply an App component to Sapper — see https://sapper.svelte.technology/guide#0-11-to-0-12 for more information`);
+	}
+
+	const output = locations.dest();
+
+	let emitted_basepath = false;
+
+	const middleware = compose_handlers([
+		(req: Req, res: ServerResponse, next: () => void) => {
+			if (req.baseUrl === undefined) {
+				req.baseUrl = req.originalUrl
+					? req.originalUrl.slice(0, -req.url.length)
+					: '';
+			}
+
+			if (!emitted_basepath && process.send) {
+				process.send({
+					__sapper__: true,
+					event: 'basepath',
+					basepath: req.baseUrl
+				});
+
+				emitted_basepath = true;
+			}
+
+			if (req.path === undefined) {
+				req.path = req.url.replace(/\?.*/, '');
+			}
+
+			next();
+		},
+
+		fs.existsSync(path.join(output, 'index.html')) && serve({
+			pathname: '/index.html',
+			cache_control: 'max-age=600'
+		}),
+
+		fs.existsSync(path.join(output, 'service-worker.js')) && serve({
+			pathname: '/service-worker.js',
+			cache_control: 'max-age=600'
+		}),
+
+		fs.existsSync(path.join(output, 'service-worker.js.map')) && serve({
+			pathname: '/service-worker.js.map',
+			cache_control: 'max-age=600'
+		}),
+
+		serve({
+			prefix: '/client/',
+			cache_control: 'max-age=31536000'
+		}),
+
+		get_route_handler(App, routes, store)
+	].filter(Boolean));
+
+	return middleware;
+}
+
+function serve({ prefix, pathname, cache_control }: {
+	prefix?: string,
+	pathname?: string,
+	cache_control: string
+}) {
+	const filter = pathname
+		? (req: Req) => req.path === pathname
+		: (req: Req) => req.path.startsWith(prefix);
+
+	const output = locations.dest();
+
+	const cache: Map<string, Buffer> = new Map();
+
+	const read = dev()
+		? (file: string) => fs.readFileSync(path.resolve(output, file))
+		: (file: string) => (cache.has(file) ? cache : cache.set(file, fs.readFileSync(path.resolve(output, file)))).get(file)
+
+	return (req: Req, res: ServerResponse, next: () => void) => {
+		if (filter(req)) {
+			const type = lookup(req.path);
+
+			try {
+				const data = read(req.path.slice(1));
+
+				res.setHeader('Content-Type', type);
+				res.setHeader('Cache-Control', cache_control);
+				res.end(data);
+			} catch (err) {
+				res.statusCode = 404;
+				res.end('not found');
+			}
+		} else {
+			next();
+		}
+	};
+}
+
+function get_route_handler(App: Component, routes: RouteObject[], store_getter: (req: Req) => Store) {
+	const output = locations.dest();
+
+	const get_chunks = dev()
+		? () => JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8'))
+		: (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8')));
+
+	const template = dev()
+		? () => fs.readFileSync(`${locations.app()}/template.html`, 'utf-8')
+		: (str => () => str)(fs.readFileSync(`${locations.dest()}/template.html`, 'utf-8'));
+
+	function handle_route(route: RouteObject, req: Req, res: ServerResponse) {
+		req.params = route.params(route.pattern.exec(req.path));
+
+		const handlers = route.handlers[Symbol.iterator]();
+
+		function next() {
+			const chunks: Record<string, string> = get_chunks();
+
+			try {
+				const { value: handler, done } = handlers.next();
+
+				if (done) {
+					handle_error(req, res, 404, 'Not found');
+					return;
+				}
+
+				const mod = handler.module;
+
+				if (handler.type === 'page') {
+					res.setHeader('Content-Type', 'text/html');
+
+					// preload main.js and current route
+					// TODO detect other stuff we can preload? images, CSS, fonts?
+					const link = []
+						.concat(chunks.main, chunks[route.id])
+						.filter(file => !file.match(/\.map$/))
+						.map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`)
+						.join(', ');
+
+					res.setHeader('Link', link);
+
+					const store = store_getter ? store_getter(req) : null;
+					const props = { params: req.params, query: req.query, path: req.path };
+
+					let redirect: { statusCode: number, location: string };
+					let error: { statusCode: number, message: Error | string };
+
+					Promise.resolve(
+						mod.preload ? mod.preload.call({
+							redirect: (statusCode: number, location: string) => {
+								redirect = { statusCode, location };
+							},
+							error: (statusCode: number, message: Error | string) => {
+								error = { statusCode, message };
+							},
+							fetch: (url: string, opts?: any) => {
+								const parsed = new URL(url, `http://127.0.0.1:${process.env.PORT}${req.baseUrl ? req.baseUrl + '/'  :''}`);
+
+								if (opts) {
+									opts = Object.assign({}, opts);
+
+									const include_cookies = (
+										opts.credentials === 'include' ||
+										opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
+									);
+
+									if (include_cookies) {
+										const cookies: Record<string, string> = {};
+										if (!opts.headers) opts.headers = {};
+
+										const str = []
+											.concat(
+												cookie.parse(req.headers.cookie || ''),
+												cookie.parse(opts.headers.cookie || ''),
+												cookie.parse(res.getHeader('Set-Cookie') || '')
+											)
+											.map(cookie => {
+												return Object.keys(cookie)
+													.map(name => `${name}=${encodeURIComponent(cookie[name])}`)
+													.join('; ');
+											})
+											.filter(Boolean)
+											.join(', ');
+
+										opts.headers.cookie = str;
+									}
+								}
+
+								return fetch(parsed.href, opts);
+							},
+						store
+						}, req) : {}
+					).catch(err => {
+						error = { statusCode: 500, message: err };
+					}).then(preloaded => {
+						if (redirect) {
+							res.statusCode = redirect.statusCode;
+							res.setHeader('Location', `${req.baseUrl}/${redirect.location}`);
+							res.end();
+
+							return;
+						}
+
+						if (error) {
+							handle_error(req, res, error.statusCode, error.message);
+							return;
+						}
+
+						const serialized = {
+							preloaded: mod.preload && try_serialize(preloaded),
+							store: store && try_serialize(store.get())
+						};
+						Object.assign(props, preloaded);
+
+						const { html, head, css } = App.render({ Page: mod, props }, {
+							store
+						});
+
+						let scripts = []
+							.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
+							.filter(file => !file.match(/\.map$/))
+							.map(file => `<script src='${req.baseUrl}/client/${file}'></script>`)
+							.join('');
+
+						let inline_script = `__SAPPER__={${[
+							`baseUrl: "${req.baseUrl}"`,
+							serialized.preloaded && `preloaded: ${serialized.preloaded}`,
+							serialized.store && `store: ${serialized.store}`
+						].filter(Boolean).join(',')}};`;
+
+						const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
+						if (has_service_worker) {
+							inline_script += `if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
+						}
+
+						const page = template()
+							.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
+							.replace('%sapper.scripts%', `<script>${inline_script}</script>${scripts}`)
+							.replace('%sapper.html%', html)
+							.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
+							.replace('%sapper.styles%', (css && css.code ? `<style>${css.code}</style>` : ''));
+
+						res.end(page);
+
+						if (process.send) {
+							process.send({
+								__sapper__: true,
+								event: 'file',
+								url: req.url,
+								method: req.method,
+								status: 200,
+								type: 'text/html',
+								body: page
+							});
+						}
+					});
+				}
+
+				else {
+					const method = req.method.toLowerCase();
+					// 'delete' cannot be exported from a module because it is a keyword,
+					// so check for 'del' instead
+					const method_export = method === 'delete' ? 'del' : method;
+					const handle_method = mod[method_export];
+					if (handle_method) {
+						if (process.env.SAPPER_EXPORT) {
+							const { write, end, setHeader } = res;
+							const chunks: any[] = [];
+							const headers: Record<string, string> = {};
+
+							// intercept data so that it can be exported
+							res.write = function(chunk: any) {
+								chunks.push(new Buffer(chunk));
+								write.apply(res, arguments);
+							};
+
+							res.setHeader = function(name: string, value: string) {
+								headers[name.toLowerCase()] = value;
+								setHeader.apply(res, arguments);
+							};
+
+							res.end = function(chunk?: any) {
+								if (chunk) chunks.push(new Buffer(chunk));
+								end.apply(res, arguments);
+
+								process.send({
+									__sapper__: true,
+									event: 'file',
+									url: req.url,
+									method: req.method,
+									status: res.statusCode,
+									type: headers['content-type'],
+									body: Buffer.concat(chunks).toString()
+								});
+							};
+						}
+
+						const handle_bad_result = (err?: Error) => {
+							if (err) {
+								console.error(err.stack);
+								res.statusCode = 500;
+								res.end(err.message);
+							} else {
+								process.nextTick(next);
+							}
+						};
+
+						try {
+							handle_method(req, res, handle_bad_result);
+						} catch (err) {
+							handle_bad_result(err);
+						}
+					} else {
+						// no matching handler for method
+						process.nextTick(next);
+					}
+				}
+			} catch (error) {
+				handle_error(req, res, 500, error);
+			}
+		}
+
+		next();
+	}
+
+	const not_found_route = routes.find((route: RouteObject) => route.error === '4xx');
+	const error_route = routes.find((route: RouteObject) => route.error === '5xx');
+
+	function handle_error(req: Req, res: ServerResponse, statusCode: number, message: Error | string) {
+		res.statusCode = statusCode;
+		res.setHeader('Content-Type', 'text/html');
+
+		const error = message instanceof Error ? message : new Error(message);
+
+		const not_found = statusCode >= 400 && statusCode < 500;
+
+		const route = not_found
+			? not_found_route
+			: error_route;
+
+		function render_page({ head, css, html }) {
+			const page = template()
+				.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
+				.replace('%sapper.scripts%', `<script>__SAPPER__={baseUrl: "${req.baseUrl}"}</script><script src='${req.baseUrl}/client/${get_chunks().main}'></script>`)
+				.replace('%sapper.html%', html)
+				.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
+				.replace('%sapper.styles%', (css && css.code ? `<style>${css.code}</style>` : ''));
+
+			res.end(page);
+		}
+
+		function handle_notfound() {
+			const title: string = not_found
+				? 'Not found'
+				: `Internal server error: ${error.message}`;
+
+			render_page({ head: '', css: null, html: title });
+		}
+
+		if (route) {
+			const handlers = route.handlers[Symbol.iterator]();
+
+			function next() {
+				const { value: handler, done } = handlers.next();
+
+				if (done) {
+					handle_notfound();
+				} else if (handler.type === 'page') {
+					render_page(handler.module.render({
+						status: statusCode,
+						error
+					}, {
+						store: store_getter && store_getter(req)
+					}));
+				} else {
+					const handle_method = mod[method_export];
+					if (handle_method) {
+						handle_method(req, res, next);
+					} else {
+						next();
+					}
+				}
+			}
+
+			next();
+		} else {
+			handle_notfound();
+		}
+	}
+
+	return function find_route(req: Req, res: ServerResponse) {
+		for (const route of routes) {
+			if (!route.error && route.pattern.test(req.path)) return handle_route(route, req, res);
+		}
+
+		handle_error(req, res, 404, 'Not found');
+	};
+}
+
+function compose_handlers(handlers: Handler[]) {
+	return (req: Req, res: ServerResponse, next: () => void) => {
+		let i = 0;
+		function go() {
+			const handler = handlers[i];
+
+			if (handler) {
+				handler(req, res, () => {
+					i += 1;
+					go();
+				});
+			} else {
+				next();
+			}
+		}
+
+		go();
+	};
+}
+
+function try_serialize(data: any) {
+	try {
+		return devalue(data);
+	} catch (err) {
+		return null;
+	}
+}
--- a/src/middleware/create_watcher.ts
+++ b/src/middleware/create_watcher.ts
@@ -1,103 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import chalk from 'chalk';
-import { create_app, create_assets, create_routes, templates } from 'sapper/core.js';
-import { dest } from '../config.js';
-
-function deferred() {
-	const d = {};
-
-	d.promise = new Promise((fulfil, reject) => {
-		d.fulfil = fulfil;
-		d.reject = reject;
-	});
-
-	return d;
-}
-
-export default function create_watcher({ compilers, dev, entry, src, onroutes }) {
-	const deferreds = {
-		client: deferred(),
-		server: deferred()
-	};
-
-	const invalidate = () => Promise.all([
-		deferreds.client.promise,
-		deferreds.server.promise
-	]).then(([client_stats, server_stats]) => {
-		const client_info = client_stats.toJson();
-		fs.writeFileSync(path.join(dest, 'stats.client.json'), JSON.stringify(client_info, null, '  '));
-
-		const server_info = server_stats.toJson();
-		fs.writeFileSync(path.join(dest, 'stats.server.json'), JSON.stringify(server_info, null, '  '));
-
-		return create_assets({
-			src, dest, dev,
-			client_info: client_stats.toJson(),
-			server_info: server_stats.toJson()
-		});
-	});
-
-	function watch_compiler(type) {
-		const compiler = compilers[type];
-
-		compiler.plugin('invalid', filename => {
-			console.log(chalk.cyan(`${type} bundle invalidated, file changed: ${chalk.bold(filename)}`));
-			deferreds[type] = deferred();
-			watcher.ready = invalidate();
-		});
-
-		compiler.plugin('failed', err => {
-			deferreds[type].reject(err);
-		});
-
-		return compiler.watch({}, (err, stats) => {
-			if (stats.hasErrors()) {
-				deferreds[type].reject(stats.toJson().errors[0]);
-			} else {
-				deferreds[type].fulfil(stats);
-			}
-		});
-	}
-
-	const chokidar = require('chokidar');
-
-	function watch_files(pattern, callback) {
-		const watcher = chokidar.watch(pattern, {
-			persistent: false
-		});
-
-		watcher.on('add', callback);
-		watcher.on('change', callback);
-		watcher.on('unlink', callback);
-	}
-
-	watch_files('routes/**/*.+(html|js|mjs)', () => {
-		const routes = create_routes({ src });
-		onroutes(routes);
-
-		create_app({ dev, entry, src }); // TODO this calls `create_routes` again, we should pass `routes` to `create_app` instead
-	});
-
-	watch_files('templates/main.js', () => {
-		create_app({ dev, entry, src });
-	});
-
-	watch_files('templates/**.html', () => {
-		templates.create_templates();
-		// TODO reload current page?
-	});
-
-	const watcher = {
-		ready: invalidate(),
-		client: watch_compiler('client'),
-		server: watch_compiler('server'),
-
-		close: () => {
-			watcher.client.close();
-			watcher.server.close();
-		}
-	};
-
-	return watcher;
-}
--- a/src/middleware/index.ts
+++ b/src/middleware/index.ts
@@ -1,286 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import mkdirp from 'mkdirp';
-import rimraf from 'rimraf';
-import serialize from 'serialize-javascript';
-import escape_html from 'escape-html';
-import { create_routes, templates, create_compilers, create_assets } from 'sapper/core.js';
-import { dest, entry, isDev, src } from '../config';
-import create_watcher from './create_watcher';
-
-const dev = isDev();
-
-function connect_dev() {
-	mkdirp.sync(dest);
-	rimraf.sync(path.join(dest, '**/*'));
-
-	const compilers = create_compilers();
-
-	let routes;
-
-	const watcher = create_watcher({
-		dev, entry, src,
-		compilers,
-		onroutes: _ => {
-			routes = _;
-		}
-	});
-
-	let asset_cache;
-
-	const middleware = compose_handlers([
-		require('webpack-hot-middleware')(compilers.client, {
-			reload: true,
-			path: '/__webpack_hmr',
-			heartbeat: 10 * 1000
-		}),
-
-		(req, res, next) => {
-			watcher.ready.then(cache => {
-				asset_cache = cache;
-				next();
-			});
-		},
-
-		set_req_pathname,
-
-		get_asset_handler({
-			filter: pathname => pathname === '/index.html',
-			type: 'text/html',
-			cache: 'max-age=600',
-			fn: () => asset_cache.client.index
-		}),
-
-		get_asset_handler({
-			filter: pathname => pathname === '/service-worker.js',
-			type: 'application/javascript',
-			cache: 'max-age=600',
-			fn: () => asset_cache.client.service_worker
-		}),
-
-		get_asset_handler({
-			filter: pathname => pathname.startsWith('/client/'),
-			type: 'application/javascript',
-			cache: 'max-age=31536000',
-			fn: pathname => asset_cache.client.chunks[pathname]
-		}),
-
-		get_route_handler(() => asset_cache, () => routes),
-
-		get_not_found_handler(() => asset_cache)
-	]);
-
-	middleware.close = () => {
-		watcher.close();
-		// TODO shut down chokidar
-	};
-
-	return middleware;
-}
-
-function connect_prod() {
-	const asset_cache = create_assets({
-		src, dest,
-		dev: false,
-		client_info: read_json(path.join(dest, 'stats.client.json')),
-		server_info: read_json(path.join(dest, 'stats.server.json'))
-	});
-
-	const routes = create_routes({ src }); // TODO rename update
-
-	const middleware = compose_handlers([
-		set_req_pathname,
-
-		get_asset_handler({
-			filter: pathname => pathname === '/index.html',
-			type: 'text/html',
-			cache: 'max-age=600',
-			fn: () => asset_cache.client.index
-		}),
-
-		get_asset_handler({
-			filter: pathname => pathname === '/service-worker.js',
-			type: 'application/javascript',
-			cache: 'max-age=600',
-			fn: () => asset_cache.client.service_worker
-		}),
-
-		get_asset_handler({
-			filter: pathname => pathname.startsWith('/client/'),
-			type: 'application/javascript',
-			cache: 'max-age=31536000',
-			fn: pathname => asset_cache.client.chunks[pathname]
-		}),
-
-		get_route_handler(() => asset_cache, () => routes),
-
-		get_not_found_handler(() => asset_cache)
-	]);
-
-	// here for API consistency between dev, and prod, but
-	// doesn't actually need to do anything
-	middleware.close = () => {};
-
-	return middleware;
-}
-
-export default function connect({ dev: _dev = dev } = {}) {
-	return _dev ? connect_dev() : connect_prod();
-}
-
-function set_req_pathname(req, res, next) {
-	req.pathname = req.url.replace(/\?.*/, '');
-	next();
-}
-
-function get_asset_handler(opts) {
-	return (req, res, next) => {
-		if (!opts.filter(req.pathname)) return next();
-
-		res.setHeader('Content-Type', opts.type);
-		res.setHeader('Cache-Control', opts.cache);
-
-		res.end(opts.fn(req.pathname));
-	};
-}
-
-const resolved = Promise.resolve();
-
-function get_route_handler(get_assets, get_routes) {
-	function handle_route(route, req, res, next, { client, server }) {
-		req.params = route.exec(req.pathname);
-
-		const mod = require(server.entry)[route.id];
-
-		if (route.type === 'page') {
-			// for page routes, we're going to serve some HTML
-			res.setHeader('Content-Type', 'text/html');
-
-			// preload main.js and current route
-			// TODO detect other stuff we can preload? images, CSS, fonts?
-			res.setHeader('Link', `<${client.main_file}>;rel="preload";as="script", <${client.routes[route.id]}>;rel="preload";as="script"`);
-
-			const data = { params: req.params, query: req.query };
-
-			if (mod.preload) {
-				const promise = Promise.resolve(mod.preload(req)).then(preloaded => {
-					const serialized = try_serialize(preloaded);
-					Object.assign(data, preloaded);
-
-					return { rendered: mod.render(data), serialized };
-				});
-
-				return templates.stream(res, 200, {
-					scripts: promise.then(({ serialized }) => {
-						const main = `<script src='${client.main_file}'></script>`;
-
-						if (serialized) {
-							return `<script>__SAPPER__ = { preloaded: ${serialized} };</script>${main}`;
-						}
-
-						return main;
-					}),
-					html: promise.then(({ rendered }) => rendered.html),
-					head: promise.then(({ rendered }) => `<noscript id='sapper-head-start'></noscript>${rendered.head}<noscript id='sapper-head-end'></noscript>`),
-					styles: promise.then(({ rendered }) => (rendered.css && rendered.css.code ? `<style>${rendered.css.code}</style>` : ''))
-				});
-			} else {
-				const { html, head, css } = mod.render(data);
-
-				const page = templates.render(200, {
-					scripts: `<script src='${client.main_file}'></script>`,
-					html,
-					head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
-					styles: (css && css.code ? `<style>${css.code}</style>` : '')
-				});
-
-				res.end(page);
-			}
-		}
-
-		else {
-			const method = req.method.toLowerCase();
-			// 'delete' cannot be exported from a module because it is a keyword,
-			// so check for 'del' instead
-			const method_export = method === 'delete' ? 'del' : method;
-			const handler = mod[method_export];
-			if (handler) {
-				handler(req, res, next);
-			} else {
-				// no matching handler for method — 404
-				next();
-			}
-		}
-	}
-
-	return function find_route(req, res, next) {
-		const url = req.pathname;
-
-		resolved
-			.then(() => {
-				const routes = get_routes();
-				for (const route of routes) {
-					if (route.test(url)) return handle_route(route, req, res, next, get_assets());
-				}
-
-				// no matching route — 404
-				next();
-			})
-			.catch(err => {
-				res.statusCode = 500;
-				res.end(templates.render(500, {
-					title: (err && err.name) || 'Internal server error',
-					url,
-					error: escape_html(err && (err.details || err.message || err) || 'Unknown error'),
-					stack: err && err.stack.split('\n').slice(1).join('\n')
-				}));
-			});
-	};
-}
-
-function get_not_found_handler(fn) {
-	return function handle_not_found(req, res) {
-		const asset_cache = fn();
-
-		res.statusCode = 404;
-		res.end(templates.render(404, {
-			title: 'Not found',
-			status: 404,
-			method: req.method,
-			scripts: `<script src='${asset_cache.client.main_file}'></script>`,
-			url: req.url
-		}));
-	};
-}
-
-function compose_handlers(handlers) {
-	return (req, res, next) => {
-		let i = 0;
-		function go() {
-			const handler = handlers[i];
-
-			if (handler) {
-				handler(req, res, () => {
-					i += 1;
-					go();
-				});
-			} else {
-				next();
-			}
-		}
-
-		go();
-	};
-}
-
-function read_json(file) {
-	return JSON.parse(fs.readFileSync(file, 'utf-8'));
-}
-
-function try_serialize(data) {
-	try {
-		return serialize(data);
-	} catch (err) {
-		return null;
-	}
-}
--- a/src/middleware/mime-types.md
+++ b/src/middleware/mime-types.md
@@ -0,0 +1,767 @@
+application/andrew-inset			ez
+application/applixware				aw
+application/atom+xml				atom
+application/atomcat+xml				atomcat
+application/atomsvc+xml				atomsvc
+application/ccxml+xml				ccxml
+application/cdmi-capability			cdmia
+application/cdmi-container			cdmic
+application/cdmi-domain				cdmid
+application/cdmi-object				cdmio
+application/cdmi-queue				cdmiq
+application/cu-seeme				cu
+application/davmount+xml			davmount
+application/docbook+xml				dbk
+application/dssc+der				dssc
+application/dssc+xml				xdssc
+application/ecmascript				ecma
+application/emma+xml				emma
+application/epub+zip				epub
+application/exi					exi
+application/font-tdpfr				pfr
+application/gml+xml				gml
+application/gpx+xml				gpx
+application/gxf					gxf
+application/hyperstudio				stk
+application/inkml+xml				ink inkml
+application/ipfix				ipfix
+application/java-archive			jar
+application/java-serialized-object		ser
+application/java-vm				class
+application/javascript				js
+application/json				json map
+application/jsonml+json				jsonml
+application/lost+xml				lostxml
+application/mac-binhex40			hqx
+application/mac-compactpro			cpt
+application/mads+xml				mads
+application/marc				mrc
+application/marcxml+xml				mrcx
+application/mathematica				ma nb mb
+application/mathml+xml				mathml
+application/mbox				mbox
+application/mediaservercontrol+xml		mscml
+application/metalink+xml			metalink
+application/metalink4+xml			meta4
+application/mets+xml				mets
+application/mods+xml				mods
+application/mp21				m21 mp21
+application/mp4					mp4s
+application/msword				doc dot
+application/mxf					mxf
+application/octet-stream	bin dms lrf mar so dist distz pkg bpk dump elc deploy
+application/oda					oda
+application/oebps-package+xml			opf
+application/ogg					ogx
+application/omdoc+xml				omdoc
+application/onenote				onetoc onetoc2 onetmp onepkg
+application/oxps				oxps
+application/patch-ops-error+xml			xer
+application/pdf					pdf
+application/pgp-encrypted			pgp
+application/pgp-signature			asc sig
+application/pics-rules				prf
+application/pkcs10				p10
+application/pkcs7-mime				p7m p7c
+application/pkcs7-signature			p7s
+application/pkcs8				p8
+application/pkix-attr-cert			ac
+application/pkix-cert				cer
+application/pkix-crl				crl
+application/pkix-pkipath			pkipath
+application/pkixcmp				pki
+application/pls+xml				pls
+application/postscript				ai eps ps
+application/prs.cww				cww
+application/pskc+xml				pskcxml
+application/rdf+xml				rdf
+application/reginfo+xml				rif
+application/relax-ng-compact-syntax		rnc
+application/resource-lists+xml			rl
+application/resource-lists-diff+xml		rld
+application/rls-services+xml			rs
+application/rpki-ghostbusters			gbr
+application/rpki-manifest			mft
+application/rpki-roa				roa
+application/rsd+xml				rsd
+application/rss+xml				rss
+application/rtf					rtf
+application/sbml+xml				sbml
+application/scvp-cv-request			scq
+application/scvp-cv-response			scs
+application/scvp-vp-request			spq
+application/scvp-vp-response			spp
+application/sdp					sdp
+application/set-payment-initiation		setpay
+application/set-registration-initiation		setreg
+application/shf+xml				shf
+application/smil+xml				smi smil
+application/sparql-query			rq
+application/sparql-results+xml			srx
+application/srgs				gram
+application/srgs+xml				grxml
+application/sru+xml				sru
+application/ssdl+xml				ssdl
+application/ssml+xml				ssml
+application/tei+xml				tei teicorpus
+application/thraud+xml				tfi
+application/timestamped-data			tsd
+application/vnd.3gpp.pic-bw-large		plb
+application/vnd.3gpp.pic-bw-small		psb
+application/vnd.3gpp.pic-bw-var			pvb
+application/vnd.3gpp2.tcap			tcap
+application/vnd.3m.post-it-notes		pwn
+application/vnd.accpac.simply.aso		aso
+application/vnd.accpac.simply.imp		imp
+application/vnd.acucobol			acu
+application/vnd.acucorp				atc acutc
+application/vnd.adobe.air-application-installer-package+zip	air
+application/vnd.adobe.formscentral.fcdt		fcdt
+application/vnd.adobe.fxp			fxp fxpl
+application/vnd.adobe.xdp+xml			xdp
+application/vnd.adobe.xfdf			xfdf
+application/vnd.ahead.space			ahead
+application/vnd.airzip.filesecure.azf		azf
+application/vnd.airzip.filesecure.azs		azs
+application/vnd.amazon.ebook			azw
+application/vnd.americandynamics.acc		acc
+application/vnd.amiga.ami			ami
+application/vnd.android.package-archive		apk
+application/vnd.anser-web-certificate-issue-initiation	cii
+application/vnd.anser-web-funds-transfer-initiation	fti
+application/vnd.antix.game-component		atx
+application/vnd.apple.installer+xml		mpkg
+application/vnd.apple.mpegurl			m3u8
+application/vnd.aristanetworks.swi		swi
+application/vnd.astraea-software.iota		iota
+application/vnd.audiograph			aep
+application/vnd.blueice.multipass		mpm
+application/vnd.bmi				bmi
+application/vnd.businessobjects			rep
+application/vnd.chemdraw+xml			cdxml
+application/vnd.chipnuts.karaoke-mmd		mmd
+application/vnd.cinderella			cdy
+application/vnd.claymore			cla
+application/vnd.cloanto.rp9			rp9
+application/vnd.clonk.c4group			c4g c4d c4f c4p c4u
+application/vnd.cluetrust.cartomobile-config		c11amc
+application/vnd.cluetrust.cartomobile-config-pkg	c11amz
+application/vnd.commonspace			csp
+application/vnd.contact.cmsg			cdbcmsg
+application/vnd.cosmocaller			cmc
+application/vnd.crick.clicker			clkx
+application/vnd.crick.clicker.keyboard		clkk
+application/vnd.crick.clicker.palette		clkp
+application/vnd.crick.clicker.template		clkt
+application/vnd.crick.clicker.wordbank		clkw
+application/vnd.criticaltools.wbs+xml		wbs
+application/vnd.ctc-posml			pml
+application/vnd.cups-ppd			ppd
+application/vnd.curl.car			car
+application/vnd.curl.pcurl			pcurl
+application/vnd.dart				dart
+application/vnd.data-vision.rdz			rdz
+application/vnd.dece.data			uvf uvvf uvd uvvd
+application/vnd.dece.ttml+xml			uvt uvvt
+application/vnd.dece.unspecified		uvx uvvx
+application/vnd.dece.zip			uvz uvvz
+application/vnd.denovo.fcselayout-link		fe_launch
+application/vnd.dna				dna
+application/vnd.dolby.mlp			mlp
+application/vnd.dpgraph				dpg
+application/vnd.dreamfactory			dfac
+application/vnd.ds-keypoint			kpxx
+application/vnd.dvb.ait				ait
+application/vnd.dvb.service			svc
+application/vnd.dynageo				geo
+application/vnd.ecowin.chart			mag
+application/vnd.enliven				nml
+application/vnd.epson.esf			esf
+application/vnd.epson.msf			msf
+application/vnd.epson.quickanime		qam
+application/vnd.epson.salt			slt
+application/vnd.epson.ssf			ssf
+application/vnd.eszigno3+xml			es3 et3
+application/vnd.ezpix-album			ez2
+application/vnd.ezpix-package			ez3
+application/vnd.fdf				fdf
+application/vnd.fdsn.mseed			mseed
+application/vnd.fdsn.seed			seed dataless
+application/vnd.flographit			gph
+application/vnd.fluxtime.clip			ftc
+application/vnd.framemaker			fm frame maker book
+application/vnd.frogans.fnc			fnc
+application/vnd.frogans.ltf			ltf
+application/vnd.fsc.weblaunch			fsc
+application/vnd.fujitsu.oasys			oas
+application/vnd.fujitsu.oasys2			oa2
+application/vnd.fujitsu.oasys3			oa3
+application/vnd.fujitsu.oasysgp			fg5
+application/vnd.fujitsu.oasysprs		bh2
+application/vnd.fujixerox.ddd			ddd
+application/vnd.fujixerox.docuworks		xdw
+application/vnd.fujixerox.docuworks.binder	xbd
+application/vnd.fuzzysheet			fzs
+application/vnd.genomatix.tuxedo		txd
+application/vnd.geogebra.file			ggb
+application/vnd.geogebra.tool			ggt
+application/vnd.geometry-explorer		gex gre
+application/vnd.geonext				gxt
+application/vnd.geoplan				g2w
+application/vnd.geospace			g3w
+application/vnd.gmx				gmx
+application/vnd.google-earth.kml+xml		kml
+application/vnd.google-earth.kmz		kmz
+application/vnd.grafeq				gqf gqs
+application/vnd.groove-account			gac
+application/vnd.groove-help			ghf
+application/vnd.groove-identity-message		gim
+application/vnd.groove-injector			grv
+application/vnd.groove-tool-message		gtm
+application/vnd.groove-tool-template		tpl
+application/vnd.groove-vcard			vcg
+application/vnd.hal+xml				hal
+application/vnd.handheld-entertainment+xml	zmm
+application/vnd.hbci				hbci
+application/vnd.hhe.lesson-player		les
+application/vnd.hp-hpgl				hpgl
+application/vnd.hp-hpid				hpid
+application/vnd.hp-hps				hps
+application/vnd.hp-jlyt				jlt
+application/vnd.hp-pcl				pcl
+application/vnd.hp-pclxl			pclxl
+application/vnd.hydrostatix.sof-data		sfd-hdstx
+application/vnd.ibm.minipay			mpy
+application/vnd.ibm.modcap			afp listafp list3820
+application/vnd.ibm.rights-management		irm
+application/vnd.ibm.secure-container		sc
+application/vnd.iccprofile			icc icm
+application/vnd.igloader			igl
+application/vnd.immervision-ivp			ivp
+application/vnd.immervision-ivu			ivu
+application/vnd.insors.igm			igm
+application/vnd.intercon.formnet		xpw xpx
+application/vnd.intergeo			i2g
+application/vnd.intu.qbo			qbo
+application/vnd.intu.qfx			qfx
+application/vnd.ipunplugged.rcprofile		rcprofile
+application/vnd.irepository.package+xml		irp
+application/vnd.is-xpr				xpr
+application/vnd.isac.fcs			fcs
+application/vnd.jam				jam
+application/vnd.jcp.javame.midlet-rms		rms
+application/vnd.jisp				jisp
+application/vnd.joost.joda-archive		joda
+application/vnd.kahootz				ktz ktr
+application/vnd.kde.karbon			karbon
+application/vnd.kde.kchart			chrt
+application/vnd.kde.kformula			kfo
+application/vnd.kde.kivio			flw
+application/vnd.kde.kontour			kon
+application/vnd.kde.kpresenter			kpr kpt
+application/vnd.kde.kspread			ksp
+application/vnd.kde.kword			kwd kwt
+application/vnd.kenameaapp			htke
+application/vnd.kidspiration			kia
+application/vnd.kinar				kne knp
+application/vnd.koan				skp skd skt skm
+application/vnd.kodak-descriptor		sse
+application/vnd.las.las+xml			lasxml
+application/vnd.llamagraphics.life-balance.desktop	lbd
+application/vnd.llamagraphics.life-balance.exchange+xml	lbe
+application/vnd.lotus-1-2-3			123
+application/vnd.lotus-approach			apr
+application/vnd.lotus-freelance			pre
+application/vnd.lotus-notes			nsf
+application/vnd.lotus-organizer			org
+application/vnd.lotus-screencam			scm
+application/vnd.lotus-wordpro			lwp
+application/vnd.macports.portpkg		portpkg
+application/vnd.mcd				mcd
+application/vnd.medcalcdata			mc1
+application/vnd.mediastation.cdkey		cdkey
+application/vnd.mfer				mwf
+application/vnd.mfmp				mfm
+application/vnd.micrografx.flo			flo
+application/vnd.micrografx.igx			igx
+application/vnd.mif				mif
+application/vnd.mobius.daf			daf
+application/vnd.mobius.dis			dis
+application/vnd.mobius.mbk			mbk
+application/vnd.mobius.mqy			mqy
+application/vnd.mobius.msl			msl
+application/vnd.mobius.plc			plc
+application/vnd.mobius.txf			txf
+application/vnd.mophun.application		mpn
+application/vnd.mophun.certificate		mpc
+application/vnd.mozilla.xul+xml			xul
+application/vnd.ms-artgalry			cil
+application/vnd.ms-cab-compressed		cab
+application/vnd.ms-excel			xls xlm xla xlc xlt xlw
+application/vnd.ms-excel.addin.macroenabled.12		xlam
+application/vnd.ms-excel.sheet.binary.macroenabled.12	xlsb
+application/vnd.ms-excel.sheet.macroenabled.12		xlsm
+application/vnd.ms-excel.template.macroenabled.12	xltm
+application/vnd.ms-fontobject			eot
+application/vnd.ms-htmlhelp			chm
+application/vnd.ms-ims				ims
+application/vnd.ms-lrm				lrm
+application/vnd.ms-officetheme			thmx
+application/vnd.ms-pki.seccat			cat
+application/vnd.ms-pki.stl			stl
+application/vnd.ms-powerpoint			ppt pps pot
+application/vnd.ms-powerpoint.addin.macroenabled.12		ppam
+application/vnd.ms-powerpoint.presentation.macroenabled.12	pptm
+application/vnd.ms-powerpoint.slide.macroenabled.12		sldm
+application/vnd.ms-powerpoint.slideshow.macroenabled.12		ppsm
+application/vnd.ms-powerpoint.template.macroenabled.12		potm
+application/vnd.ms-project			mpp mpt
+application/vnd.ms-word.document.macroenabled.12	docm
+application/vnd.ms-word.template.macroenabled.12	dotm
+application/vnd.ms-works			wps wks wcm wdb
+application/vnd.ms-wpl				wpl
+application/vnd.ms-xpsdocument			xps
+application/vnd.mseq				mseq
+application/vnd.musician			mus
+application/vnd.muvee.style			msty
+application/vnd.mynfc				taglet
+application/vnd.neurolanguage.nlu		nlu
+application/vnd.nitf				ntf nitf
+application/vnd.noblenet-directory		nnd
+application/vnd.noblenet-sealer			nns
+application/vnd.noblenet-web			nnw
+application/vnd.nokia.n-gage.data		ngdat
+application/vnd.nokia.n-gage.symbian.install	n-gage
+application/vnd.nokia.radio-preset		rpst
+application/vnd.nokia.radio-presets		rpss
+application/vnd.novadigm.edm			edm
+application/vnd.novadigm.edx			edx
+application/vnd.novadigm.ext			ext
+application/vnd.oasis.opendocument.chart		odc
+application/vnd.oasis.opendocument.chart-template	otc
+application/vnd.oasis.opendocument.database		odb
+application/vnd.oasis.opendocument.formula		odf
+application/vnd.oasis.opendocument.formula-template	odft
+application/vnd.oasis.opendocument.graphics		odg
+application/vnd.oasis.opendocument.graphics-template	otg
+application/vnd.oasis.opendocument.image		odi
+application/vnd.oasis.opendocument.image-template	oti
+application/vnd.oasis.opendocument.presentation		odp
+application/vnd.oasis.opendocument.presentation-template	otp
+application/vnd.oasis.opendocument.spreadsheet		ods
+application/vnd.oasis.opendocument.spreadsheet-template	ots
+application/vnd.oasis.opendocument.text			odt
+application/vnd.oasis.opendocument.text-master		odm
+application/vnd.oasis.opendocument.text-template	ott
+application/vnd.oasis.opendocument.text-web		oth
+application/vnd.olpc-sugar			xo
+application/vnd.oma.dd2+xml			dd2
+application/vnd.openofficeorg.extension		oxt
+application/vnd.openxmlformats-officedocument.presentationml.presentation	pptx
+application/vnd.openxmlformats-officedocument.presentationml.slide	sldx
+application/vnd.openxmlformats-officedocument.presentationml.slideshow	ppsx
+application/vnd.openxmlformats-officedocument.presentationml.template	potx
+application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	xlsx
+application/vnd.openxmlformats-officedocument.spreadsheetml.template	xltx
+application/vnd.openxmlformats-officedocument.wordprocessingml.document	docx
+application/vnd.openxmlformats-officedocument.wordprocessingml.template	dotx
+application/vnd.osgeo.mapguide.package		mgp
+application/vnd.osgi.dp				dp
+application/vnd.osgi.subsystem			esa
+application/vnd.palm				pdb pqa oprc
+application/vnd.pawaafile			paw
+application/vnd.pg.format			str
+application/vnd.pg.osasli			ei6
+application/vnd.picsel				efif
+application/vnd.pmi.widget			wg
+application/vnd.pocketlearn			plf
+application/vnd.powerbuilder6			pbd
+application/vnd.previewsystems.box		box
+application/vnd.proteus.magazine		mgz
+application/vnd.publishare-delta-tree		qps
+application/vnd.pvi.ptid1			ptid
+application/vnd.quark.quarkxpress		qxd qxt qwd qwt qxl qxb
+application/vnd.realvnc.bed			bed
+application/vnd.recordare.musicxml		mxl
+application/vnd.recordare.musicxml+xml		musicxml
+application/vnd.rig.cryptonote			cryptonote
+application/vnd.rim.cod				cod
+application/vnd.rn-realmedia			rm
+application/vnd.rn-realmedia-vbr		rmvb
+application/vnd.route66.link66+xml		link66
+application/vnd.sailingtracker.track		st
+application/vnd.seemail				see
+application/vnd.sema				sema
+application/vnd.semd				semd
+application/vnd.semf				semf
+application/vnd.shana.informed.formdata		ifm
+application/vnd.shana.informed.formtemplate	itp
+application/vnd.shana.informed.interchange	iif
+application/vnd.shana.informed.package		ipk
+application/vnd.simtech-mindmapper		twd twds
+application/vnd.smaf				mmf
+application/vnd.smart.teacher			teacher
+application/vnd.solent.sdkm+xml			sdkm sdkd
+application/vnd.spotfire.dxp			dxp
+application/vnd.spotfire.sfs			sfs
+application/vnd.stardivision.calc		sdc
+application/vnd.stardivision.draw		sda
+application/vnd.stardivision.impress		sdd
+application/vnd.stardivision.math		smf
+application/vnd.stardivision.writer		sdw vor
+application/vnd.stardivision.writer-global	sgl
+application/vnd.stepmania.package		smzip
+application/vnd.stepmania.stepchart		sm
+application/vnd.sun.xml.calc			sxc
+application/vnd.sun.xml.calc.template		stc
+application/vnd.sun.xml.draw			sxd
+application/vnd.sun.xml.draw.template		std
+application/vnd.sun.xml.impress			sxi
+application/vnd.sun.xml.impress.template	sti
+application/vnd.sun.xml.math			sxm
+application/vnd.sun.xml.writer			sxw
+application/vnd.sun.xml.writer.global		sxg
+application/vnd.sun.xml.writer.template		stw
+application/vnd.sus-calendar			sus susp
+application/vnd.svd				svd
+application/vnd.symbian.install			sis sisx
+application/vnd.syncml+xml			xsm
+application/vnd.syncml.dm+wbxml			bdm
+application/vnd.syncml.dm+xml			xdm
+application/vnd.tao.intent-module-archive	tao
+application/vnd.tcpdump.pcap			pcap cap dmp
+application/vnd.tmobile-livetv			tmo
+application/vnd.trid.tpt			tpt
+application/vnd.triscape.mxs			mxs
+application/vnd.trueapp				tra
+application/vnd.ufdl				ufd ufdl
+application/vnd.uiq.theme			utz
+application/vnd.umajin				umj
+application/vnd.unity				unityweb
+application/vnd.uoml+xml			uoml
+application/vnd.vcx				vcx
+application/vnd.visio				vsd vst vss vsw
+application/vnd.visionary			vis
+application/vnd.vsf				vsf
+application/vnd.wap.wbxml			wbxml
+application/vnd.wap.wmlc			wmlc
+application/vnd.wap.wmlscriptc			wmlsc
+application/vnd.webturbo			wtb
+application/vnd.wolfram.player			nbp
+application/vnd.wordperfect			wpd
+application/vnd.wqd				wqd
+application/vnd.wt.stf				stf
+application/vnd.xara				xar
+application/vnd.xfdl				xfdl
+application/vnd.yamaha.hv-dic			hvd
+application/vnd.yamaha.hv-script		hvs
+application/vnd.yamaha.hv-voice			hvp
+application/vnd.yamaha.openscoreformat			osf
+application/vnd.yamaha.openscoreformat.osfpvg+xml	osfpvg
+application/vnd.yamaha.smaf-audio		saf
+application/vnd.yamaha.smaf-phrase		spf
+application/vnd.yellowriver-custom-menu		cmp
+application/vnd.zul				zir zirz
+application/vnd.zzazz.deck+xml			zaz
+application/voicexml+xml			vxml
+application/widget				wgt
+application/winhlp				hlp
+application/wsdl+xml				wsdl
+application/wspolicy+xml			wspolicy
+application/x-7z-compressed			7z
+application/x-abiword				abw
+application/x-ace-compressed			ace
+application/x-apple-diskimage			dmg
+application/x-authorware-bin			aab x32 u32 vox
+application/x-authorware-map			aam
+application/x-authorware-seg			aas
+application/x-bcpio				bcpio
+application/x-bittorrent			torrent
+application/x-blorb				blb blorb
+application/x-bzip				bz
+application/x-bzip2				bz2 boz
+application/x-cbr				cbr cba cbt cbz cb7
+application/x-cdlink				vcd
+application/x-cfs-compressed			cfs
+application/x-chat				chat
+application/x-chess-pgn				pgn
+application/x-conference			nsc
+application/x-cpio				cpio
+application/x-csh				csh
+application/x-debian-package			deb udeb
+application/x-dgc-compressed			dgc
+application/x-director			dir dcr dxr cst cct cxt w3d fgd swa
+application/x-doom				wad
+application/x-dtbncx+xml			ncx
+application/x-dtbook+xml			dtb
+application/x-dtbresource+xml			res
+application/x-dvi				dvi
+application/x-envoy				evy
+application/x-eva				eva
+application/x-font-bdf				bdf
+application/x-font-ghostscript			gsf
+application/x-font-linux-psf			psf
+application/x-font-pcf				pcf
+application/x-font-snf				snf
+application/x-font-type1			pfa pfb pfm afm
+application/x-freearc				arc
+application/x-futuresplash			spl
+application/x-gca-compressed			gca
+application/x-glulx				ulx
+application/x-gnumeric				gnumeric
+application/x-gramps-xml			gramps
+application/x-gtar				gtar
+application/x-hdf				hdf
+application/x-install-instructions		install
+application/x-iso9660-image			iso
+application/x-java-jnlp-file			jnlp
+application/x-latex				latex
+application/x-lzh-compressed			lzh lha
+application/x-mie				mie
+application/x-mobipocket-ebook			prc mobi
+application/x-ms-application			application
+application/x-ms-shortcut			lnk
+application/x-ms-wmd				wmd
+application/x-ms-wmz				wmz
+application/x-ms-xbap				xbap
+application/x-msaccess				mdb
+application/x-msbinder				obd
+application/x-mscardfile			crd
+application/x-msclip				clp
+application/x-msdownload			exe dll com bat msi
+application/x-msmediaview			mvb m13 m14
+application/x-msmetafile			wmf wmz emf emz
+application/x-msmoney				mny
+application/x-mspublisher			pub
+application/x-msschedule			scd
+application/x-msterminal			trm
+application/x-mswrite				wri
+application/x-netcdf				nc cdf
+application/x-nzb				nzb
+application/x-pkcs12				p12 pfx
+application/x-pkcs7-certificates		p7b spc
+application/x-pkcs7-certreqresp			p7r
+application/x-rar-compressed			rar
+application/x-research-info-systems		ris
+application/x-sh				sh
+application/x-shar				shar
+application/x-shockwave-flash			swf
+application/x-silverlight-app			xap
+application/x-sql				sql
+application/x-stuffit				sit
+application/x-stuffitx				sitx
+application/x-subrip				srt
+application/x-sv4cpio				sv4cpio
+application/x-sv4crc				sv4crc
+application/x-t3vm-image			t3
+application/x-tads				gam
+application/x-tar				tar
+application/x-tcl				tcl
+application/x-tex				tex
+application/x-tex-tfm				tfm
+application/x-texinfo				texinfo texi
+application/x-tgif				obj
+application/x-ustar				ustar
+application/x-wais-source			src
+application/x-x509-ca-cert			der crt
+application/x-xfig				fig
+application/x-xliff+xml				xlf
+application/x-xpinstall				xpi
+application/x-xz				xz
+application/x-zmachine				z1 z2 z3 z4 z5 z6 z7 z8
+application/xaml+xml				xaml
+application/xcap-diff+xml			xdf
+application/xenc+xml				xenc
+application/xhtml+xml				xhtml xht
+application/xml					xml xsl
+application/xml-dtd				dtd
+application/xop+xml				xop
+application/xproc+xml				xpl
+application/xslt+xml				xslt
+application/xspf+xml				xspf
+application/xv+xml				mxml xhvml xvml xvm
+application/yang				yang
+application/yin+xml				yin
+application/zip					zip
+audio/adpcm					adp
+audio/basic					au snd
+audio/midi					mid midi kar rmi
+audio/mp4					m4a mp4a
+audio/mpeg					mpga mp2 mp2a mp3 m2a m3a
+audio/ogg					oga ogg spx
+audio/s3m					s3m
+audio/silk					sil
+audio/vnd.dece.audio				uva uvva
+audio/vnd.digital-winds				eol
+audio/vnd.dra					dra
+audio/vnd.dts					dts
+audio/vnd.dts.hd				dtshd
+audio/vnd.lucent.voice				lvp
+audio/vnd.ms-playready.media.pya		pya
+audio/vnd.nuera.ecelp4800			ecelp4800
+audio/vnd.nuera.ecelp7470			ecelp7470
+audio/vnd.nuera.ecelp9600			ecelp9600
+audio/vnd.rip					rip
+audio/webm					weba
+audio/x-aac					aac
+audio/x-aiff					aif aiff aifc
+audio/x-caf					caf
+audio/x-flac					flac
+audio/x-matroska				mka
+audio/x-mpegurl					m3u
+audio/x-ms-wax					wax
+audio/x-ms-wma					wma
+audio/x-pn-realaudio				ram ra
+audio/x-pn-realaudio-plugin			rmp
+audio/x-wav					wav
+audio/xm					xm
+chemical/x-cdx					cdx
+chemical/x-cif					cif
+chemical/x-cmdf					cmdf
+chemical/x-cml					cml
+chemical/x-csml					csml
+chemical/x-xyz					xyz
+font/collection					ttc
+font/otf					otf
+font/ttf					ttf
+font/woff					woff
+font/woff2					woff2
+image/bmp					bmp
+image/cgm					cgm
+image/g3fax					g3
+image/gif					gif
+image/ief					ief
+image/jpeg					jpeg jpg jpe
+image/ktx					ktx
+image/png					png
+image/prs.btif					btif
+image/sgi					sgi
+image/svg+xml					svg svgz
+image/tiff					tiff tif
+image/vnd.adobe.photoshop			psd
+image/vnd.dece.graphic				uvi uvvi uvg uvvg
+image/vnd.djvu					djvu djv
+image/vnd.dvb.subtitle				sub
+image/vnd.dwg					dwg
+image/vnd.dxf					dxf
+image/vnd.fastbidsheet				fbs
+image/vnd.fpx					fpx
+image/vnd.fst					fst
+image/vnd.fujixerox.edmics-mmr			mmr
+image/vnd.fujixerox.edmics-rlc			rlc
+image/vnd.ms-modi				mdi
+image/vnd.ms-photo				wdp
+image/vnd.net-fpx				npx
+image/vnd.wap.wbmp				wbmp
+image/vnd.xiff					xif
+image/webp					webp
+image/x-3ds					3ds
+image/x-cmu-raster				ras
+image/x-cmx					cmx
+image/x-freehand				fh fhc fh4 fh5 fh7
+image/x-icon					ico
+image/x-mrsid-image				sid
+image/x-pcx					pcx
+image/x-pict					pic pct
+image/x-portable-anymap				pnm
+image/x-portable-bitmap				pbm
+image/x-portable-graymap			pgm
+image/x-portable-pixmap				ppm
+image/x-rgb					rgb
+image/x-tga					tga
+image/x-xbitmap					xbm
+image/x-xpixmap					xpm
+image/x-xwindowdump				xwd
+message/rfc822					eml mime
+model/iges					igs iges
+model/mesh					msh mesh silo
+model/vnd.collada+xml				dae
+model/vnd.dwf					dwf
+model/vnd.gdl					gdl
+model/vnd.gtw					gtw
+model/vnd.mts					mts
+model/vnd.vtu					vtu
+model/vrml					wrl vrml
+model/x3d+binary				x3db x3dbz
+model/x3d+vrml					x3dv x3dvz
+model/x3d+xml					x3d x3dz
+text/cache-manifest				appcache
+text/calendar					ics ifb
+text/css					css
+text/csv					csv
+text/html					html htm
+text/n3						n3
+text/plain					txt text conf def list log in
+text/prs.lines.tag				dsc
+text/richtext					rtx
+text/sgml					sgml sgm
+text/tab-separated-values			tsv
+text/troff					t tr roff man me ms
+text/turtle					ttl
+text/uri-list					uri uris urls
+text/vcard					vcard
+text/vnd.curl					curl
+text/vnd.curl.dcurl				dcurl
+text/vnd.curl.mcurl				mcurl
+text/vnd.curl.scurl				scurl
+text/vnd.dvb.subtitle				sub
+text/vnd.fly					fly
+text/vnd.fmi.flexstor				flx
+text/vnd.graphviz				gv
+text/vnd.in3d.3dml				3dml
+text/vnd.in3d.spot				spot
+text/vnd.sun.j2me.app-descriptor		jad
+text/vnd.wap.wml				wml
+text/vnd.wap.wmlscript				wmls
+text/x-asm					s asm
+text/x-c					c cc cxx cpp h hh dic
+text/x-fortran					f for f77 f90
+text/x-java-source				java
+text/x-nfo					nfo
+text/x-opml					opml
+text/x-pascal					p pas
+text/x-setext					etx
+text/x-sfv					sfv
+text/x-uuencode					uu
+text/x-vcalendar				vcs
+text/x-vcard					vcf
+video/3gpp					3gp
+video/3gpp2					3g2
+video/h261					h261
+video/h263					h263
+video/h264					h264
+video/jpeg					jpgv
+video/jpm					jpm jpgm
+video/mj2					mj2 mjp2
+video/mp4					mp4 mp4v mpg4
+video/mpeg					mpeg mpg mpe m1v m2v
+video/ogg					ogv
+video/quicktime					qt mov
+video/vnd.dece.hd				uvh uvvh
+video/vnd.dece.mobile				uvm uvvm
+video/vnd.dece.pd				uvp uvvp
+video/vnd.dece.sd				uvs uvvs
+video/vnd.dece.video				uvv uvvv
+video/vnd.dvb.file				dvb
+video/vnd.fvt					fvt
+video/vnd.mpegurl				mxu m4u
+video/vnd.ms-playready.media.pyv		pyv
+video/vnd.uvvu.mp4				uvu uvvu
+video/vnd.vivo					viv
+video/webm					webm
+video/x-f4v					f4v
+video/x-fli					fli
+video/x-flv					flv
+video/x-m4v					m4v
+video/x-matroska				mkv mk3d mks
+video/x-mng					mng
+video/x-ms-asf					asf asx
+video/x-ms-vob					vob
+video/x-ms-wm					wm
+video/x-ms-wmv					wmv
+video/x-ms-wmx					wmx
+video/x-ms-wvx					wvx
+video/x-msvideo					avi
+video/x-sgi-movie				movie
+video/x-smv					smv
+x-conference/x-cooltalk				ice
--- a/src/middleware/mime.ts
+++ b/src/middleware/mime.ts
@@ -0,0 +1,20 @@
+import mime_raw from './mime-types.md';
+
+const map: Map<string, string> = new Map();
+
+mime_raw.split('\n').forEach((row: string) => {
+	const match = /(.+?)\t+(.+)/.exec(row);
+	if (!match) return;
+
+	const type = match[1];
+	const extensions = match[2].split(' ');
+
+	extensions.forEach(ext => {
+		map.set(ext, type);
+	});
+});
+
+export function lookup(file: string) {
+	const match = /\.([^\.]+)$/.exec(file);
+	return match && map.get(match[1]);
+}
--- a/src/runtime/index.ts
+++ b/src/runtime/index.ts
@@ -1,9 +1,14 @@
 import { detach, findAnchor, scroll_state, which } from './utils';
-import { Component, ComponentConstructor, Params, Query, Route, RouteData, ScrollPosition, Target } from './interfaces';
+import { Component, ComponentConstructor, Params, Query, Route, RouteData, ScrollPosition, Store, Target } from './interfaces';

+const manifest = typeof window !== 'undefined' && window.__SAPPER__;
+
+export let App: ComponentConstructor;
 export let component: Component;
 let target: Node;
+let store: Store;
 let routes: Route[];
+let errors: { '4xx': Route, '5xx': Route };

 const history = typeof window !== 'undefined' ? window.history : {
 	pushState: (state: any, title: string, href: string) => {},
@@ -21,31 +26,42 @@ if ('scrollRestoration' in history) {

 function select_route(url: URL): Target {
 	if (url.origin !== window.location.origin) return null;
+	if (!url.pathname.startsWith(manifest.baseUrl)) return null;
+
+	const path = url.pathname.slice(manifest.baseUrl.length);

 	for (const route of routes) {
-		const match = route.pattern.exec(url.pathname);
+		const match = route.pattern.exec(path);
 		if (match) {
+			if (route.ignore) return null;
+
 			const params = route.params(match);

 			const query: Record<string, string | true> = {};
 			if (url.search.length > 0) {
-			    url.search.slice(1).split('&').forEach(searchParam => {
-			        const [, key, value] = /([^=]+)=(.*)/.exec(searchParam);
-			        query[key] = value || true;
-			    })
+				url.search.slice(1).split('&').forEach(searchParam => {
+					const [, key, value] = /([^=]+)=(.*)/.exec(searchParam);
+					query[key] = value || true;
+				})
 			}
-			return { url, route, data: { params, query } };
+			return { url, route, props: { params, query, path } };
 		}
 	}
 }

 let current_token: {};

-function render(Component: ComponentConstructor, data: any, scroll: ScrollPosition, token: {}) {
+function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition, token: {}) {
 	if (current_token !== token) return;

+	const data = {
+		Page,
+		props,
+		preloading: false
+	};
+
 	if (component) {
-		component.destroy();
+		component.set(data);
 	} else {
 		// first load — remove SSR'd <head> contents
 		const start = document.querySelector('#sapper-head-start');
@@ -57,33 +73,63 @@ function render(Component: ComponentConstructor, data: any, scroll: ScrollPositi
 			detach(end);
 		}

-		// preload additional routes
-		routes.reduce((promise: Promise<any>, route) => promise.then(route.load), Promise.resolve());
+		component = new App({
+			target,
+			data,
+			store,
+			hydrate: true
+		});
 	}

-	component = new Component({
-		target,
-		data,
-		hydrate: !component
-	});
-
 	if (scroll) {
 		window.scrollTo(scroll.x, scroll.y);
 	}
 }

-function prepare_route(Component: ComponentConstructor, data: RouteData) {
-	if (!Component.preload) {
-		return { Component, data };
+function prepare_route(Page: ComponentConstructor, props: RouteData) {
+	let redirect: { statusCode: number, location: string } = null;
+	let error: { statusCode: number, message: Error | string } = null;
+
+	if (!Page.preload) {
+		return { Page, props, redirect, error };
 	}

-	if (!component && window.__SAPPER__ && window.__SAPPER__.preloaded) {
-		return { Component, data: Object.assign(data, window.__SAPPER__.preloaded) };
+	if (!component && manifest.preloaded) {
+		return { Page, props: Object.assign(props, manifest.preloaded), redirect, error };
 	}

-	return Promise.resolve(Component.preload(data)).then(preloaded => {
-		Object.assign(data, preloaded)
-		return { Component, data };
+	if (component) {
+		component.set({
+			preloading: true
+		});
+	}
+
+	return Promise.resolve(Page.preload.call({
+		store,
+		fetch: (url: string, opts?: any) => window.fetch(url, opts),
+		redirect: (statusCode: number, location: string) => {
+			redirect = { statusCode, location };
+		},
+		error: (statusCode: number, message: Error | string) => {
+			error = { statusCode, message };
+		}
+	}, props)).catch(err => {
+		error = { statusCode: 500, message: err };
+	}).then(preloaded => {
+		if (error) {
+			const route = error.statusCode >= 400 && error.statusCode < 500
+				? errors['4xx']
+				: errors['5xx'];
+
+			return route.load().then(({ default: Page }: { default: ComponentConstructor }) => {
+				const err = error.message instanceof Error ? error.message : new Error(error.message);
+				Object.assign(props, { status: error.statusCode, error: err });
+				return { Page, props, redirect: null };
+			});
+		}
+
+		Object.assign(props, preloaded)
+		return { Page, props, redirect };
 	});
 }

@@ -103,14 +149,19 @@ function navigate(target: Target, id: number) {

 	const loaded = prefetching && prefetching.href === target.url.href ?
 		prefetching.promise :
-		target.route.load().then(mod => prepare_route(mod.default, target.data));
+		target.route.load().then(mod => prepare_route(mod.default, target.props));

 	prefetching = null;

 	const token = current_token = {};

-	return loaded.then(({ Component, data }) => {
-		render(Component, data, scroll_history[id], token);
+	return loaded.then(({ Page, props, redirect }) => {
+		if (redirect) {
+			return goto(redirect.location, { replaceState: true });
+		}
+
+		render(Page, props, scroll_history[id], token);
+		document.activeElement.blur();
 	});
 }

@@ -171,21 +222,30 @@ function handle_popstate(event: PopStateEvent) {

 let prefetching: {
 	href: string;
-	promise: Promise<{ Component: ComponentConstructor, data: any }>;
+	promise: Promise<{ Page: ComponentConstructor, props: any }>;
 } = null;

 export function prefetch(href: string) {
-	const selected = select_route(new URL(href));
+	const selected = select_route(new URL(href, document.baseURI));

-	if (selected) {
+	if (selected && (!prefetching || href !== prefetching.href)) {
 		prefetching = {
 			href,
-			promise: selected.route.load().then(mod => prepare_route(mod.default, selected.data))
+			promise: selected.route.load().then(mod => prepare_route(mod.default, selected.props))
 		};
 	}
 }

-function handle_touchstart_mouseover(event: MouseEvent | TouchEvent) {
+let mousemove_timeout: NodeJS.Timer;
+
+function handle_mousemove(event: MouseEvent) {
+	clearTimeout(mousemove_timeout);
+	mousemove_timeout = setTimeout(() => {
+		trigger_prefetch(event);
+	}, 20);
+}
+
+function trigger_prefetch(event: MouseEvent | TouchEvent) {
 	const a: HTMLAnchorElement = <HTMLAnchorElement>findAnchor(<Node>event.target);
 	if (!a || a.rel !== 'prefetch') return;

@@ -194,17 +254,30 @@ function handle_touchstart_mouseover(event: MouseEvent | TouchEvent) {

 let inited: boolean;

-export function init(_target: Node, _routes: Route[]) {
-	target = _target;
-	routes = _routes;
+export function init(opts: { App: ComponentConstructor, target: Node, routes: Route[], store?: (data: any) => Store }) {
+	if (opts instanceof HTMLElement) {
+		throw new Error(`The signature of init(...) has changed — see https://sapper.svelte.technology/guide#0-11-to-0-12 for more information`);
+	}
+
+	App = opts.App;
+	target = opts.target;
+	routes = opts.routes.filter(r => !r.error);
+	errors = {
+		'4xx': opts.routes.find(r => r.error === '4xx'),
+		'5xx': opts.routes.find(r => r.error === '5xx')
+	};
+
+	if (opts && opts.store) {
+		store = opts.store(manifest.store);
+	}

 	if (!inited) { // this check makes HMR possible
 		window.addEventListener('click', handle_click);
 		window.addEventListener('popstate', handle_popstate);

 		// prefetch
-		window.addEventListener('touchstart', handle_touchstart_mouseover);
-		window.addEventListener('mouseover', handle_touchstart_mouseover);
+		window.addEventListener('touchstart', trigger_prefetch);
+		window.addEventListener('mousemove', handle_mousemove);

 		inited = true;
 	}
@@ -225,7 +298,8 @@ export function init(_target: Node, _routes: Route[]) {
 }

 export function goto(href: string, opts = { replaceState: false }) {
-	const target = select_route(new URL(href, window.location.href));
+	const target = select_route(new URL(href, document.baseURI));
+
 	if (target) {
 		navigate(target, null);
 		if (history) history[opts.replaceState ? 'replaceState' : 'pushState']({ id: cid }, '', href);
@@ -233,3 +307,23 @@ export function goto(href: string, opts = { replaceState: false }) {
 		window.location.href = href;
 	}
 }
+
+export function prefetchRoutes(pathnames: string[]) {
+	if (!routes) throw new Error(`You must call init() first`);
+
+	return routes
+		.filter(route => {
+			if (!pathnames) return true;
+			return pathnames.some(pathname => {
+				return route.error
+					? route.error === pathname
+					: route.pattern.test(pathname)
+			});
+		})
+		.reduce((promise: Promise<any>, route) => {
+			return promise.then(route.load);
+		}, Promise.resolve());
+}
+
+// remove this in 0.9
+export { prefetchRoutes as preloadRoutes };
--- a/src/runtime/interfaces.ts
+++ b/src/runtime/interfaces.ts
@@ -1,10 +1,13 @@
+import { Store } from '../interfaces';
+
+export { Store };
 export type Params = Record<string, string>;
 export type Query = Record<string, string | true>;
-export type RouteData = { params: Params, query: Query };
+export type RouteData = { params: Params, query: Query, path: string };

 export interface ComponentConstructor {
-	new (options: { target: Node, data: any, hydrate: boolean }): Component;
-	preload: (data: { params: Params, query: Query }) => Promise<any>;
+	new (options: { target: Node, data: any, store: Store, hydrate: boolean }): Component;
+	preload: (props: { params: Params, query: Query }) => Promise<any>;
 };

 export interface Component {
@@ -13,8 +16,10 @@ export interface Component {

 export type Route = {
 	pattern: RegExp;
-	params: (match: RegExpExecArray) => Record<string, string>;
-	load: () => Promise<{ default: ComponentConstructor }>
+	load: () => Promise<{ default: ComponentConstructor }>;
+	error?: string;
+	params?: (match: RegExpExecArray) => Record<string, string>;
+	ignore?: boolean;
 };

 export type ScrollPosition = {
@@ -25,5 +30,5 @@ export type ScrollPosition = {
 export type Target = {
 	url: URL;
 	route: Route;
-	data: RouteData;
+	props: RouteData;
 };
--- a/src/webpack.ts
+++ b/src/webpack.ts
@@ -0,0 +1,55 @@
+import { locations, dev } from './config';
+
+export default {
+	dev: dev(),
+
+	client: {
+		entry: () => {
+			return {
+				main: `${locations.app()}/client`
+			};
+		},
+
+		output: () => {
+			return {
+				path: `${locations.dest()}/client`,
+				filename: '[hash]/[name].js',
+				chunkFilename: '[hash]/[name].[id].js',
+				publicPath: `client/`
+			};
+		}
+	},
+
+	server: {
+		entry: () => {
+			return {
+				server: `${locations.app()}/server`
+			};
+		},
+
+		output: () => {
+			return {
+				path: locations.dest(),
+				filename: '[name].js',
+				chunkFilename: '[hash]/[name].[id].js',
+				libraryTarget: 'commonjs2'
+			};
+		}
+	},
+
+	serviceworker: {
+		entry: () => {
+			return {
+				'service-worker': `${locations.app()}/service-worker`
+			};
+		},
+
+		output: () => {
+			return {
+				path: locations.dest(),
+				filename: '[name].js',
+				chunkFilename: '[name].[id].[hash].js'
+			}
+		}
+	}
+};
--- a/src/webpack/index.ts
+++ b/src/webpack/index.ts
@@ -1,44 +0,0 @@
-import { dest, isDev, entry } from '../config';
-
-export default {
-	dev: isDev(),
-
-	client: {
-		entry: () => {
-			return {
-				main: [
-					entry.client,
-					// workaround for https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/456
-					'style-loader/lib/addStyles',
-					'css-loader/lib/css-base'
-				]
-			};
-		},
-
-		output: () => {
-			return {
-				path: `${dest}/client`,
-				filename: '[name].[hash].js',
-				chunkFilename: '[name].[id].[hash].js',
-				publicPath: '/client/'
-			};
-		}
-	},
-
-	server: {
-		entry: () => {
-			return {
-				main: entry.server
-			};
-		},
-
-		output: () => {
-			return {
-				path: `${dest}/server`,
-				filename: '[name].[hash].js',
-				chunkFilename: '[name].[id].[hash].js',
-				libraryTarget: 'commonjs2'
-			};
-		}
-	}
-};
--- a/test/app/app/App.html
+++ b/test/app/app/App.html
@@ -0,0 +1,6 @@
+{#if preloading}
+	<progress class='preloading-progress' value=0.5/>
+{/if}
+
+<svelte:component this={Page} {...props}/>
+
--- a/test/app/app/client.js
+++ b/test/app/app/client.js
@@ -0,0 +1,15 @@
+import { init, prefetchRoutes } from '../../../runtime.js';
+import { Store } from 'svelte/store.js';
+import { routes } from './manifest/client.js';
+import App from './App.html';
+
+window.init = () => {
+	return init({
+		target: document.querySelector('#sapper'),
+		App,
+		routes,
+		store: data => new Store(data)
+	});
+};
+
+window.prefetchRoutes = prefetchRoutes;
--- a/test/app/app/server.js
+++ b/test/app/app/server.js
@@ -0,0 +1,106 @@
+import fs from 'fs';
+import { resolve } from 'url';
+import express from 'express';
+import serve from 'serve-static';
+import sapper from '../../../dist/middleware.ts.js';
+import { Store } from 'svelte/store.js';
+import { routes } from './manifest/server.js';
+import App from './App.html'
+
+let pending;
+let ended;
+
+process.on('message', message => {
+	if (message.action === 'start') {
+		if (pending) {
+			throw new Error(`Already capturing`);
+		}
+
+		pending = new Set();
+		ended = false;
+		process.send({ type: 'ready' });
+	}
+
+	if (message.action === 'end') {
+		ended = true;
+		if (pending.size === 0) {
+			process.send({ type: 'done' });
+			pending = null;
+		}
+	}
+});
+
+const app = express();
+
+const { PORT = 3000, BASEPATH = '' } = process.env;
+const base = `http://localhost:${PORT}${BASEPATH}/`;
+
+// this allows us to do e.g. `fetch('/api/blog')` on the server
+const fetch = require('node-fetch');
+global.fetch = (url, opts) => {
+	return fetch(resolve(base, url), opts);
+};
+
+const middlewares = [
+	serve('assets'),
+
+	// set test cookie
+	(req, res, next) => {
+		res.setHeader('Set-Cookie', 'test=woohoo!; Max-Age=3600');
+		next();
+	},
+
+	// emit messages so we can capture requests
+	(req, res, next) => {
+		if (!pending) return next();
+
+		pending.add(req.url);
+
+		const { write, end } = res;
+		const chunks = [];
+
+		res.write = function(chunk) {
+			chunks.push(new Buffer(chunk));
+			write.apply(res, arguments);
+		};
+
+		res.end = function(chunk) {
+			if (chunk) chunks.push(new Buffer(chunk));
+			end.apply(res, arguments);
+
+			if (pending) pending.delete(req.url);
+
+			process.send({
+				method: req.method,
+				url: req.url,
+				status: res.statusCode,
+				headers: res._headers,
+				body: Buffer.concat(chunks).toString()
+			});
+
+			if (pending && pending.size === 0 && ended) {
+				process.send({ type: 'done' });
+			}
+		};
+
+		next();
+	},
+
+	sapper({
+		App,
+		routes,
+		store: () => {
+			return new Store({
+				title: 'Stored title'
+			});
+		}
+	})
+];
+
+if (BASEPATH) {
+	app.use(BASEPATH, ...middlewares);
+} else {
+	app.use(...middlewares);
+}
+
+app.listen(PORT);
--- a/test/app/templates/service-worker.js
+++ b/test/app/templates/service-worker.js
@@ -1,14 +1,12 @@
-const ASSETS = `cache__timestamp__`;
+import { assets, shell, timestamp, routes } from './manifest/service-worker.js';
+
+const ASSETS = `cachetimestamp`;

 // `shell` is an array of all the files generated by webpack,
 // `assets` is an array of everything in the `assets` directory
-const to_cache = __shell__.concat(__assets__);
+const to_cache = shell.concat(assets);
 const cached = new Set(to_cache);

-// `routes` is an array of `{ pattern: RegExp }` objects that
-// match the pages in your app
-const routes = __routes__;
-
 self.addEventListener('install', event => {
 	event.waitUntil(
 		caches
--- a/test/app/templates/2xx.html
+++ b/test/app/templates/2xx.html
@@ -1,19 +1,15 @@
-<!doctype>
+<!doctype html>
 <html lang='en'>
 <head>
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width'>
 	<meta name='theme-color' content='#aa1e1e'>

-	<link rel='stylesheet' href='/global.css'>
-	<link rel='manifest' href='/manifest.json'>
-	<link rel='icon' type='image/png' href='/favicon.png'>
+	%sapper.base%

-	<script>
-		// if ('serviceWorker' in navigator) {
-		// 	navigator.serviceWorker.register('/service-worker.js');
-		// }
-	</script>
+	<link rel='stylesheet' href='global.css'>
+	<link rel='manifest' href='manifest.json'>
+	<link rel='icon' type='image/png' href='favicon.png'>

 	<!-- Sapper generates a <style> tag containing critical CSS
 	     for the current page. CSS for the rest of the app is
--- a/test/app/package-lock.json
+++ b/test/app/package-lock.json
--- a/test/app/package.json
+++ b/test/app/package.json
@@ -1,28 +0,0 @@
-{
-  "name": "TODO",
-  "description": "TODO",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "node server.js",
-    "build": "sapper build",
-    "start": "cross-env NODE_ENV=production node server.js",
-    "prestart": "npm run build"
-  },
-  "dependencies": {
-    "compression": "^1.7.1",
-    "cross-env": "^5.1.1",
-    "css-loader": "^0.28.7",
-    "express": "^4.16.2",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "glob": "^7.1.2",
-    "marked": "^0.3.9",
-    "node-fetch": "^1.7.3",
-    "npm-run-all": "^4.1.2",
-    "serve-static": "^1.13.1",
-    "style-loader": "^0.19.0",
-    "svelte": "^1.49.1",
-    "svelte-loader": "^2.2.1",
-    "uglifyjs-webpack-plugin": "^1.1.2",
-    "webpack": "^3.10.0"
-  }
-}
--- a/test/app/routes/4xx.html
+++ b/test/app/routes/4xx.html
@@ -0,0 +1,6 @@
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
+
+<h1>Not found</h1>
+<p>{error.message}</p>
--- a/test/app/routes/5xx.html
+++ b/test/app/routes/5xx.html
@@ -0,0 +1,6 @@
+<svelte:head>
+	<title>Internal server error</title>
+</svelte:head>
+
+<h1>Internal server error</h1>
+<p>{error.message}</p>
--- a/test/app/routes/_components/Layout.html
+++ b/test/app/routes/_components/Layout.html
@@ -1,15 +0,0 @@
-<Nav page={{page}}/>
-
-<main>
-	<slot></slot>
-</main>
-
-<script>
-	import Nav from './Nav.html';
-
-	export default {
-		components: {
-			Nav
-		}
-	};
-</script>
--- a/test/app/routes/_components/Nav.html
+++ b/test/app/routes/_components/Nav.html
@@ -1,54 +0,0 @@
-<nav>
-	<ul>
-		<li><a href='/'>home</a></li>
-		<li><a href='/about'>about</a></li>
-		<li><a href='/slow-preload'>slow preload</a></li>
-		<li><a rel=prefetch class='{{page === "blog"  ? "selected" : ""}}' href='/blog'>blog</a></li>
-	</ul>
-</nav>
-
-<style>
-	nav {
-		border-bottom: 1px solid rgba(170,30,30,0.1);
-		font-weight: 300;
-		padding: 0 1em;
-	}
-
-	ul {
-		margin: 0;
-		padding: 0;
-	}
-
-	/* clearfix */
-	ul::after {
-		content: '';
-		display: block;
-		clear: both;
-	}
-
-	li {
-		display: block;
-		float: left;
-	}
-
-	.selected {
-		position: relative;
-		display: inline-block;
-	}
-
-	.selected::after {
-		position: absolute;
-		content: '';
-		width: calc(100% - 1em);
-		height: 2px;
-		background-color: rgb(170,30,30);
-		display: block;
-		bottom: -1px;
-	}
-
-	a {
-		text-decoration: none;
-		padding: 1em 0.5em;
-		display: block;
-	}
-</style>
--- a/test/app/routes/about.html
+++ b/test/app/routes/about.html
@@ -1,25 +1,18 @@
-<:Head>
+<svelte:head>
 	<title>About</title>
-</:Head>
+</svelte:head>

-<Layout page='about'>
-	<h1>About this site</h1>
+<h1>About this site</h1>

-	<p>This is the 'about' page. There's not much here.</p>
+<p>This is the 'about' page. There's not much here.</p>

-	<button class='goto' on:click='goto("/blog/what-is-sapper")'>What is Sapper?</button>
-	<button class='prefetch' on:click='goto("/blog/why-the-name")'>Why the name?</button>
-</Layout>
+<button class='goto' on:click='goto("blog/what-is-sapper")'>What is Sapper?</button>
+<button class='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button>

 <script>
-	import Layout from './_components/Layout.html';
 	import { goto, prefetch } from '../../../runtime.js';

 	export default {
-		components: {
-			Layout
-		},
-
 		methods: {
 			goto,
 			prefetch
--- a/test/app/routes/api/delete/[id].js
+++ b/test/app/routes/api/delete/[id].js
@@ -1,5 +1,5 @@
 export function del(req, res) {
-	res.set({
+	res.writeHead(200, {
 		'Content-Type': 'application/json'
 	});

--- a/test/app/routes/api/blog/contents.js
+++ b/test/app/routes/api/blog/contents.js
@@ -1,4 +1,4 @@
-import posts from './_posts.js';
+import posts from './blog/_posts.js';

 const contents = JSON.stringify(posts.map(post => {
 	return {
@@ -8,7 +8,7 @@ const contents = JSON.stringify(posts.map(post => {
 }));

 export function get(req, res) {
-	res.set({
+	res.writeHead(200, {
 		'Content-Type': 'application/json',
 		'Cache-Control': `max-age=${30 * 60 * 1e3}` // cache for 30 minutes
 	});
--- a/test/app/routes/blog/[slug].html
+++ b/test/app/routes/blog/[slug].html
@@ -1,66 +1,35 @@
-<:Head>
-	<title>{{post.title}}</title>
-</:Head>
+<svelte:head>
+	<title>{post.title}</title>
+</svelte:head>

-<Layout page='blog'>
-	<h1>{{post.title}}</h1>
+<h1>{post.title}</h1>

-	<div class='content'>
-		{{{post.html}}}
-	</div>
-</Layout>
-
-<style>
-	/*
-		By default, CSS is locally scoped to the component,
-		and any unused styles are dead-code-eliminated.
-		In this page, Svelte can't know which elements are
-		going to appear inside the {{{post.html}}} block,
-		so we have to use the :global(...) modifier to target
-		all elements inside .content
-	*/
-	.content :global(h2) {
-		font-size: 1.4em;
-		font-weight: 500;
-	}
-
-	.content :global(pre) {
-		background-color: #f9f9f9;
-		box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05);
-		padding: 0.5em;
-		border-radius: 2px;
-		overflow-x: auto;
-	}
-
-	.content :global(pre) :global(code) {
-		background-color: transparent;
-		padding: 0;
-	}
-
-	.content :global(ul) {
-		line-height: 1.5;
-	}
-
-	.content :global(li) {
-		margin: 0 0 0.5em 0;
-	}
-</style>
+<div class='content'>
+	{@html post.html}
+</div>

 <script>
-	import Layout from '../_components/Layout.html';
-
 	export default {
-		components: {
-			Layout
-		},
-
 		preload({ params, query }) {
 			// the `slug` parameter is available because this file
 			// is called [slug].html
 			const { slug } = params;

-			return fetch(`/api/blog/${slug}`).then(r => r.json()).then(post => {
-				return { post };
+			if (slug === 'throw-an-error') {
+				return this.error(500, 'something went wrong');
+			}
+
+			return fetch(`blog/${slug}.json`).then(r => {
+				if (r.status === 200) {
+					return r.json().then(post => ({ post }));
+					this.error(r.status, '')
+				}
+
+				if (r.status === 404) {
+					this.error(404, 'Not found');
+				} else {
+					throw new Error('Something went wrong');
+				}
 			});
 		}
 	};
--- a/test/app/routes/blog/[slug].json.js
+++ b/test/app/routes/blog/[slug].json.js
@@ -11,7 +11,7 @@ export function get(req, res, next) {
 	const { slug } = req.params;

 	if (slug in lookup) {
-		res.set({
+		res.writeHead(200, {
 			'Content-Type': 'application/json',
 			'Cache-Control': `no-cache`
 		});
--- a/test/app/routes/api/blog/_posts.js
+++ b/test/app/routes/api/blog/_posts.js
@@ -14,7 +14,7 @@ const posts = [
 		html: `
 			<p>First, you have to know what <a href='https://svelte.technology'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.technology/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>

-			<p>Sapper is a Next.js-style framework (<a href='/blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
+			<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>

 			<ul>
 				<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
@@ -70,8 +70,8 @@ const posts = [
 			<ul>
 				<li>It's powered by <a href='https://svelte.technology'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
 				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>routes/blog/[slug].html</code></li>
-				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one powering this very page (look in <code>routes/api/blog</code>)</li>
-				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='/blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
+				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
+				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
 			</ul>
 		`
 	},
--- a/test/app/routes/blog/index.html
+++ b/test/app/routes/blog/index.html
@@ -1,38 +1,23 @@
-<:Head>
+<svelte:head>
 	<title>Blog</title>
-</:Head>
+</svelte:head>

-<Layout page='blog'>
-	<h1>Recent posts</h1>
+<h1>Recent posts</h1>

-	<ul>
-		{{#each posts as post}}
-			<!-- we're using the non-standard `rel=prefetch` attribute to
-			     tell Sapper to load the data for the page as soon as
-			     the user hovers over the link or taps it, instead of
-			     waiting for the 'click' event -->
-			<li><a rel='prefetch' href='/blog/{{post.slug}}'>{{post.title}}</a></li>
-		{{/each}}
-	</ul>
-</Layout>
-
-<style>
-	ul {
-		margin: 0 0 1em 0;
-		line-height: 1.5;
-	}
-</style>
+<ul>
+	{#each posts as post}
+		<!-- we're using the non-standard `rel=prefetch` attribute to
+				tell Sapper to load the data for the page as soon as
+				the user hovers over the link or taps it, instead of
+				waiting for the 'click' event -->
+		<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
+	{/each}
+</ul>

 <script>
-	import Layout from '../_components/Layout.html';
-
 	export default {
-		components: {
-			Layout
-		},
-
 		preload({ params, query }) {
-			return fetch(`/api/blog/contents`).then(r => r.json()).then(posts => {
+			return fetch(`blog.json`).then(r => r.json()).then(posts => {
 				return { posts };
 			});
 		}
--- a/test/app/routes/credentials/index.html
+++ b/test/app/routes/credentials/index.html
@@ -0,0 +1,11 @@
+<h1>{message}</h1>
+
+<script>
+	export default {
+		preload({ query }) {
+			return this.fetch(`credentials/test.json`, {
+				credentials: query.creds
+			}).then(r => r.json());
+		}
+	};
+</script>
--- a/test/app/routes/credentials/test.json.js
+++ b/test/app/routes/credentials/test.json.js
@@ -0,0 +1,28 @@
+export function get(req, res) {
+	const cookies = req.headers.cookie
+		? req.headers.cookie.split(/,\s+/).reduce((cookies, cookie) => {
+			const [pair] = cookie.split('; ');
+			const [name, value] = pair.split('=');
+			cookies[name] = value;
+			return cookies;
+		}, {})
+		: {};
+
+	if (cookies.test) {
+		res.writeHead(200, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({
+			message: cookies.test
+		}));
+	} else {
+		res.writeHead(403, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({
+			message: 'unauthorized'
+		}));
+	}
+}
--- a/test/app/routes/delete-test.html
+++ b/test/app/routes/delete-test.html
@@ -4,7 +4,7 @@
 	export default {
 		methods: {
 			del() {
-				fetch(`/api/delete/42`, { method: 'DELETE' })
+				fetch(`api/delete/42`, { method: 'DELETE' })
 					.then(r => r.json())
 					.then(data => {
 						window.deleted = data;
--- a/test/app/routes/fünke.html
+++ b/test/app/routes/fünke.html
@@ -0,0 +1 @@
+<h1>I'm afraid I just blue myself</h1>
--- a/test/app/routes/index.html
+++ b/test/app/routes/index.html
@@ -1,60 +1,26 @@
-<:Head>
+<svelte:head>
 	<title>Sapper project template</title>
-</:Head>
+</svelte:head>

-<Layout page='home'>
-	<h1>Great success!</h1>
+<h1>Great success!</h1>

-	<figure>
-		<img alt='borat' src='/great-success.png'>
-		<figcaption>HIGH FIVE!</figcaption>
-	</figure>
-
-	<p><strong>Try editing this file (routes/index.html) to test hot module reloading.</strong></p>
-</Layout>
+<a href='.'>home</a>
+<a href='about'>about</a>
+<a href='slow-preload'>slow preload</a>
+<a href='redirect-from'>redirect</a>
+<a href='blog/nope'>broken link</a>
+<a href='blog/throw-an-error'>error link</a>
+<a href='credentials?creds=include'>credentials</a>
+<a rel=prefetch class='{page === "blog"  ? "selected" : ""}' href='blog'>blog</a>

 <div class='hydrate-test'></div>

 <style>
-	h1, figure, p {
-		text-align: center;
-		margin: 0 auto;
-	}
-
 	h1 {
+		text-align: center;
 		font-size: 2.8em;
 		text-transform: uppercase;
 		font-weight: 700;
 		margin: 0 0 0.5em 0;
 	}
-
-	figure {
-		margin: 0 0 1em 0;
-	}
-
-	img {
-		width: 100%;
-		max-width: 400px;
-		margin: 0 0 1em 0;
-	}
-
-	p {
-		margin: 1em auto;
-	}
-
-	@media (min-width: 480px) {
-		h1 {
-			font-size: 4em;
-		}
-	}
-</style>
-
-<script>
-	import Layout from './_components/Layout.html';
-
-	export default {
-		components: {
-			Layout
-		}
-	};
-</script>
+</style>
--- a/test/app/routes/preload-values/custom-class.html
+++ b/test/app/routes/preload-values/custom-class.html
@@ -0,0 +1,17 @@
+<h1>{foo.bar()}</h1>
+
+<script>
+	export default {
+		preload() {
+			class Foo {
+				bar() {
+					return 42;
+				}
+			}
+
+			return {
+				foo: new Foo()
+			};
+		}
+	};
+</script>
--- a/test/app/routes/preload-values/set.html
+++ b/test/app/routes/preload-values/set.html
@@ -0,0 +1,11 @@
+<h1>{set.has('x')}</h1>
+
+<script>
+	export default {
+		preload() {
+			return {
+				set: new Set(['x'])
+			};
+		}
+	};
+</script>
--- a/test/app/routes/redirect-from.html
+++ b/test/app/routes/redirect-from.html
@@ -0,0 +1,7 @@
+<script>
+	export default {
+		preload() {
+			this.redirect(301, 'redirect-to');
+		}
+	};
+</script>
--- a/test/app/routes/redirect-to.html
+++ b/test/app/routes/redirect-to.html
@@ -0,0 +1 @@
+<h1>redirected</h1>
--- a/test/app/routes/show-url.html
+++ b/test/app/routes/show-url.html
@@ -1,4 +1,4 @@
-<p>URL is {{url}}</p>
+<p>URL is {url}</p>

 <script>
 	export default {
--- a/test/app/routes/store.html
+++ b/test/app/routes/store.html
@@ -0,0 +1 @@
+<h1>{$title}</h1>
--- a/test/app/routes/throw-an-error.js
+++ b/test/app/routes/throw-an-error.js
@@ -0,0 +1,3 @@
+export function get() {
+	throw new Error('nope');
+}
--- a/test/app/server.js
+++ b/test/app/server.js
@@ -1,24 +0,0 @@
-const fs = require('fs');
-const app = require('express')();
-const compression = require('compression');
-const sapper = require('sapper');
-const static = require('serve-static');
-
-const { PORT = 3000 } = process.env;
-
-// this allows us to do e.g. `fetch('/api/blog')` on the server
-const fetch = require('node-fetch');
-global.fetch = (url, opts) => {
-	if (url[0] === '/') url = `http://localhost:${PORT}${url}`;
-	return fetch(url, opts);
-};
-
-app.use(compression({ threshold: 0 }));
-
-app.use(static('assets'));
-
-app.use(sapper());
-
-app.listen(PORT, () => {
-	console.log(`listening on port ${PORT}`);
-});
--- a/test/app/templates/4xx.html
+++ b/test/app/templates/4xx.html
@@ -1,44 +0,0 @@
-<!doctype>
-<html lang='en'>
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width'>
-	<meta name='theme-color' content='#aa1e1e'>
-
-	<link rel='manifest' href='/manifest.json'>
-	<link rel='icon' type='image/png' href='/favicon.png'>
-
-	<!-- %sapper.status% is the HTTP status code, e.g. 404 -->
-	<title>%sapper.status%</title>
-
-	<style>
-		body {
-			max-width: 800px;
-			padding: 1em;
-			margin: 0 auto;
-			font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-			background-color: #f4f4f4;
-			box-sizing: border-box;
-		}
-
-		h1 {
-			color: rgb(170,30,30);
-			border-bottom: 1px solid #aaa;
-			padding: 0 0 0.5em 0;
-			margin: 1em 0;
-		}
-
-		pre {
-			font-family: Menlo, monospace;
-			font-size: 14px;
-			line-height: 1.2;
-			overflow-x: auto;
-			white-space: pre-wrap;
-		}
-	</style>
-</head>
-<body>
-	<h1>%sapper.title%</h1>
-	<p>Could not %sapper.method% %sapper.url%</p>
-</body>
-</html>
--- a/test/app/templates/5xx.html
+++ b/test/app/templates/5xx.html
@@ -1,47 +0,0 @@
-<!doctype>
-<html lang='en'>
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width'>
-	<meta name='theme-color' content='#aa1e1e'>
-
-	<link rel='manifest' href='/manifest.json'>
-	<link rel='icon' type='image/png' href='/favicon.png'>
-
-	<title>%sapper.status%</title>
-
-	<style>
-		body {
-			max-width: 800px;
-			padding: 1em;
-			margin: 0 auto;
-			box-sizing: border-box;
-		}
-
-		h1 {
-			color: rgb(170,30,30);
-			border-bottom: 1px solid #aaa;
-			padding: 0 0 0.5em 0;
-			margin: 1em 0;
-		}
-
-		pre {
-			font-family: Menlo, monospace;
-			font-size: 14px;
-			line-height: 1.2;
-			overflow-x: auto;
-			white-space: pre-wrap;
-		}
-
-		.stack {
-			font-size: 12px;
-			color: #999;
-		}
-	</style>
-</head>
-<body>
-	<h1>%sapper.title%</h1>
-	<pre>%sapper.error%</pre>
-	<pre class='stack'>%sapper.stack%</pre>
-</body>
-</html>
--- a/test/app/templates/main.js
+++ b/test/app/templates/main.js
@@ -1,5 +0,0 @@
-import { init } from '../../../runtime.js';
-
-window.init = () => {
-	return init(document.querySelector('#sapper'), __routes__);
-};
--- a/test/app/webpack/client.config.js
+++ b/test/app/webpack/client.config.js
@@ -1,6 +1,9 @@
-const config = require('../../webpack/config.js');
+const config = require('../../../webpack/config.js');
 const webpack = require('webpack');

+const mode = process.env.NODE_ENV;
+const isDev = mode === 'development';
+
 module.exports = {
 	entry: config.client.entry(),
 	output: config.client.output(),
@@ -16,24 +19,16 @@ module.exports = {
 					loader: 'svelte-loader',
 					options: {
 						hydratable: true,
-						emitCss: !config.dev,
 						cascade: false,
 						store: true
 					}
 				}
-			},
-			{
-				test: /\.css$/,
-				use: [
-					{ loader: "style-loader" },
-					{ loader: "css-loader" }
-				]
 			}
-		].filter(Boolean)
+		]
 	},
+	mode,
 	plugins: [
-		config.dev && new webpack.HotModuleReplacementPlugin(),
-		!config.dev && new webpack.optimize.ModuleConcatenationPlugin()
+		isDev && new webpack.HotModuleReplacementPlugin()
 	].filter(Boolean),
-	devtool: config.dev ? 'inline-source-map' : false
+	devtool: isDev && 'inline-source-map'
 };
--- a/test/app/webpack/server.config.js
+++ b/test/app/webpack/server.config.js
@@ -1,4 +1,5 @@
-const config = require('../../webpack/config.js');
+const config = require('../../../webpack/config.js');
+const sapper_pkg = require('../../../package.json');

 module.exports = {
 	entry: config.server.entry(),
@@ -7,6 +8,10 @@ module.exports = {
 	resolve: {
 		extensions: ['.js', '.html']
 	},
+	externals: [].concat(
+		Object.keys(sapper_pkg.dependencies),
+		Object.keys(sapper_pkg.devDependencies)
+	),
 	module: {
 		rules: [
 			{
@@ -23,5 +28,9 @@ module.exports = {
 				}
 			}
 		]
+	},
+	mode: process.env.NODE_ENV,
+	performance: {
+		hints: false // it doesn't matter if server.js is large
 	}
 };
--- a/test/app/webpack/service-worker.config.js
+++ b/test/app/webpack/service-worker.config.js
@@ -0,0 +1,7 @@
+const config = require('../../../webpack/config.js');
+
+module.exports = {
+	entry: config.serviceworker.entry(),
+	output: config.serviceworker.output(),
+	mode: process.env.NODE_ENV
+};
--- a/test/common/test.js
+++ b/test/common/test.js
@@ -1,170 +1,240 @@
+const fs = require('fs');
 const path = require('path');
 const assert = require('assert');
 const Nightmare = require('nightmare');
-const express = require('express');
 const serve = require('serve-static');
 const walkSync = require('walk-sync');
 const fetch = require('node-fetch');
-
-run('production');
-run('development');
+const rimraf = require('rimraf');
+const ports = require('port-authority');

 Nightmare.action('page', {
 	title(done) {
 		this.evaluate_now(() => document.querySelector('h1').textContent, done);
+	},
+
+	html(done) {
+		this.evaluate_now(() => document.documentElement.innerHTML, done);
+	},
+
+	text(done) {
+		this.evaluate_now(() => document.body.textContent, done);
 	}
 });

-function run(env) {
-	describe(`env=${env}`, function () {
-		this.timeout(20000);
+Nightmare.action('init', function(done) {
+	this.evaluate_now(() => window.init(), done);
+});

-		let PORT;
-		let server;
-		let nightmare;
-		let middleware;
+Nightmare.action('prefetchRoutes', function(done) {
+	this.evaluate_now(() => window.prefetchRoutes(), done);
+});
+
+const cli = path.resolve(__dirname, '../../sapper');
+
+describe('sapper', function() {
+	process.chdir(path.resolve(__dirname, '../app'));
+
+	// clean up after previous test runs
+	rimraf.sync('export');
+	rimraf.sync('build');
+	rimraf.sync('.sapper');
+	rimraf.sync('start.js');
+
+	this.timeout(process.env.CI ? 30000 : 10000);
+
+	// TODO reinstate dev tests
+	// run({
+	// 	mode: 'development'
+	// });
+
+	run({
+		mode: 'production'
+	});
+
+	run({
+		mode: 'production',
+		basepath: '/custom-basepath'
+	});
+
+	describe('export', () => {
+		before(() => {
+			return exec(`node ${cli} export`);
+		});
+
+		it('export all pages', () => {
+			const dest = path.resolve(__dirname, '../app/export');
+
+			// Pages that should show up in the extraction directory.
+			const expectedPages = [
+				'index.html',
+				'about/index.html',
+				'slow-preload/index.html',
+
+				'blog/index.html',
+				'blog/a-very-long-post/index.html',
+				'blog/how-can-i-get-involved/index.html',
+				'blog/how-is-sapper-different-from-next/index.html',
+				'blog/how-to-use-sapper/index.html',
+				'blog/what-is-sapper/index.html',
+				'blog/why-the-name/index.html',
+
+				'blog.json',
+				'blog/a-very-long-post.json',
+				'blog/how-can-i-get-involved.json',
+				'blog/how-is-sapper-different-from-next.json',
+				'blog/how-to-use-sapper.json',
+				'blog/what-is-sapper.json',
+				'blog/why-the-name.json',
+
+				'favicon.png',
+				'global.css',
+				'great-success.png',
+				'manifest.json',
+				'service-worker.js',
+				'svelte-logo-192.png',
+				'svelte-logo-512.png',
+			];
+			// Client scripts that should show up in the extraction directory.
+			const expectedClientRegexes = [
+				/client\/[^/]+\/_(\.\d+)?\.js/,
+				/client\/[^/]+\/about(\.\d+)?\.js/,
+				/client\/[^/]+\/blog_\$slug\$(\.\d+)?\.js/,
+				/client\/[^/]+\/blog(\.\d+)?\.js/,
+				/client\/[^/]+\/main(\.\d+)?\.js/,
+				/client\/[^/]+\/show_url(\.\d+)?\.js/,
+				/client\/[^/]+\/slow_preload(\.\d+)?\.js/,
+			];
+			const allPages = walkSync(dest);
+
+			expectedPages.forEach((expectedPage) => {
+				assert.ok(allPages.includes(expectedPage),`Could not find page matching ${expectedPage}`);
+			});
+
+			expectedClientRegexes.forEach((expectedRegex) => {
+				// Ensure each client page regular expression matches at least one
+				// generated page.
+				let matched = false;
+				for (const page of allPages) {
+					if (expectedRegex.test(page)) {
+						matched = true;
+						break;
+					}
+				}
+				assert.ok(matched, `Could not find client page matching ${expectedRegex}`);
+			});
+		});
+	});
+});
+
+function run({ mode, basepath = '' }) {
+	describe(`mode=${mode}`, function () {
+		let proc;
 		let capture;

 		let base;
+		let captured_basepath;

-		function get(url) {
-			return new Promise(fulfil => {
-				const req = {
-					url,
-					method: 'GET'
-				};
+		const nightmare = new Nightmare();

-				const result = {
-					headers: {},
-					body: ''
-				};
+		nightmare.on('console', (type, ...args) => {
+			console[type](...args);
+		});

-				const res = {
-					setHeader(header, value) {
-						result.headers[header] = value;
-					},
-
-					set(headers, value) {
-						if (typeof headers === 'string') {
-							return res.set({ [headers]: value });
-						}
-
-						Object.assign(result.headers, headers);
-					},
-
-					status(code) {
-						result.status = code;
-					},
-
-					write(data) {
-						result.body += data;
-					},
-
-					end(data) {
-						result.body += data;
-						fulfil(result);
-					}
-				};
-
-				middleware(req, res, () => {
-					fulfil(result);
-				});
-			});
-		}
+		nightmare.on('page', (type, ...args) => {
+			if (type === 'error') {
+				console.error(args[1]);
+			} else {
+				console.warn(type, args);
+			}
+		});

 		before(() => {
-			process.chdir(path.resolve(__dirname, '../app'));
-
-			process.env.NODE_ENV = env;
-
-			let exec_promise = Promise.resolve();
-			let sapper;
-
-			if (env === 'production') {
-				const cli = path.resolve(__dirname, '../../cli.js');
-				exec_promise = exec(`node ${cli} export`);
-			}
-
-			return exec_promise.then(() => {
-				const resolved = require.resolve('../../middleware.js');
-				delete require.cache[resolved];
-				delete require.cache[require.resolve('../../core.js')]; // TODO remove this
-
-				sapper = require(resolved);
-
-				return require('get-port')();
-			}).then(port => {
-				PORT = port;
-				base = `http://localhost:${PORT}`;
-
-				Nightmare.action('init', function(done) {
-					this.evaluate_now(() => window.init(), done);
+			const promise = mode === 'production'
+				? exec(`node ${cli} build -l`).then(() => ports.find(3000))
+				: ports.find(3000).then(port => {
+					exec(`node ${cli} dev`);
+					return ports.wait(port).then(() => port);
 				});

-				global.fetch = (url, opts) => {
-					if (url[0] === '/') url = `${base}${url}`;
-					return fetch(url, opts);
-				};
+			return promise.then(port => {
+				base = `http://localhost:${port}`;
+				if (basepath) base += basepath;
+
+				const dir = mode === 'production' ? 'build' : '.sapper';
+
+				if (mode === 'production') {
+					assert.ok(fs.existsSync('build/index.js'));
+				}
+
+				proc = require('child_process').fork(`${dir}/server.js`, {
+					cwd: process.cwd(),
+					env: {
+						NODE_ENV: mode,
+						BASEPATH: basepath,
+						SAPPER_DEST: dir,
+						PORT: port
+					}
+				});
+
+				let handler;
+
+				proc.on('message', message => {
+					if (message.__sapper__) {
+						if (message.event === 'basepath') {
+							captured_basepath = basepath;
+						}
+						return;
+					}
+
+					if (handler) handler(message);
+				});

-				let captured;
 				capture = fn => {
-					const result = captured = [];
-					return fn().then(() => {
-						captured = null;
-						return result;
+					return new Promise((fulfil, reject) => {
+						const captured = [];
+
+						let start = Date.now();
+
+						handler = message => {
+							if (message.type === 'ready') {
+								fn().then(() => {
+									proc.send({
+										action: 'end'
+									});
+								}, reject);
+							}
+
+							else if (message.type === 'done') {
+								fulfil(captured);
+								handler = null;
+							}
+
+							else {
+								captured.push(message);
+							}
+						};
+
+						proc.send({
+							action: 'start'
+						});
 					});
 				};
-
-				const app = express();
-
-				app.use(serve('assets'));
-
-				app.use((req, res, next) => {
-					if (captured) captured.push(req);
-					next();
-				});
-
-				middleware = sapper();
-				app.use(middleware);
-
-				return new Promise((fulfil, reject) => {
-					server = app.listen(PORT, err => {
-						if (err) reject(err);
-						else fulfil();
-					});
-				});
 			});
 		});

 		after(() => {
-			server.close();
-			middleware.close();
-
 			// give a chance to clean up
-			return new Promise(fulfil => setTimeout(fulfil, 500));
+			return Promise.all([
+				nightmare.end(),
+				new Promise(fulfil => {
+					proc.on('exit', fulfil);
+					proc.kill();
+				})
+			]);
 		});

 		describe('basic functionality', () => {
-			beforeEach(() => {
-				nightmare = new Nightmare();
-
-				nightmare.on('console', (type, ...args) => {
-					console[type](...args);
-				});
-
-				nightmare.on('page', (type, ...args) => {
-					if (type === 'error') {
-						console.error(args[1]);
-					} else {
-						console.warn(type, args);
-					}
-				});
-			});
-
-			afterEach(() => {
-				return nightmare.end();
-			});
-
 			it('serves /', () => {
 				return nightmare.goto(base).page.title().then(title => {
 					assert.equal(title, 'Great success!');
@@ -190,16 +260,16 @@ function run(env) {
 			});

 			it('navigates to a new page without reloading', () => {
-				return nightmare.goto(base).init().wait(100)
+				return nightmare.goto(base).init().prefetchRoutes()
 					.then(() => {
-						return capture(() => nightmare.click('a[href="/about"]'));
+						return capture(() => nightmare.click('a[href="about"]'));
 					})
 					.then(requests => {
 						assert.deepEqual(requests.map(r => r.url), []);
 						return nightmare.path();
 					})
 					.then(path => {
-						assert.equal(path, '/about');
+						assert.equal(path, `${basepath}/about`);
 						return nightmare.title();
 					})
 					.then(title => {
@@ -212,7 +282,7 @@ function run(env) {
 					.goto(`${base}/about`)
 					.init()
 					.click('.goto')
-					.wait(() => window.location.pathname === '/blog/what-is-sapper')
+					.wait(url => window.location.pathname === url, `${basepath}/blog/what-is-sapper`)
 					.wait(100)
 					.title()
 					.then(title => {
@@ -221,18 +291,16 @@ function run(env) {
 			});

 			it('prefetches programmatically', () => {
-				return nightmare
-					.goto(`${base}/about`)
-					.init()
+				return capture(() => nightmare.goto(`${base}/about`).init())
 					.then(() => {
 						return capture(() => {
 							return nightmare
 								.click('.prefetch')
-								.wait(100);
+								.wait(200);
 						});
 					})
 					.then(requests => {
-						assert.ok(!!requests.find(r => r.url === '/api/blog/why-the-name'));
+						assert.ok(!!requests.find(r => r.url === `/blog/why-the-name.json`));
 					});
 			});

@@ -246,30 +314,31 @@ function run(env) {
 					});
 			});

-			it('reuses prefetch promise', () => {
+			it.skip('reuses prefetch promise', () => {
 				return nightmare
 					.goto(`${base}/blog`)
-					.init().wait(100)
+					.init()
 					.then(() => {
 						return capture(() => {
 							return nightmare
-								.mouseover('[href="/blog/what-is-sapper"]')
+								.evaluate(() => {
+									const a = document.querySelector('[href="blog/what-is-sapper"]');
+									a.dispatchEvent(new MouseEvent('mousemove'));
+								})
 								.wait(200);
 						});
 					})
 					.then(mouseover_requests => {
-						assert.deepEqual(mouseover_requests.map(r => r.url), [
-							'/api/blog/what-is-sapper'
-						]);
+						assert.ok(mouseover_requests.findIndex(r => r.url === `/blog/what-is-sapper.json`) !== -1);

 						return capture(() => {
 							return nightmare
-								.click('[href="/blog/what-is-sapper"]')
+								.click('[href="blog/what-is-sapper"]')
 								.wait(200);
 						});
 					})
 					.then(click_requests => {
-						assert.deepEqual(click_requests.map(r => r.url), []);
+						assert.ok(click_requests.findIndex(r => r.url === `/blog/what-is-sapper.json`) === -1);
 					});
 			});

@@ -277,13 +346,13 @@ function run(env) {
 				return nightmare
 					.goto(base)
 					.init()
-					.click('a[href="/slow-preload"]')
+					.click('a[href="slow-preload"]')
 					.wait(100)
-					.click('a[href="/about"]')
+					.click('a[href="about"]')
 					.wait(100)
 					.then(() => nightmare.path())
 					.then(path => {
-						assert.equal(path, '/about');
+						assert.equal(path, `${basepath}/about`);
 						return nightmare.title();
 					})
 					.then(title => {
@@ -292,7 +361,7 @@ function run(env) {
 					})
 					.then(() => nightmare.path())
 					.then(path => {
-						assert.equal(path, '/about');
+						assert.equal(path, `${basepath}/about`);
 						return nightmare.title();
 					})
 					.then(title => {
@@ -305,7 +374,7 @@ function run(env) {
 					.goto(`${base}/show-url`)
 					.init()
 					.evaluate(() => document.querySelector('p').innerHTML)
-					.end().then(html => {
+					.then(html => {
 						assert.equal(html, `URL is /show-url`);
 					});
 			});
@@ -336,97 +405,255 @@ function run(env) {
 						assert.ok(matches);
 					});
 			});
+
+			it('redirects on server', () => {
+				return nightmare.goto(`${base}/redirect-from`)
+					.path()
+					.then(path => {
+						assert.equal(path, `${basepath}/redirect-to`);
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'redirected');
+					});
+			});
+
+			it('redirects in client', () => {
+				return nightmare.goto(base)
+					.wait('[href="redirect-from"]')
+					.click('[href="redirect-from"]')
+					.wait(200)
+					.path()
+					.then(path => {
+						assert.equal(path, `${basepath}/redirect-to`);
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'redirected');
+					});
+			});
+
+			it('handles 4xx error on server', () => {
+				return nightmare.goto(`${base}/blog/nope`)
+					.path()
+					.then(path => {
+						assert.equal(path, `${basepath}/blog/nope`);
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'Not found')
+					});
+			});
+
+			it('handles 4xx error in client', () => {
+				return nightmare.goto(base)
+					.init()
+					.click('[href="blog/nope"]')
+					.wait(200)
+					.path()
+					.then(path => {
+						assert.equal(path, `${basepath}/blog/nope`);
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'Not found');
+					});
+			});
+
+			it('handles non-4xx error on server', () => {
+				return nightmare.goto(`${base}/blog/throw-an-error`)
+					.path()
+					.then(path => {
+						assert.equal(path, `${basepath}/blog/throw-an-error`);
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'Internal server error')
+					});
+			});
+
+			it('handles non-4xx error in client', () => {
+				return nightmare.goto(base)
+					.init()
+					.click('[href="blog/throw-an-error"]')
+					.wait(200)
+					.path()
+					.then(path => {
+						assert.equal(path, `${basepath}/blog/throw-an-error`);
+					})
+					.then(() => nightmare.page.title())
+					.then(title => {
+						assert.equal(title, 'Internal server error');
+					});
+			});
+
+			it('does not attempt client-side navigation to server routes', () => {
+				return nightmare.goto(`${base}/blog/how-is-sapper-different-from-next`)
+					.init()
+					.click(`[href="blog/how-is-sapper-different-from-next.json"]`)
+					.wait(200)
+					.page.text()
+					.then(text => {
+						JSON.parse(text);
+					});
+			});
+
+			it('does not serve error page for non-page errors', () => {
+				return nightmare.goto(`${base}/throw-an-error`)
+					.page.text()
+					.then(text => {
+						assert.equal(text, 'nope');
+					});
+			});
+
+			it('encodes routes', () => {
+				return nightmare.goto(`${base}/fünke`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, `I'm afraid I just blue myself`);
+					});
+			});
+
+			it('serializes Set objects returned from preload', () => {
+				return nightmare.goto(`${base}/preload-values/set`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'true');
+						return nightmare.init().page.title();
+					})
+					.then(title => {
+						assert.equal(title, 'true');
+					});
+			});
+
+			it('bails on custom classes returned from preload', () => {
+				return nightmare.goto(`${base}/preload-values/custom-class`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, '42');
+						return nightmare.init().page.title();
+					})
+					.then(title => {
+						assert.equal(title, '42');
+					});
+			});
+
+			it('renders store props', () => {
+				return nightmare.goto(`${base}/store`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'Stored title');
+						return nightmare.init().page.title();
+					})
+					.then(title => {
+						assert.equal(title, 'Stored title');
+					});
+			});
+
+			it('sends cookies when using this.fetch with credentials: "include"', () => {
+				return nightmare.goto(`${base}/credentials?creds=include`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'woohoo!');
+					});
+			});
+
+			it('does not send cookies when using this.fetch without credentials', () => {
+				return nightmare.goto(`${base}/credentials`)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'unauthorized');
+					});
+			});
+
+			it('delegates to fetch on the client', () => {
+				return nightmare.goto(base).init()
+					.click('[href="credentials?creds=include"]')
+					.wait(100)
+					.page.title()
+					.then(title => {
+						assert.equal(title, 'woohoo!');
+					});
+			});
+
+			it('includes service worker', () => {
+				return nightmare.goto(base).page.html().then(html => {
+					assert.ok(html.indexOf('service-worker.js') !== -1);
+				});
+			});
+
+			it('sets preloading true when appropriate', () => {
+				return nightmare
+					.goto(base)
+					.init()
+					.click('a[href="slow-preload"]')
+					.wait(100)
+					.evaluate(() => {
+						const progress = document.querySelector('progress');
+						return !!progress;
+					})
+					.then(hasProgressIndicator => {
+						assert.ok(hasProgressIndicator);
+					})
+					.then(() => nightmare.evaluate(() => window.fulfil()))
+					.then(() => nightmare.evaluate(() => {
+						const progress = document.querySelector('progress');
+						return !!progress;
+					}))
+					.then(hasProgressIndicator => {
+						assert.ok(!hasProgressIndicator);
+					});
+			});
+
+			it('emits a basepath', () => {
+				assert.equal(captured_basepath, basepath);
+			});
+
+			// skipped because Nightmare doesn't seem to focus the <a> correctly
+			it.skip('resets the active element after navigation', () => {
+				return nightmare
+					.goto(base)
+					.init()
+					.click('a[href="about"]')
+					.wait(100)
+					.evaluate(() => document.activeElement.nodeName)
+					.then(name => {
+						assert.equal(name, 'BODY');
+					});
+			});
 		});

 		describe('headers', () => {
 			it('sets Content-Type and Link...preload headers', () => {
-				return get('/').then(({ headers }) => {
+				return capture(() => nightmare.goto(base)).then(requests => {
+					const { headers } = requests[0];
+
 					assert.equal(
-						headers['Content-Type'],
+						headers['content-type'],
 						'text/html'
 					);

+					const str = ['main', '_\\.\\d+']
+						.map(file => {
+							return `<${basepath}/client/[^/]+/${file}\\.js>;rel="preload";as="script"`;
+						})
+						.join(', ');
+
+					const regex = new RegExp(str);
+
 					assert.ok(
-						/<\/client\/main.\w+\.js>;rel="preload";as="script", <\/client\/_.\d+.\w+.js>;rel="preload";as="script"/.test(headers['Link']),
-						headers['Link']
+						regex.test(headers['link']),
+						headers['link']
 					);
 				});
 			});
 		});
-
-		if (env === 'production') {
-			describe('export', () => {
-				it('export all pages', () => {
-					const dest = path.resolve(__dirname, '../app/dist');
-
-					// Pages that should show up in the extraction directory.
-					const expectedPages = [
-						'index.html',
-						'about/index.html',
-						'slow-preload/index.html',
-
-						'blog/index.html',
-						'blog/a-very-long-post/index.html',
-						'blog/how-can-i-get-involved/index.html',
-						'blog/how-is-sapper-different-from-next/index.html',
-						'blog/how-to-use-sapper/index.html',
-						'blog/what-is-sapper/index.html',
-						'blog/why-the-name/index.html',
-
-						'api/blog/contents',
-						'api/blog/a-very-long-post',
-						'api/blog/how-can-i-get-involved',
-						'api/blog/how-is-sapper-different-from-next',
-						'api/blog/how-to-use-sapper',
-						'api/blog/what-is-sapper',
-						'api/blog/why-the-name',
-
-						'favicon.png',
-						'global.css',
-						'great-success.png',
-						'manifest.json',
-						'service-worker.js',
-						'svelte-logo-192.png',
-						'svelte-logo-512.png',
-					];
-					// Client scripts that should show up in the extraction directory.
-					const expectedClientRegexes = [
-						/client\/_\..*?\.js/,
-						/client\/about\..*?\.js/,
-						/client\/blog_\$slug\$\..*?\.js/,
-						/client\/blog\..*?\.js/,
-						/client\/main\..*?\.js/,
-						/client\/show_url\..*?\.js/,
-						/client\/slow_preload\..*?\.js/,
-					];
-					const allPages = walkSync(dest);
-
-					expectedPages.forEach((expectedPage) => {
-						assert.ok(allPages.includes(expectedPage),
-						    `Could not find page matching ${expectedPage}`);
-					});
-					expectedClientRegexes.forEach((expectedRegex) => {
-						// Ensure each client page regular expression matches at least one
-						// generated page.
-						let matched = false;
-						for (const page of allPages) {
-							if (expectedRegex.test(page)) {
-								matched = true;
-								break;
-							}
-						}
-						assert.ok(matched,
-							  `Could not find client page matching ${expectedRegex}`);
-					});
-				});
-			});
-		}
 	});
 }

 function exec(cmd) {
 	return new Promise((fulfil, reject) => {
-		const parts = cmd.split(' ');
+		const parts = cmd.trim().split(' ');
 		const proc = require('child_process').spawn(parts.shift(), parts);

 		proc.stdout.on('data', data => {
--- a/test/unit/create_routes.test.js
+++ b/test/unit/create_routes.test.js
@@ -1,25 +1,142 @@
 const assert = require('assert');
-const { create_routes } = require('../../core.js');
+const { create_routes } = require('../../dist/core.ts.js');

 describe('create_routes', () => {
-	it('sorts routes correctly', () => {
+	it('sorts handlers correctly', () => {
 		const routes = create_routes({
-			files: ['index.html', 'about.html', '[wildcard].html', 'post/foo.html', 'post/[id].html', 'post/bar.html']
+			files: ['foo.html', 'foo.js']
 		});

 		assert.deepEqual(
-			routes.map(r => r.file),
+			routes.map(r => r.handlers),
+			[
+				[
+					{
+						type: 'route',
+						file: 'foo.js'
+					},
+					{
+						type: 'page',
+						file: 'foo.html'
+					}
+				]
+			]
+		)
+	});
+
+	it('encodes characters not allowed in path', () => {
+		const routes = create_routes({
+			files: [
+				'"',
+				'#',
+				'?'
+			]
+		});
+
+		assert.deepEqual(
+			routes.map(r => r.pattern),
+			[
+				/^\/%22\/?$/,
+				/^\/%23\/?$/,
+				/^\/%3F\/?$/
+			]
+		);
+	});
+
+	it('sorts routes correctly', () => {
+		const routes = create_routes({
+			files: ['index.html', 'about.html', 'post/f[xx].html', '[wildcard].html', 'post/foo.html', 'post/[id].html', 'post/bar.html', 'post/[id].json.js']
+		});
+
+		assert.deepEqual(
+			routes.map(r => r.handlers[0].file),
 			[
 				'index.html',
 				'about.html',
-				'post/foo.html',
 				'post/bar.html',
+				'post/foo.html',
+				'post/f[xx].html',
+				'post/[id].json.js',
 				'post/[id].html',
 				'[wildcard].html'
 			]
 		);
 	});

+	it('prefers index page to nested route', () => {
+		let routes = create_routes({
+			files: [
+				'api/examples/[slug].js',
+				'api/examples/index.js',
+				'blog/[slug].html',
+				'api/gists/[id].js',
+				'api/gists/index.js',
+				'4xx.html',
+				'5xx.html',
+				'blog/index.html',
+				'blog/rss.xml.js',
+				'guide/index.html',
+				'index.html'
+			]
+		});
+
+		assert.deepEqual(
+			routes.map(r => r.handlers[0].file),
+			[
+				'4xx.html',
+				'5xx.html',
+				'index.html',
+				'guide/index.html',
+				'blog/index.html',
+				'blog/rss.xml.js',
+				'blog/[slug].html',
+				'api/examples/index.js',
+				'api/examples/[slug].js',
+				'api/gists/index.js',
+				'api/gists/[id].js',
+			]
+		);
+
+		routes = create_routes({
+			files: [
+				'4xx.html',
+				'5xx.html',
+				'api/blog/[slug].js',
+				'api/blog/index.js',
+				'api/guide/contents.js',
+				'api/guide/index.js',
+				'blog/[slug].html',
+				'blog/index.html',
+				'blog/rss.xml.js',
+				'gist/[id].js',
+				'gist/create.js',
+				'guide/index.html',
+				'index.html',
+				'repl/index.html'
+			]
+		});
+
+		assert.deepEqual(
+			routes.map(r => r.handlers[0].file),
+			[
+				'4xx.html',
+				'5xx.html',
+				'index.html',
+				'guide/index.html',
+				'blog/index.html',
+				'blog/rss.xml.js',
+				'blog/[slug].html',
+				'gist/create.js',
+				'gist/[id].js',
+				'repl/index.html',
+				'api/guide/index.js',
+				'api/guide/contents.js',
+				'api/blog/index.js',
+				'api/blog/[slug].js',
+			]
+		);
+	});
+
 	it('generates params', () => {
 		const routes = create_routes({
 			files: ['index.html', 'about.html', '[wildcard].html', 'post/[id].html']
@@ -30,7 +147,7 @@ describe('create_routes', () => {
 		for (let i = 0; i < routes.length; i += 1) {
 			const route = routes[i];
 			if (params = route.exec('/post/123')) {
-				file = route.file;
+				file = route.handlers[0].file;
 				break;
 			}
 		}
@@ -47,7 +164,7 @@ describe('create_routes', () => {
 		});

 		assert.deepEqual(
-			routes.map(r => r.file),
+			routes.map(r => r.handlers[0].file),
 			[
 				'index.html',
 				'e/f/g/h.html'
@@ -55,6 +172,17 @@ describe('create_routes', () => {
 		);
 	});

+	it('ignores files and directories with leading dots except .well-known', () => {
+		const routes = create_routes({
+			files: ['.well-known', '.unknown']
+		});
+
+		assert.deepEqual(
+			routes.map(r => r.handlers[0].file),
+			['.well-known']
+		);
+	});
+
 	it('matches /foo/:bar before /:baz/qux', () => {
 		const a = create_routes({
 			files: ['foo/[bar].html', '[baz]/qux.html']
@@ -64,12 +192,12 @@ describe('create_routes', () => {
 		});

 		assert.deepEqual(
-			a.map(r => r.file),
+			a.map(r => r.handlers[0].file),
 			['foo/[bar].html', '[baz]/qux.html']
 		);

 		assert.deepEqual(
-			b.map(r => r.file),
+			b.map(r => r.handlers[0].file),
 			['foo/[bar].html', '[baz]/qux.html']
 		);
 	});
@@ -79,13 +207,7 @@ describe('create_routes', () => {
 			create_routes({
 				files: ['[foo].html', '[bar]/index.html']
 			});
-		}, /The \[foo\].html and \[bar\]\/index.html routes clash/);
-
-		assert.throws(() => {
-			create_routes({
-				files: ['foo.html', 'foo.js']
-			});
-		}, /The foo.html and foo.js routes clash/);
+		}, /The \[foo\] and \[bar\]\/index routes clash/);
 	});

 	it('matches nested routes', () => {
@@ -108,7 +230,7 @@ describe('create_routes', () => {
 		});

 		assert.deepEqual(
-			routes.map(r => r.file),
+			routes.map(r => r.handlers[0].file),
 			['settings.html', 'settings/[submenu].html']
 		);
 	});
@@ -133,4 +255,33 @@ describe('create_routes', () => {
 			b: null
 		});
 	});
+
+	it('matches a dynamic part within a part', () => {
+		const route = create_routes({
+			files: ['things/[slug].json.js']
+		})[0];
+
+		assert.deepEqual(route.exec('/things/foo.json'), {
+			slug: 'foo'
+		});
+	});
+
+	it('matches multiple dynamic parts within a part', () => {
+		const route = create_routes({
+			files: ['things/[id]_[slug].json.js']
+		})[0];
+
+		assert.deepEqual(route.exec('/things/someid_someslug.json'), {
+			id: 'someid',
+			slug: 'someslug'
+		});
+	});
+
+	it('fails if dynamic params are not separated', () => {
+		assert.throws(() => {
+			create_routes({
+				files: ['[foo][bar].js']
+			});
+		}, /Invalid route \[foo\]\[bar\]\.js — parameters must be separated/);
+	});
 });
--- a/webpack.js
+++ b/webpack.js
@@ -0,0 +1,2 @@
+// TODO write to this file, instead of webpack.ts.js
+module.exports = require('./dist/webpack.ts.js');
--- a/webpack/config.js
+++ b/webpack/config.js
@@ -0,0 +1,2 @@
+// TODO deprecate this file in favour of sapper/webpack.js
+module.exports = require('../dist/webpack.ts.js');
				`@@ -0,0 +1 @@`
				`module.exports = require('./dist/api.ts.js');`