-> v0.7.6

Merge pull request #147 from sveltejs/gh-138
don't serve error page for unhandled server route errors
2026-01-13 11:35:28 +00:00 · 2018-02-28 17:14:38 -05:00 · 2018-02-28 17:11:52 -05:00 · 2018-02-28 16:59:39 -05:00 · 2018-02-28 16:54:38 -05:00 · 2018-02-28 16:20:42 -05:00
56 changed files with 1601 additions and 8161 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
@@ -3,6 +3,7 @@ yarn.lock
 node_modules
 cypress/screenshots
 test/app/.sapper
+test/app/app/manifest
 runtime.js
 runtime.js.map
 cli.js
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,44 @@
 # sapper changelog

+## 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))
+
 ## 0.6.3

 * Ignore non-HTML responses when crawling during `export`
--- a/hmr-client.js
+++ b/hmr-client.js
@@ -0,0 +1,28 @@
+let source;
+
+function check() {
+	if (module.hot.status() === 'idle') {
+		module.hot.check(true).then(modules => {
+			console.log(`HMR updated`);
+		});
+	}
+}
+
+export function connect(port) {
+	if (source || !window.EventSource) return;
+
+	source = new EventSource(`http://localhost:${port}/hmr`);
+
+	source.onopen = function(event) {
+		console.log(`HMR connected`);
+	};
+
+	source.onmessage = function(event) {
+		const data = JSON.parse(event.data);
+		if (!data) return; // just a heartbeat
+
+		if (data.status === 'completed') {
+			check();
+		}
+	};
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "sapper",
-  "version": "0.6.3",
+  "version": "0.7.6",
  "description": "Military-grade apps, engineered by Svelte",
  "main": "middleware.js",
  "bin": {
@@ -12,6 +12,7 @@
    "middleware.js",
    "runtime",
    "runtime.js",
+    "hmr-client.js",
    "webpack"
  ],
  "directories": {
@@ -24,42 +25,47 @@
    "code-frame": "^5.0.0",
    "escape-html": "^1.0.3",
    "express": "^4.16.2",
+    "get-port": "^3.2.0",
    "glob": "^7.1.2",
    "locate-character": "^2.0.5",
+    "mime": "^2.2.0",
    "mkdirp": "^0.5.1",
+    "mri": "^1.1.0",
    "node-fetch": "^1.7.3",
    "relative": "^3.0.2",
    "require-relative": "^0.8.7",
    "rimraf": "^2.6.2",
    "sander": "^0.6.0",
    "serialize-javascript": "^1.4.0",
+    "source-map-support": "^0.5.3",
+    "tslib": "^1.8.1",
    "url-parse": "^1.2.0",
+    "wait-port": "^0.2.2",
    "walk-sync": "^0.3.2",
-    "webpack": "^3.10.0",
-    "webpack-hot-middleware": "^2.21.0"
+    "webpack": "^3.10.0"
  },
  "devDependencies": {
    "@std/esm": "^0.19.7",
    "@types/glob": "^5.0.34",
    "@types/mkdirp": "^0.5.2",
    "@types/rimraf": "^2.0.2",
+    "compression": "^1.7.1",
    "css-loader": "^0.28.7",
+    "electron": "^1.8.2",
    "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",
+    "rollup-plugin-json": "^2.3.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"
+    "typescript": "^2.6.2"
  },
  "scripts": {
    "cy:open": "cypress open",
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,4 +1,6 @@
 import typescript from 'rollup-plugin-typescript';
+import string from 'rollup-plugin-string';
+import json from 'rollup-plugin-json';
 import pkg from './package.json';

 const external = [].concat(
@@ -11,91 +13,31 @@ const paths = {
 	'sapper/core.js': './core.js'
 };

+const plugins = [
+	string({
+		include: '**/*.md'
+	}),
+	json(),
+	typescript({
+		typescript: require('typescript')
+	})
+];
+
 export default [
-	// cli.js
-	{
-		input: 'src/cli/index.ts',
-		output: {
-			file: 'cli.js',
-			format: 'cjs',
-			banner: '#!/usr/bin/env node',
-			paths,
-			sourcemap: true
-		},
-		external,
-		plugins: [
-			typescript({
-				typescript: require('typescript')
-			})
-		]
+	{ name: 'cli', banner: true },
+	{ name: 'core' },
+	{ 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
 	},
-
-	// core.js
-	{
-		input: 'src/core/index.ts',
-		output: {
-			file: 'core.js',
-			format: 'cjs',
-			banner: '#!/usr/bin/env node',
-			paths,
-			sourcemap: true
-		},
-		external,
-		plugins: [
-			typescript({
-				typescript: require('typescript')
-			})
-		]
-	},
-
-	// middleware.js
-	{
-		input: 'src/middleware/index.ts',
-		output: {
-			file: 'middleware.js',
-			format: 'cjs',
-			paths,
-			sourcemap: true
-		},
-		external,
-		plugins: [
-			typescript({
-				typescript: require('typescript')
-			})
-		]
-	},
-
-	// runtime.js
-	{
-		input: 'src/runtime/index.ts',
-		output: {
-			file: 'runtime.js',
-			format: 'es',
-			paths,
-			sourcemap: true
-		},
-		external,
-		plugins: [
-			typescript({
-				typescript: require('typescript')
-			})
-		]
-	},
-
-	// webpack/config.js
-	{
-		input: 'src/webpack/index.ts',
-		output: {
-			file: 'webpack/config.js',
-			format: 'cjs',
-			paths,
-			sourcemap: true
-		},
-		external,
-		plugins: [
-			typescript({
-				typescript: require('typescript')
-			})
-		]
-	}
-];
+	external,
+	plugins
+}));
--- a/src/cli/build.ts
+++ b/src/cli/build.ts
@@ -0,0 +1,57 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import mkdirp from 'mkdirp';
+import rimraf from 'rimraf';
+import { create_compilers, create_app, create_routes, create_serviceworker } from 'sapper/core.js';
+
+export default async 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, '**/*'));
+
+	const routes = create_routes({ src });
+
+	// create app/manifest/client.js and app/manifest/server.js
+	create_app({ routes, src, dev });
+
+	const { client, server, serviceworker } = create_compilers();
+
+	const client_stats = await compile(client);
+	fs.writeFileSync(path.join(dest, 'client_info.json'), JSON.stringify(client_stats.toJson()));
+
+	await compile(server);
+
+	if (serviceworker) {
+		create_serviceworker({
+			routes,
+			client_files: client_stats.toJson().assets.map((chunk: { name: string }) => `/client/${chunk.name}`),
+			src
+		});
+
+		await compile(serviceworker);
+	}
+}
+
+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/cli/dev.ts
+++ b/src/cli/dev.ts
@@ -0,0 +1,229 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as net from 'net';
+import * as chalk from 'chalk';
+import * as child_process from 'child_process';
+import * as http from 'http';
+import mkdirp from 'mkdirp';
+import rimraf from 'rimraf';
+import { wait_for_port } from './utils';
+import { create_compilers, create_app, create_routes, create_serviceworker, create_template } from 'sapper/core.js';
+
+type Deferred = {
+	promise?: Promise<any>;
+	fulfil?: (value?: any) => void;
+	reject?: (err: Error) => void;
+}
+
+function deferred() {
+	const d: Deferred = {};
+
+	d.promise = new Promise((fulfil, reject) => {
+		d.fulfil = fulfil;
+		d.reject = reject;
+	});
+
+	return d;
+}
+
+function create_hot_update_server(port: number, interval = 10000) {
+	const clients = new Set();
+
+	const server = http.createServer((req, res) => {
+		if (req.url !== '/hmr') return;
+
+		req.socket.setKeepAlive(true);
+		res.writeHead(200, {
+			'Access-Control-Allow-Origin': '*',
+			'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');
+
+		clients.add(res);
+		req.on('close', () => {
+			clients.delete(res);
+		});
+	});
+
+	server.listen(port);
+
+	function send(data: any) {
+		clients.forEach(client => {
+			client.write(`data: ${JSON.stringify(data)}\n\n`);
+		});
+	}
+
+	setInterval(() => {
+		send(null)
+	}, interval);
+
+	return { send };
+}
+
+export default async function dev(src: string, dir: string) {
+	rimraf.sync(dir);
+	mkdirp.sync(dir);
+
+	const chokidar = require('chokidar');
+
+	// initial build
+	const dev_port = await require('get-port')(10000);
+
+	const routes = create_routes({ src });
+	create_app({ routes, src, dev: true, dev_port });
+
+	const hot_update_server = create_hot_update_server(dev_port);
+
+	// TODO watch the configs themselves?
+	const compilers = create_compilers();
+
+	function watch_files(pattern: string, callback: () => void) {
+		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 });
+		create_app({ routes, src, dev: true, dev_port });
+	});
+
+	watch_files('app/template.html', () => {
+		const template = create_template();
+		// TODO reload current page?
+	});
+
+	let proc: child_process.ChildProcess;
+
+	const deferreds = {
+		server: deferred(),
+		client: deferred()
+	};
+
+	const times = {
+		client_start: Date.now(),
+		server_start: Date.now(),
+		serviceworker_start: Date.now()
+	};
+
+	compilers.server.plugin('invalid', () => {
+		times.server_start = Date.now();
+		// TODO print message
+		deferreds.server = deferred();
+	});
+
+	compilers.server.watch({}, (err: Error, stats: any) => {
+		if (err) {
+			console.error(chalk.red(err.message));
+		} else if (stats.hasErrors()) {
+			// print errors. TODO notify client
+			stats.toJson().errors.forEach((error: Error) => {
+				console.error(error); // TODO make this look nice
+			});
+		} else {
+			console.log(`built server in ${Date.now() - times.server_start}ms`); // TODO prettify
+
+			const server_info = stats.toJson();
+			fs.writeFileSync(path.join(dir, 'server_info.json'), JSON.stringify(server_info, null, '  '));
+
+			deferreds.client.promise.then(() => {
+				function restart() {
+					wait_for_port(3000, deferreds.server.fulfil); // TODO control port
+				}
+
+				if (proc) {
+					proc.kill();
+					proc.on('exit', restart);
+				} else {
+					restart();
+				}
+
+				proc = child_process.fork(`${dir}/server.js`, [], {
+					cwd: process.cwd(),
+					env: Object.assign({}, process.env)
+				});
+			});
+		}
+	});
+
+	compilers.client.plugin('invalid', (filename: string) => {
+		times.client_start = Date.now();
+
+		deferreds.client = deferred();
+
+		// TODO we should delete old assets. due to a webpack bug
+		// i don't even begin to comprehend, this is apparently
+		// quite difficult
+	});
+
+	compilers.client.watch({}, (err: Error, stats: any) => {
+		if (err) {
+			console.error(chalk.red(err.message));
+		} else if (stats.hasErrors()) {
+			// print errors. TODO notify client
+			stats.toJson().errors.forEach((error: Error) => {
+				console.error(error); // TODO make this look nice
+			});
+		} else {
+			console.log(`built client in ${Date.now() - times.client_start}ms`); // TODO prettify
+
+			const client_info = stats.toJson();
+			fs.writeFileSync(path.join(dir, 'client_info.json'), JSON.stringify(client_info, null, '  '));
+			deferreds.client.fulfil();
+
+			const client_files = client_info.assets.map((chunk: { name: string }) => `/client/${chunk.name}`);
+
+			deferreds.server.promise.then(() => {
+				hot_update_server.send({
+					status: 'completed'
+				});
+			});
+
+			create_serviceworker({
+				routes: create_routes({ src }),
+				client_files,
+				src
+			});
+
+			watch_serviceworker();
+		}
+	});
+
+	let watch_serviceworker = compilers.serviceworker
+		? function() {
+			watch_serviceworker = noop;
+
+			compilers.serviceworker.plugin('invalid', (filename: string) => {
+				times.serviceworker_start = Date.now();
+			});
+
+			compilers.serviceworker.watch({}, (err: Error, stats: any) => {
+				if (err) {
+					// TODO notify client
+				} else if (stats.hasErrors()) {
+					// print errors. TODO notify client
+					stats.toJson().errors.forEach((error: Error) => {
+						console.error(error); // TODO make this look nice
+					});
+				} else {
+					console.log(`built service worker in ${Date.now() - times.serviceworker_start}ms`); // TODO prettify
+
+					const serviceworker_info = stats.toJson();
+					fs.writeFileSync(path.join(dir, 'serviceworker_info.json'), JSON.stringify(serviceworker_info, null, '  '));
+				}
+			});
+		}
+		: noop;
+}
+
+function noop() {}
--- a/src/cli/export.ts
+++ b/src/cli/export.ts
@@ -0,0 +1,91 @@
+import * as child_process from 'child_process';
+import * as path from 'path';
+import * as sander from 'sander';
+import express from 'express';
+import cheerio from 'cheerio';
+import URL from 'url-parse';
+import fetch from 'node-fetch';
+import { wait_for_port } from './utils';
+
+const { OUTPUT_DIR = 'dist' } = process.env;
+
+const app = express();
+
+function read_json(file: string) {
+	return JSON.parse(sander.readFileSync(file, { encoding: 'utf-8' }));
+}
+
+export default async function exporter(dir: string) { // dir === '.sapper'
+	// Prep output directory
+	sander.rimrafSync(OUTPUT_DIR);
+
+	sander.copydirSync('assets').to(OUTPUT_DIR);
+	sander.copydirSync(dir, 'client').to(OUTPUT_DIR, 'client');
+	sander.copyFileSync(dir, 'service-worker.js').to(OUTPUT_DIR, 'service-worker.js');
+
+	const port = await require('get-port')(3000);
+
+	const origin = `http://localhost:${port}`;
+
+	const proc = child_process.fork(path.resolve(`${dir}/server.js`), [], {
+		cwd: process.cwd(),
+		env: {
+			PORT: port,
+			NODE_ENV: 'production',
+			SAPPER_EXPORT: 'true'
+		}
+	});
+
+	const seen = new Set();
+	const saved = new Set();
+
+	proc.on('message', message => {
+		if (!message.__sapper__) return;
+
+		const url = new URL(message.url, origin);
+
+		if (saved.has(url.pathname)) return;
+		saved.add(url.pathname);
+
+		if (message.type === 'text/html') {
+			const dest = `${OUTPUT_DIR}/${url.pathname}/index.html`;
+			sander.writeFileSync(dest, message.body);
+		} else {
+			const dest = `${OUTPUT_DIR}/${url.pathname}`;
+			sander.writeFileSync(dest, message.body);
+		}
+	});
+
+	function handle(url: URL) {
+		if (url.origin !== origin) return;
+
+		if (seen.has(url.pathname)) return;
+		seen.add(url.pathname);
+
+		return fetch(url.href)
+			.then(r => {
+				if (r.headers.get('Content-Type') === 'text/html') {
+					return r.text().then((body: string) => {
+						const $ = cheerio.load(body);
+						const hrefs: string[] = [];
+
+						$('a[href]').each((i: number, $a) => {
+							hrefs.push($a.attribs.href);
+						});
+
+						return hrefs.reduce((promise, href) => {
+							return promise.then(() => handle(new URL(href, url.href)));
+						}, Promise.resolve());
+					});
+				}
+			})
+			.catch((err: Error) => {
+				console.error(`Error rendering ${url.pathname}: ${err.message}`);
+			});
+	}
+
+	wait_for_port(port, () => {
+		handle(new URL(origin)) // TODO all static routes
+			.then(() => proc.kill())
+	});
+}
--- a/src/cli/help.md
+++ b/src/cli/help.md
@@ -0,0 +1,20 @@
+# sapper v<@version@>
+
+https://sapper.svelte.technology
+
+> sapper dev
+
+Start a development server
+
+> sapper build
+
+Creates a production-ready version of your app
+
+> sapper export
+
+If possible, exports your app as static files, suitable for hosting on
+services like Netlify or Surge
+
+> sapper --help
+
+Shows this message
--- a/src/cli/index.ts
+++ b/src/cli/index.ts
@@ -1,13 +1,38 @@
-import { build, export as exporter } from 'sapper/core.js';
-import { dest, dev, entry, src } from '../config';
+import mri from 'mri';
+import chalk from 'chalk';
+import help from './help.md';
+import build from './build';
+import exporter from './export';
+import dev from './dev';
+import upgrade from './upgrade';
+import { dest, entry, src } from '../config';
+import * as pkg from '../../package.json';

-process.env.NODE_ENV = 'production';
+const opts = mri(process.argv.slice(2), {
+	alias: {
+		h: 'help'
+	}
+});
+
+if (opts.help) {
+	const rendered = help
+		.replace('<@version@>', pkg.version)
+		.replace(/^(.+)/gm, (m: string, $1: string) => /[#>]/.test(m) ? $1 : `  ${$1}`)
+		.replace(/^# (.+)/gm, (m: string, $1: string) => chalk.bold.underline($1))
+		.replace(/^> (.+)/gm, (m: string, $1: string) => chalk.cyan($1));
+
+	console.log(`\n${rendered}\n`);
+	process.exit(0);
+}
+
+const [cmd] = opts._;

-const cmd = process.argv[2];
 const start = Date.now();

 if (cmd === 'build') {
-	build({ dest, dev, entry, src })
+	process.env.NODE_ENV = 'production';
+
+	build({ dest, dev: false, entry, src })
 		.then(() => {
 			const elapsed = Date.now() - start;
 			console.error(`built in ${elapsed}ms`); // TODO beautify this, e.g. 'built in 4.7 seconds'
@@ -16,8 +41,10 @@ if (cmd === 'build') {
 			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
 		});
 } else if (cmd === 'export') {
+	process.env.NODE_ENV = 'production';
+
 	build({ dest, dev: false, entry, src })
-		.then(() => exporter({ src, dest }))
+		.then(() => exporter(dest))
 		.then(() => {
 			const elapsed = Date.now() - start;
 			console.error(`extracted in ${elapsed}ms`); // TODO beautify this, e.g. 'built in 4.7 seconds'
@@ -25,4 +52,10 @@ if (cmd === 'build') {
 		.catch(err => {
 			console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
 		});
+} else if (cmd === 'dev') {
+	dev(src, dest);
+} else if (cmd === 'upgrade') {
+	upgrade();
+} else {
+	console.log(`unrecognized command ${cmd} — try \`sapper --help\` for more information`);
 }
--- a/src/cli/upgrade.ts
+++ b/src/cli/upgrade.ts
@@ -0,0 +1,53 @@
+import * as fs from 'fs';
+import chalk from 'chalk';
+
+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(chalk.red(`Could not replace %sapper.main% in ${file}`));
+			} else {
+				write(file, template.replace(pattern, `%sapper.scripts%`));
+				console.log(chalk.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/cli/utils.ts
+++ b/src/cli/utils.ts
@@ -0,0 +1,24 @@
+import waitPort from 'wait-port';
+
+export function wait_for_port(port: number, cb: () => void) {
+	waitPort({ port }).then(cb);
+}
+
+// import * as net from 'net';
+
+// export function wait_for_port(port: number, cb: () => void) {
+// 	const socket = net.createConnection(port, 'localhost', () => {
+// 		cb();
+// 		socket.destroy();
+// 	});
+
+// 	socket.on('error', err => {
+// 		setTimeout(() => {
+// 			wait_for_port(port, cb);
+// 		}, 100);
+// 	});
+
+// 	setTimeout(() => {
+// 		socket.destroy();
+// 	}, 100);
+// }
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,6 +1,6 @@
 import * as path from 'path';

-export const dev = process.env.NODE_ENV !== 'production';
+export const isDev = () => 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');
@@ -9,4 +9,4 @@ 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')
-};
+};
--- 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 +1,94 @@
 import * as fs from 'fs';
 import * as path from 'path';
+import mkdirp from 'mkdirp';
 import create_routes from './create_routes';
+import { fudge_mtime, posixify, write } from './utils';
+import { Route } from '../interfaces';

-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
-}: {
+export default function create_app({ routes, src, dev, dev_port }: {
+	routes: Route[];
 	src: string;
 	dev: boolean;
-	entry: { client: string; server: string };
+	dev_port: number;
 }) {
-	const routes = create_routes({ src });
+	mkdirp.sync('app/manifest');

-	function create_client_main() {
-		const code = `[${routes
-			.filter(route => route.type === 'page')
-			.map(route => {
-				const params =
-					route.dynamic.length === 0
+	write('app/manifest/client.js', generate_client(routes, src, dev, dev_port));
+	write('app/manifest/server.js', generate_server(routes, src));
+}
+
+function generate_client(routes: Route[], src: string, dev: boolean, dev_port?: number) {
+	let code = `
+		// This file is generated by Sapper — do not edit it!
+		export const routes = [
+			${routes
+				.map(route => {
+					if (route.type !== 'page') {
+						return `{ pattern: ${route.pattern}, ignore: true }`;
+					}
+
+					const file = posixify(`../../routes/${route.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.dynamic
-								.map((part, i) => `${part}: match[${i + 1}]`)
-								.join(', ')} }`;
+						: `{ ${route.params.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(', ')}]`;
+					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();

-		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(
+			path.resolve(__dirname, 'hmr-client.js')
+		);

-		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();`;
-		}
+		code += `

-		fs.writeFileSync(entry.client, main);
-		fudge_mtime(entry.client);
+			if (module.hot) {
+				import('${hmr_client}').then(client => {
+					client.connect(${dev_port});
+				});
+			}`.replace(/^\t{3}/gm, '');
 	}

-	function create_server_routes() {
-		const imports = routes
+	return code;
+}
+
+function generate_server(routes: Route[], src: string) {
+	let code = `
+		// This file is generated by Sapper — do not edit it!
+		${routes
 			.map(route => {
-				const file = posixify(`${src}/${route.file}`);
+				const file = posixify(`../../routes/${route.file}`);
 				return route.type === 'page'
 					? `import ${route.id} from '${file}';`
 					: `import * as ${route.id} from '${file}';`;
 			})
-			.join('\n');
+			.join('\n')}

-		const exports = `export { ${routes.map(route => route.id)} };`;
+		export const routes = [
+			${routes
+				.map(route => {
+					const file = posixify(`${src}/${route.file}`);

-		fs.writeFileSync(entry.server, `${imports}\n\n${exports}`);
-		fudge_mtime(entry.server);
-	}
+					if (route.id === '_4xx' || route.id === '_5xx') {
+						return `{ error: '${route.id.slice(1)}', module: ${route.id} }`;
+					}

-	create_client_main();
-	create_server_routes();
-}
+					const params = route.params.length === 0
+						? '{}'
+						: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;

-export default create_app;
+					return `{ id: '${route.id}', type: '${route.type}', pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), module: ${route.id} }`;
+				})
+				.join(',\n\t')
+			}
+		];`.replace(/^\t\t/gm, '').trim();
+
+	return code;
+}
--- 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
@@ -4,13 +4,26 @@ import relative from 'require-relative';
 export default function create_compilers() {
 	const webpack = 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'))
+			require(path.resolve('webpack/client.config.js'))
 		),

 		server: webpack(
-			require(path.resolve('webpack.server.config.js'))
-		)
+			require(path.resolve('webpack/server.config.js'))
+		),
+
+		serviceworker: serviceworker_config && webpack(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_routes.ts
+++ b/src/core/create_routes.ts
@@ -1,22 +1,36 @@
 import * as path from 'path';
 import glob from 'glob';
+import { Route } from '../interfaces';

-export default function create_routes({ src, files = glob.sync('**/*.+(html|js|mjs)', { cwd: src }) }) {
-	const routes = files
-		.map(file => {
+export default function create_routes({ src, files = glob.sync('**/*.+(html|js|mjs)', { cwd: src }) }: {
+	src: string;
+	files?: string[];
+}) {
+	const routes: Route[] = files
+		.map((file: string) => {
 			if (/(^|\/|\\)_/.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();

 			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;
@@ -25,7 +39,8 @@ export default function create_routes({ src, files = glob.sync('**/*.+(html|js|m
 				const dynamic = part[0] === '[';

 				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,18 +49,18 @@ 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 {
@@ -56,11 +71,11 @@ export default function create_routes({ src, files = glob.sync('**/*.+(html|js|m
 				test,
 				exec,
 				parts,
-				dynamic
+				params
 			};
 		})
 		.filter(Boolean)
-		.sort((a, b) => {
+		.sort((a: Route, b: Route) => {
 			let same = true;

 			for (let i = 0; true; i += 1) {
@@ -75,17 +90,40 @@ export default function create_routes({ src, files = glob.sync('**/*.+(html|js|m
 				if (!a_part) return -1;
 				if (!b_part) return 1;

-				const a_is_dynamic = a_part[0] === '[';
-				const b_is_dynamic = b_part[0] === '[';
+				const a_sub_parts = get_sub_parts(a_part);
+				const b_sub_parts = get_sub_parts(b_part);

-				if (a_is_dynamic === b_is_dynamic) {
-					if (!a_is_dynamic && a_part !== b_part) same = false;
-					continue;
+				for (let i = 0; true; i += 1) {
+					const a_sub_part = a_sub_parts[i];
+					const b_sub_part = b_sub_parts[i];
+
+					if (!a_sub_part && !b_sub_part) break;
+
+					if (!a_sub_part) return 1; // note this is reversed from above — match [foo].json before [foo]
+					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;
+					}
 				}
-
-				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/create_serviceworker.ts
+++ b/src/core/create_serviceworker.ts
@@ -0,0 +1,27 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import glob from 'glob';
+import create_routes from './create_routes';
+import { fudge_mtime, posixify, write } from './utils';
+import { Route } from '../interfaces';
+
+export default function create_serviceworker({ routes, client_files, src }: {
+	routes: Route[];
+	client_files: string[];
+	src: 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('app/manifest/service-worker.js', code);
+}
--- a/src/core/create_template.ts
+++ b/src/core/create_template.ts
@@ -0,0 +1,39 @@
+import * as fs from 'fs';
+import chalk from 'chalk';
+import framer from 'code-frame';
+import { locate } from 'locate-character';
+
+function error(e: any) {
+	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 default function create_templates() {
+	const template = fs.readFileSync(`app/template.html`, 'utf-8');
+
+	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: `app/template.html`,
+			body: `<script src='%sapper.main%'> is unsupported — use %sapper.scripts% (without the <script> tag) instead`,
+			url: 'https://github.com/sveltejs/sapper/issues/86',
+			frame
+		});
+	}
+
+	return {
+		render: (data: Record<string, string>) => {
+			return template.replace(/%sapper\.(\w+)%/g, (match, key) => {
+				return key in data ? data[key] : '';
+			});
+		}
+	};
+}
--- 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 +1,5 @@
-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_serviceworker } from './create_serviceworker';
 export { default as create_compilers } from './create_compilers';
 export { default as create_routes } from './create_routes';
-
-export const templates = { create_templates, render, stream };
+export { default as create_template } from './create_template';
--- 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,20 @@
+import * as fs from 'fs';
+
+export function write(file: string, code: string) {
+	fs.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 } = fs.statSync(file);
+	fs.utimesSync(
+		file,
+		new Date(atime.getTime() - 999999),
+		new Date(mtime.getTime() - 999999)
+	);
+}
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -0,0 +1,15 @@
+export type Route = {
+	id: string;
+	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;
+};
--- 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,200 +1,199 @@
 import * as fs from 'fs';
 import * as path from 'path';
+import { ClientRequest, ServerResponse } from 'http';
+// import * as mime from 'mime';
 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 create_watcher from './create_watcher';
-import { dest, dev, entry, src } from '../config';
+import { create_routes, templates, create_compilers, create_template } from 'sapper/core.js';
+import { dest, entry, isDev, src } from '../config';
+import { Route, Template } from '../interfaces';
+import sourceMapSupport from 'source-map-support';

-function connect_dev() {
-	mkdirp.sync(dest);
-	rimraf.sync(path.join(dest, '**/*'));
+sourceMapSupport.install();

-	const compilers = create_compilers();
+const dev = isDev();

-	let routes;
+type RouteObject = {
+	id: string;
+	type: 'page' | 'route';
+	pattern: RegExp;
+	params: (match: RegExpMatchArray) => Record<string, string>;
+	module: {
+		render: (data: any) => {
+			head: string;
+			css: { code: string, map: any };
+			html: string
+		},
+		preload: (data: any) => any | Promise<any>
+	};
+	error?: string;
+}

-	const watcher = create_watcher({
-		dev, entry, src,
-		compilers,
-		onroutes: _ => {
-			routes = _;
-		}
-	});
+type Handler = (req: Req, res: ServerResponse, next: () => void) => void;

-	let asset_cache;
+interface Req extends ClientRequest {
+	url: string;
+	method: string;
+	pathname: string;
+	params: Record<string, string>;
+}
+
+export default function middleware({ routes }: {
+	routes: RouteObject[]
+}) {
+	const client_info = JSON.parse(fs.readFileSync(path.join(dest, 'client_info.json'), 'utf-8'));
+
+	const template = create_template();
+
+	const shell = try_read(path.join(dest, 'index.html'));
+	const serviceworker = try_read(path.join(dest, 'service-worker.js'));

 	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();
-			});
+		(req: Req, res: ServerResponse, next: () => void) => {
+			req.pathname = req.url.replace(/\?.*/, '');
+			next();
 		},

-		set_req_pathname,
-
-		get_asset_handler({
-			filter: pathname => pathname === '/index.html',
+		shell && get_asset_handler({
+			pathname: '/index.html',
 			type: 'text/html',
 			cache: 'max-age=600',
-			fn: () => asset_cache.client.index
+			body: shell
 		}),

-		get_asset_handler({
-			filter: pathname => pathname === '/service-worker.js',
+		serviceworker && get_asset_handler({
+			pathname: '/service-worker.js',
 			type: 'application/javascript',
 			cache: 'max-age=600',
-			fn: () => asset_cache.client.service_worker
+			body: serviceworker
 		}),

-		get_asset_handler({
-			filter: pathname => pathname.startsWith('/client/'),
-			type: 'application/javascript',
-			cache: 'max-age=31536000',
-			fn: pathname => asset_cache.client.chunks[pathname]
-		}),
+		(req: Req, res: ServerResponse, next: () => void) => {
+			if (req.pathname.startsWith('/client/')) {
+				// const type = mime.getType(req.pathname);
+				const type = 'application/javascript'; // TODO might not be, if using e.g. CSS plugin

-		get_route_handler(() => asset_cache, () => routes),
+				// TODO cache?
+				const rs = fs.createReadStream(path.join(dest, req.pathname.slice(1)));

-		get_not_found_handler(() => asset_cache)
-	]);
+				rs.on('error', error => {
+					res.statusCode = 404;
+					res.end('not found');
+				});

-	middleware.close = () => {
-		watcher.close();
-		// TODO shut down chokidar
-	};
+				res.setHeader('Content-Type', type);
+				res.setHeader('Cache-Control', 'max-age=31536000');
+				rs.pipe(res);
+			} else {
+				next();
+			}
+		},
+
+		get_route_handler(client_info.assetsByChunkName, routes, template)
+	].filter(Boolean));

 	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'))
-	});
+function get_asset_handler({ pathname, type, cache, body }: {
+	pathname: string;
+	type: string;
+	cache: string;
+	body: string;
+}) {
+	return (req: Req, res: ServerResponse, next: () => void) => {
+		if (req.pathname !== pathname) return next();

-	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 } = {}) {
-	console.log({ 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));
+		res.setHeader('Content-Type', type);
+		res.setHeader('Cache-Control', cache);
+		res.end(body);
 	};
 }

 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);
+function get_route_handler(chunks: Record<string, string>, routes: RouteObject[], template: Template) {
+	function handle_route(route: RouteObject, req: Req, res: ServerResponse) {
+		req.params = route.params(route.pattern.exec(req.pathname));

-		const mod = require(server.entry)[route.id];
+		const mod = route.module;

 		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 link = []
+				.concat(chunks.main, chunks[route.id])
+				.map(file => `</client/${file}>;rel="preload";as="script"`)
+				.join(', ');
+
+			res.setHeader('Link', link);

 			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);
+			let redirect: { statusCode: number, location: string };
+			let error: { statusCode: number, message: Error | string };

-					return { rendered: mod.render(data), serialized };
-				});
+			Promise.resolve(
+				mod.preload ? mod.preload.call({
+					redirect: (statusCode: number, location: string) => {
+						redirect = { statusCode, location };
+					},
+					error: (statusCode: number, message: Error | string) => {
+						error = { statusCode, message };
+					}
+				}, req) : {}
+			).catch(err => {
+				error = { statusCode: 500, message: err };
+			}).then(preloaded => {
+				if (redirect) {
+					res.statusCode = redirect.statusCode;
+					res.setHeader('Location', redirect.location);
+					res.end();

-				return templates.stream(res, 200, {
-					scripts: promise.then(({ serialized }) => {
-						const main = `<script src='${client.main_file}'></script>`;
+					return;
+				}

-						if (serialized) {
-							return `<script>__SAPPER__ = { preloaded: ${serialized} };</script>${main}`;
-						}
+				if (error) {
+					handle_error(req, res, error.statusCode, error.message);
+					return;
+				}
+
+				const serialized = try_serialize(preloaded); // TODO bail on non-POJOs
+				Object.assign(data, preloaded);

-						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>`,
+				let scripts = []
+					.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
+					.map(file => `<script src='/client/${file}'></script>`)
+					.join('');
+
+				scripts = `<script>__SAPPER__ = { preloaded: ${serialized} };</script>${scripts}`;
+
+				const page = template.render({
+					scripts,
 					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);
-			}
+
+				if (process.send) {
+					process.send({
+						__sapper__: true,
+						url: req.url,
+						method: req.method,
+						status: 200,
+						type: 'text/html',
+						body: page
+					});
+				}
+			});
 		}

 		else {
@@ -204,56 +203,126 @@ function get_route_handler(get_assets, get_routes) {
 			const method_export = method === 'delete' ? 'del' : method;
 			const handler = mod[method_export];
 			if (handler) {
-				handler(req, res, next);
+				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,
+							url: req.url,
+							method: req.method,
+							status: res.statusCode,
+							type: headers['content-type'],
+							body: Buffer.concat(chunks).toString()
+						});
+					};
+				}
+
+				const handle_error = (err?: Error) => {
+					if (err) {
+						console.error(err.stack);
+						res.statusCode = 500;
+						res.end(err.message);
+					} else {
+						handle_not_found(req, res, 404, 'Not found');
+					}
+				};
+
+				try {
+					handler(req, res, handle_error);
+				} catch (err) {
+					handle_error(err);
+				}
 			} else {
 				// no matching handler for method — 404
-				next();
+				handle_not_found(req, res, 404, 'Not found');
 			}
 		}
 	}

-	return function find_route(req, res, next) {
+	const not_found_route = routes.find((route: RouteObject) => route.error === '4xx');
+
+	function handle_not_found(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 rendered = not_found_route ? not_found_route.module.render({
+			status: 404,
+			error
+		}) : { head: '', css: null, html: error.message };
+
+		const { head, css, html } = rendered;
+
+		res.end(template.render({
+			scripts: `<script src='/client/${chunks.main}'></script>`,
+			html,
+			head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
+			styles: (css && css.code ? `<style>${css.code}</style>` : '')
+		}));
+	}
+
+	const error_route = routes.find((route: RouteObject) => route.error === '5xx');
+
+	function handle_error(req: Req, res: ServerResponse, statusCode: number, message: Error | string) {
+		if (statusCode >= 400 && statusCode < 500) {
+			return handle_not_found(req, res, statusCode, message);
+		}
+
+		res.statusCode = statusCode;
+		res.setHeader('Content-Type', 'text/html');
+
+		const error = message instanceof Error ? message : new Error(message);
+
+		const rendered = error_route ? error_route.module.render({
+			status: 500,
+			error
+		}) : { head: '', css: null, html: `Internal server error: ${error.message}` };
+
+		const { head, css, html } = rendered;
+
+		res.end(template.render({
+			scripts: `<script src='/client/${chunks.main}'></script>`,
+			html,
+			head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
+			styles: (css && css.code ? `<style>${css.code}</style>` : '')
+		}));
+	}
+
+	return function find_route(req: Req, res: ServerResponse) {
 		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());
-				}
+		try {
+			for (const route of routes) {
+				if (!route.error && route.pattern.test(url)) return handle_route(route, req, res);
+			}

-				// 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')
-				}));
-			});
+			handle_not_found(req, res, 404, 'Not found');
+		} catch (error) {
+			handle_error(req, res, 500, error);
+		}
 	};
 }

-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) => {
+function compose_handlers(handlers: Handler[]) {
+	return (req: Req, res: ServerResponse, next: () => void) => {
 		let i = 0;
 		function go() {
 			const handler = handlers[i];
@@ -272,14 +341,22 @@ function compose_handlers(handlers) {
 	};
 }

-function read_json(file) {
+function read_json(file: string) {
 	return JSON.parse(fs.readFileSync(file, 'utf-8'));
 }

-function try_serialize(data) {
+function try_serialize(data: any) {
 	try {
 		return serialize(data);
 	} catch (err) {
 		return null;
 	}
 }
+
+function try_read(file: string) {
+	try {
+		return fs.readFileSync(file, 'utf-8');
+	} catch (err) {
+		return null;
+	}
+}
--- a/src/runtime/index.ts
+++ b/src/runtime/index.ts
@@ -4,6 +4,7 @@ import { Component, ComponentConstructor, Params, Query, Route, RouteData, Scrol
 export let component: Component;
 let target: Node;
 let routes: Route[];
+let errors: { '4xx': Route, '5xx': Route };

 const history = typeof window !== 'undefined' ? window.history : {
 	pushState: (state: any, title: string, href: string) => {},
@@ -25,14 +26,16 @@ function select_route(url: URL): Target {
 	for (const route of routes) {
 		const match = route.pattern.exec(url.pathname);
 		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 } };
 		}
@@ -73,17 +76,41 @@ function render(Component: ComponentConstructor, data: any, scroll: ScrollPositi
 }

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

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

-	return Promise.resolve(Component.preload(data)).then(preloaded => {
+	return Promise.resolve(Component.preload.call({
+		redirect: (statusCode: number, location: string) => {
+			redirect = { statusCode, location };
+		},
+		error: (statusCode: number, message: Error | string) => {
+			error = { statusCode, message };
+		}
+	}, data)).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: Component }: { default: ComponentConstructor }) => {
+				const err = error.message instanceof Error ? error.message : new Error(error.message);
+				Object.assign(data, { status: error.statusCode, error: err });
+				return { Component, data, redirect: null };
+			});
+		}
+
 		Object.assign(data, preloaded)
-		return { Component, data };
+		return { Component, data, redirect };
 	});
 }

@@ -109,7 +136,11 @@ function navigate(target: Target, id: number) {

 	const token = current_token = {};

-	return loaded.then(({ Component, data }) => {
+	return loaded.then(({ Component, data, redirect }) => {
+		if (redirect) {
+			return goto(redirect.location, { replaceState: true });
+		}
+
 		render(Component, data, scroll_history[id], token);
 	});
 }
@@ -196,7 +227,11 @@ let inited: boolean;

 export function init(_target: Node, _routes: Route[]) {
 	target = _target;
-	routes = _routes;
+	routes = _routes.filter(r => !r.error);
+	errors = {
+		'4xx': _routes.find(r => r.error === '4xx'),
+		'5xx': _routes.find(r => r.error === '5xx')
+	};

 	if (!inited) { // this check makes HMR possible
 		window.addEventListener('click', handle_click);
--- a/src/runtime/interfaces.ts
+++ b/src/runtime/interfaces.ts
@@ -14,7 +14,8 @@ export interface Component {
 export type Route = {
 	pattern: RegExp;
 	params: (match: RegExpExecArray) => Record<string, string>;
-	load: () => Promise<{ default: ComponentConstructor }>
+	load: () => Promise<{ default: ComponentConstructor }>;
+	ignore?: boolean;
 };

 export type ScrollPosition = {
--- a/src/webpack/index.ts
+++ b/src/webpack/index.ts
@@ -1,13 +1,13 @@
-import { dest, dev, entry } from '../config';
+import { dest, isDev, entry } from '../config';

 export default {
-	dev,
+	dev: isDev(),

 	client: {
 		entry: () => {
 			return {
 				main: [
-					entry.client,
+					'./app/client.js',
 					// workaround for https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/456
 					'style-loader/lib/addStyles',
 					'css-loader/lib/css-base'
@@ -18,8 +18,8 @@ export default {
 		output: () => {
 			return {
 				path: `${dest}/client`,
-				filename: '[name].[hash].js',
-				chunkFilename: '[name].[id].[hash].js',
+				filename: '[hash]/[name].js',
+				chunkFilename: '[hash]/[name].[id].js',
 				publicPath: '/client/'
 			};
 		}
@@ -28,15 +28,15 @@ export default {
 	server: {
 		entry: () => {
 			return {
-				main: entry.server
+				server: './app/server.js'
 			};
 		},

 		output: () => {
 			return {
-				path: `${dest}/server`,
-				filename: '[name].[hash].js',
-				chunkFilename: '[name].[id].[hash].js',
+				path: `${dest}`,
+				filename: '[name].js',
+				chunkFilename: '[hash]/[name].[id].js',
 				libraryTarget: 'commonjs2'
 			};
 		}
--- a/test/app/app/client.js
+++ b/test/app/app/client.js
@@ -0,0 +1,6 @@
+import { init } from '../../../runtime.js';
+import { routes } from './manifest/client.js';
+
+window.init = () => {
+	return init(document.querySelector('#sapper'), routes);
+};
--- a/test/app/app/server.js
+++ b/test/app/app/server.js
@@ -0,0 +1,78 @@
+import fs from 'fs';
+import express from 'express';
+import compression from 'compression';
+import serve from 'serve-static';
+import sapper from '../../../middleware';
+import { routes } from './manifest/server.js';
+
+let count;
+let ended;
+
+process.on('message', message => {
+	if (message.action === 'start') {
+		count = 0;
+		ended = false;
+		process.send({ type: 'ready' });
+	}
+
+	if (message.action === 'end') {
+		ended = true;
+		if (count === 0) process.send({ type: 'done' });
+	}
+});
+
+const app = express();
+
+app.use((req, res, next) => {
+	count += 1;
+
+	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);
+
+		count -= 1;
+
+		process.send({
+			method: req.method,
+			url: req.url,
+			status: res.statusCode,
+			headers: res._headers,
+			body: Buffer.concat(chunks).toString()
+		});
+
+		if (count === 0 && ended) {
+			process.send({ type: 'done' });
+		}
+	};
+
+	next();
+});
+
+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(serve('assets'));
+
+app.use(sapper({
+	routes
+}));
+
+app.listen(PORT, () => {
+	console.log(`listening on port ${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
--- a/test/app/routes/4xx.html
+++ b/test/app/routes/4xx.html
@@ -0,0 +1,18 @@
+<:Head>
+	<title>{{status}}</title>
+</:Head>
+
+<Layout page='home'>
+	<h1>Not found</h1>
+	<p>{{error.message}}</p>
+</Layout>
+
+<script>
+	import Layout from './_components/Layout.html';
+
+	export default {
+		components: {
+			Layout
+		}
+	};
+</script>
--- a/test/app/routes/5xx.html
+++ b/test/app/routes/5xx.html
@@ -0,0 +1,18 @@
+<:Head>
+	<title>Internal server error</title>
+</:Head>
+
+<Layout page='home'>
+	<h1>Internal server error</h1>
+	<p>{{error.message}}</p>
+</Layout>
+
+<script>
+	import Layout from './_components/Layout.html';
+
+	export default {
+		components: {
+			Layout
+		}
+	};
+</script>
--- a/test/app/routes/_components/Nav.html
+++ b/test/app/routes/_components/Nav.html
@@ -3,6 +3,9 @@
 		<li><a href='/'>home</a></li>
 		<li><a href='/about'>about</a></li>
 		<li><a href='/slow-preload'>slow preload</a></li>
+		<li><a href='/redirect-from'>redirect</a></li>
+		<li><a href='/blog/nope'>broken link</a></li>
+		<li><a href='/blog/throw-an-error'>error link</a></li>
 		<li><a rel=prefetch class='{{page === "blog"  ? "selected" : ""}}' href='/blog'>blog</a></li>
 	</ul>
 </nav>
--- 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 {
--- a/test/app/routes/blog/[slug].html
+++ b/test/app/routes/blog/[slug].html
@@ -59,8 +59,21 @@
 			// 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
--- a/test/app/routes/api/blog/_posts.js
+++ b/test/app/routes/api/blog/_posts.js
@@ -70,7 +70,7 @@ 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>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
@@ -32,7 +32,7 @@
 		},

 		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/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/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,8 +1,8 @@
-const config = require('../../webpack/config.js');
+const config = require('../../../webpack/config.js');
 const webpack = require('webpack');

 module.exports = {
-	entry: config.client.entry(),
+	entry: './app/client.js',
 	output: config.client.output(),
 	resolve: {
 		extensions: ['.js', '.html']
--- a/test/app/webpack/server.config.js
+++ b/test/app/webpack/server.config.js
@@ -1,12 +1,17 @@
-const config = require('../../webpack/config.js');
+const config = require('../../../webpack/config.js');
+const pkg = require('../package.json');
+const sapper_pkg = require('../../../package.json');

 module.exports = {
-	entry: config.server.entry(),
+	entry: {
+		'server': './app/server.js'
+	},
 	output: config.server.output(),
 	target: 'node',
 	resolve: {
 		extensions: ['.js', '.html']
 	},
+	externals: Object.keys(pkg.dependencies).concat(Object.keys(sapper_pkg.dependencies)),
 	module: {
 		rules: [
 			{
--- a/test/app/webpack/service-worker.config.js
+++ b/test/app/webpack/service-worker.config.js
@@ -0,0 +1,17 @@
+const path = require('path');
+const config = require('../../../webpack/config.js');
+const webpack = require('webpack');
+
+module.exports = {
+	entry: {
+		'service-worker': './app/service-worker.js'
+	},
+	output: {
+		path: path.resolve(`.sapper`),
+		filename: '[name].js',
+		chunkFilename: '[name].[id].[hash].js'
+	},
+	plugins: [
+		!config.dev && new webpack.optimize.ModuleConcatenationPlugin()
+	].filter(Boolean)
+};
--- a/test/common/test.js
+++ b/test/common/test.js
@@ -12,73 +12,32 @@ run('development');
 Nightmare.action('page', {
 	title(done) {
 		this.evaluate_now(() => document.querySelector('h1').textContent, done);
+	},
+
+	text(done) {
+		this.evaluate_now(() => document.body.textContent, done);
 	}
 });

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

 		let PORT;
-		let server;
+		let proc;
 		let nightmare;
-		let middleware;
 		let capture;

 		let base;

-		function get(url) {
-			return new Promise(fulfil => {
-				const req = {
-					url,
-					method: 'GET'
-				};
-
-				const result = {
-					headers: {},
-					body: ''
-				};
-
-				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);
-				});
-			});
-		}
-
 		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');
@@ -90,81 +49,86 @@ function run(env) {
 				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}`;
+				base = `http://localhost:${port}`;

-				Nightmare.action('init', function(done) {
-					this.evaluate_now(() => window.init(), done);
+				proc = require('child_process').fork('.sapper/server.js', {
+					cwd: process.cwd(),
+					env: {
+						NODE_ENV: env,
+						PORT: port
+					}
 				});

-				global.fetch = (url, opts) => {
-					if (url[0] === '/') url = `${base}${url}`;
-					return fetch(url, opts);
-				};
+				let handler;
+
+				proc.on('message', message => {
+					if (message.__sapper__) 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();
+			proc.kill();

 			// give a chance to clean up
 			return new Promise(fulfil => setTimeout(fulfil, 500));
 		});

+		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();
+		});
+
 		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,7 +154,7 @@ function run(env) {
 			});

 			it('navigates to a new page without reloading', () => {
-				return nightmare.goto(base).init().wait(100)
+				return capture(() => nightmare.goto(base).init().wait(400))
 					.then(() => {
 						return capture(() => nightmare.click('a[href="/about"]'));
 					})
@@ -224,15 +188,16 @@ function run(env) {
 				return nightmare
 					.goto(`${base}/about`)
 					.init()
+					.wait(200)
 					.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'));
 					});
 			});

@@ -249,7 +214,7 @@ function run(env) {
 			it('reuses prefetch promise', () => {
 				return nightmare
 					.goto(`${base}/blog`)
-					.init().wait(100)
+					.init().wait(300)
 					.then(() => {
 						return capture(() => {
 							return nightmare
@@ -258,9 +223,7 @@ function run(env) {
 						});
 					})
 					.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
@@ -269,7 +232,7 @@ function run(env) {
 						});
 					})
 					.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);
 					});
 			});

@@ -336,19 +299,121 @@ function run(env) {
 						assert.ok(matches);
 					});
 			});
+
+			it('redirects on server', () => {
+				return nightmare.goto(`${base}/redirect-from`)
+					.path()
+					.then(path => {
+						assert.equal(path, '/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, '/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, '/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, '/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, '/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, '/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');
+					});
+			});
 		});

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

 					assert.ok(
-						/<\/client\/main.\w+\.js>;rel="preload";as="script", <\/client\/_.\d+.\w+.js>;rel="preload";as="script"/.test(headers['Link']),
-						headers['Link']
+						/<\/client\/[^/]+\/main\.js>;rel="preload";as="script", <\/client\/[^/]+\/_\.\d+\.js>;rel="preload";as="script"/.test(headers['link']),
+						headers['link']
 					);
 				});
 			});
@@ -373,13 +438,13 @@ function run(env) {
 						'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',
+						'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',
@@ -391,20 +456,20 @@ function run(env) {
 					];
 					// 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/,
+						/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}`);
+						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.
@@ -415,8 +480,7 @@ function run(env) {
 								break;
 							}
 						}
-						assert.ok(matched,
-							  `Could not find client page matching ${expectedRegex}`);
+						assert.ok(matched, `Could not find client page matching ${expectedRegex}`);
 					});
 				});
 			});
--- a/test/unit/create_routes.test.js
+++ b/test/unit/create_routes.test.js
@@ -4,7 +4,7 @@ const { create_routes } = require('../../core.js');
 describe('create_routes', () => {
 	it('sorts routes correctly', () => {
 		const routes = create_routes({
-			files: ['index.html', 'about.html', '[wildcard].html', 'post/foo.html', 'post/[id].html', 'post/bar.html']
+			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(
@@ -14,6 +14,8 @@ describe('create_routes', () => {
 				'about.html',
 				'post/foo.html',
 				'post/bar.html',
+				'post/f[xx].html',
+				'post/[id].json.js',
 				'post/[id].html',
 				'[wildcard].html'
 			]
@@ -133,4 +135,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/);
+	});
 });
Author	SHA1	Message	Date
Rich Harris	d9cb572271	-> v0.7.6	2018-02-28 17:14:38 -05:00
Rich Harris	34c28f36cd	Merge pull request #147 from sveltejs/gh-138 don't serve error page for unhandled server route errors	2018-02-28 17:11:52 -05:00
Rich Harris	5dd04eb35c	tidy up - next is unused	2018-02-28 16:59:39 -05:00
Rich Harris	b1d072d43a	dont serve error page for unhandled server route errors - fixes #138	2018-02-28 16:54:38 -05:00
Rich Harris	5ad3f3f1d5	Merge pull request #146 from sveltejs/gh-145 prevent client-side navigation to server routes	2018-02-28 16:20:42 -05:00
Rich Harris	58754c6d15	use blog.json instead of blog/list.json	2018-02-28 16:17:07 -05:00
Rich Harris	c36780fdc8	prevent client-side navigation to server routes - fixes #145	2018-02-28 14:23:19 -05:00
Rich Harris	9bebb56bd6	-> v0.7.5	2018-02-28 13:40:42 -05:00
Rich Harris	f475634d8d	Merge pull request #144 from sveltejs/gh-139 allow dynamic parameters inside route parts	2018-02-28 12:26:00 -05:00
Rich Harris	58c1eb9fa8	allow dynamic parameters inside route parts - fixes #139	2018-02-28 09:39:21 -05:00
Rich Harris	631afbbfe4	-> v0.7.4	2018-02-27 20:10:48 -05:00
Rich Harris	1cc9acb4f1	Merge pull request #142 from sveltejs/gh-141 force NODE_ENV=production in build/export	2018-02-27 20:09:05 -05:00
Rich Harris	19005110f1	huh, not sure why that changed	2018-02-27 19:58:49 -05:00
Rich Harris	21ee8ad39d	force NODE_ENV=production in build/export	2018-02-27 19:49:58 -05:00
Rich Harris	906b0c7ad5	Merge pull request #134 from sveltejs/source-map-support install source-map-support	2018-02-27 19:46:17 -05:00
Rich Harris	896fd410d1	install source-map-support	2018-02-20 14:01:25 -05:00
Rich Harris	c0cc877456	-> v0.7.3	2018-02-20 12:23:32 -05:00
Rich Harris	3ed9ce27a1	Merge pull request #131 from sveltejs/webpack-insanity handle case where webpack asset is an array instead of a string	2018-02-20 12:18:29 -05:00
Rich Harris	edba45b809	Merge pull request #129 from sveltejs/robustify-hmr ensure old server is killed before listening for port on new server	2018-02-20 12:18:10 -05:00
Rich Harris	43c1890235	handle case where webpack asset is an array instead of a string	2018-02-20 11:11:55 -05:00
Rich Harris	605929053c	ensure old server is killed before listening for port on new server	2018-02-20 11:11:02 -05:00
Rich Harris	2752c73ebb	-> v0.7.2	2018-02-18 17:24:12 -05:00
Rich Harris	2547db39ac	-> v0.7.1	2018-02-18 17:09:55 -05:00
Rich Harris	1285739cc5	-> v0.7.1	2018-02-18 17:08:35 -05:00
Rich Harris	14d64e854a	-> v0.7.0	2018-02-18 13:00:36 -05:00
Rich Harris	c419c73550	fix tests	2018-02-18 12:55:56 -05:00
Rich Harris	835b94175d	workaround weird webpack(?) bug by not deleting old files	2018-02-18 12:49:37 -05:00
Rich Harris	25bdcf9957	Merge branch 'gh-83'	2018-02-18 12:12:45 -05:00
Rich Harris	792ccf5c6a	robustify dev server port selection	2018-02-18 12:12:25 -05:00
Rich Harris	4ca8195037	Merge pull request #127 from sveltejs/gh-83 implement this.redirect in preload	2018-02-18 10:36:05 -05:00
Rich Harris	cb12231053	implement this.error	2018-02-18 09:48:32 -05:00
Rich Harris	d55401d45b	see if this fixes windows tests	2018-02-18 08:27:07 -05:00
Rich Harris	99d4eafb0b	argh these flaky tests are killing me	2018-02-18 08:18:14 -05:00
Rich Harris	bff6f550be	implement this.redirect in preload (#83 )	2018-02-17 22:56:47 -05:00
Rich Harris	f8ea9ebda1	Merge pull request #126 from sveltejs/gh-91 [WIP] restructure everything	2018-02-17 19:49:12 -05:00
Rich Harris	181d7b4a61	need to come up with a more robust approach to this...	2018-02-17 19:27:34 -05:00
Rich Harris	beb415c65d	argh	2018-02-17 19:22:05 -05:00
Rich Harris	5bbd7ead17	and again	2018-02-17 19:16:06 -05:00
Rich Harris	e11405d555	try increasing timeout	2018-02-17 19:12:47 -05:00
Rich Harris	9fe0ca2c22	remove 4xx and 5xx pages when initing	2018-02-17 19:00:06 -05:00
Rich Harris	f2eb95d546	various minor fixes	2018-02-17 18:40:20 -05:00
Rich Harris	ab1ca60363	basic sapper dev task, with HMR	2018-02-17 17:44:57 -05:00
Rich Harris	d95f52f8e9	fix tests, add WIP dev task	2018-02-17 11:15:26 -05:00
Rich Harris	b02183af53	fix exporting	2018-02-16 14:25:53 -05:00
Rich Harris	f9828f9fd2	work in progress	2018-02-16 12:01:55 -05:00
Rich Harris	9a760c570f	move webpack configs in test app	2018-02-14 12:25:40 -05:00
Rich Harris	0f390920a8	fix some typescript stuff	2018-02-14 12:25:24 -05:00
Rich Harris	9adb6ca7e6	Merge pull request #120 from sveltejs/gh-92 implement sapper upgrade	2018-02-14 10:28:01 -05:00
Rich Harris	24980651c0	that was a weird typo	2018-02-13 22:08:29 -05:00
Rich Harris	7c6436a99c	implement sapper upgrade	2018-02-13 18:46:53 -05:00
Rich Harris	f6b26f1b07	Merge pull request #119 from sveltejs/better-cli Better CLI	2018-02-13 17:30:08 -05:00
Rich Harris	55b60369f9	add --help to CLI	2018-02-13 17:12:55 -05:00
Rich Harris	2be9dd1883	Move build.ts and export.ts into src/cli - fixes #115	2018-02-13 15:57:02 -05:00
Rich Harris	b29700f725	update electron to squelch vuln warning	2018-02-13 15:50:04 -05:00
Rich Harris	7188ce0d0d	-> v0.6.4	2018-02-06 10:51:24 -05:00
Rich Harris	4f8ce19fe1	Merge pull request #114 from lukeed/fix/prod-hmr Fix: Remove HMR attempts in Prod~!	2018-02-06 10:39:19 -05:00
Rich Harris	a85f2921e8	Merge pull request #113 from lukeed/feat/map-config Consolidate Rollup config file	2018-02-06 10:37:34 -05:00
Luke Edwards	7a2ed16884	fix HMR attempts in production	2018-02-05 14:09:24 -08:00
Luke Edwards	08e575fee0	shrink repetitive rollup.config file	2018-02-05 13:43:10 -08:00
Rich Harris	7dbcab74d3	remove logging	2018-02-03 16:35:10 -05:00