-> v0.0.16

README.md

@@ -16,6 +16,7 @@ High-level goals:
 * Code-splitting and HMR out of the box (probably via webpack)
 * Best-in-class performance
 * As little magic as possible. Anyone should be able to understand how everything fits together, and e.g. make changes to the webpack config
+* Links are just `<a>` tags, no special `<Link>` components
 
 
 ## Design
@@ -26,8 +27,6 @@ A Sapper app is just an Express app (conventionally, `server.js`) that uses the
 const app = require('express')();
 const sapper = require('sapper');
 
-const app = express();
-
 app.use(sapper());
 
 const { PORT = 3000 } = process.env;
@@ -45,13 +44,13 @@ Like Next, routes are defined by the project directory structure, but with some
 
 * Files with an `.html` extension are treated as Svelte components. The `routes/about.html` (or `routes/about/index.html`) would create the `/about` route.
 * Files with a `.js` or `.mjs` extension are more generic route handlers. These files should export functions corresponding to the HTTP methods they support (example below).
-* Instead of route masking, we embed parameters in the filename. For example `post/%id%.html` maps to `/post/:id`, and the component will be rendered with the appropriate parameter.
-* Nested routes (read [this article](https://joshduff.com/2015-06-why-you-need-a-state-router.md)) can be handled by creating a file that matches the subroute — for example, `routes/app/settings/%submenu%.html` would match `/app/settings/profile` *and* `app/settings`, but in the latter case the `submenu` parameter would be `null`.
+* Instead of route masking, we embed parameters in the filename. For example `post/[id].html` maps to `/post/:id`, and the component will be rendered with the appropriate parameter.
+* Nested routes (read [this article](https://joshduff.com/2015-06-why-you-need-a-state-router.md)) can be handled by creating a file that matches the subroute — for example, `routes/app/settings/[submenu].html` would match `/app/settings/profile` *and* `app/settings`, but in the latter case the `submenu` parameter would be `null`.
 
 An example of a generic route:
 
 ```js
-// routes/api/post/%id%.js
+// routes/api/post/[id].js
 export async function get(req, res) {
   try {
     const data = await getPostFromDatabase(req.params.id);
@@ -72,13 +71,71 @@ export async function get(req, res) {
 Or, if you omit the `res` argument, it can use the return value:
 
 ```js
-// routes/api/post/%id%.js
-export async function get(req, res) {
+// routes/api/post/[id].js
+export async function get(req) {
   return await getPostFromDatabase(req.params.id);
 }
 ```
 
 
+## Client-side app
+
+Sapper will create (and in development mode, update) a barebones `main.js` file that dynamically imports individual routes and renders them — something like this:
+
+```js
+window.addEventListener('click', event => {
+  let a = event.target;
+  while (a && a.nodeName !== 'A') a = a.parentNode;
+  if (!a) return;
+
+  if (navigate(new URL(a.href))) event.preventDefault();
+});
+
+const target = document.querySelector('#sapper');
+let component;
+
+function navigate(url) {
+  if (url.origin !== window.location.origin) return;
+
+  let match;
+  let params = {};
+  const query = {};
+
+  function render(mod) {
+    if (component) {
+      component.destroy();
+    } else {
+      target.innerHTML = '';
+    }
+
+    component = new mod.default({
+      target,
+      data: { query, params },
+      hydrate: !!component
+    });
+  }
+
+  if (url.pathname === '/about') {
+    import('/about/index.html').then(render);
+  } else if (url.pathname === '/') {
+    import('/index.js').then(render);
+  } else if (match = /^\/post\/([^\/]+)$/.exec(url.pathname)) {
+    params.id = match[1];
+    import('/post/[id].html').then(render);
+  } else if (match = /^\/([^\/]+)$/.exec(url.pathname)) {
+    params.wildcard = match[1];
+    import('/[wildcard].html').then(render);
+  }
+
+  return true;
+}
+
+navigate(window.location);
+```
+
+We're glossing over a lot of important stuff here — e.g. handling `popstate` — but you get the idea. Knowledge of all the possible routes means we can generate optimal code, much in the same way that statically analysing Svelte templates allows the compiler to generate optimal code.
+
+
 ## Things to figure out
 
 * How to customise the overall page template
@@ -87,4 +144,7 @@ export async function get(req, res) {
 * `store` integration
 * Route transitions
 * Equivalent of `next export`
+* A good story for realtime/GraphQL stuff
+* Service worker
+* Using `Link...rel=preload` headers to push main.js/[route].js plus styles
 * ...and lots of other things that haven't occurred to me yet.

connect.js

@@ -1,67 +1,115 @@
 require('svelte/ssr/register');
 const esm = require('@std/esm');
+const fs = require('fs');
 const path = require('path');
 const glob = require('glob');
-const create_matchers = require('./utils/create_matchers.js');
+const rimraf = require('rimraf');
+const mkdirp = require('mkdirp');
+const create_routes = require('./lib/utils/create_routes.js');
+const templates = require('./lib/templates.js');
+const create_app = require('./lib/utils/create_app.js');
+const create_webpack_compiler = require('./lib/utils/create_webpack_compiler.js');
+const escape_html = require('escape-html');
+const { src, dest, dev } = require('./lib/config.js');
 
-require = esm(module, {
-	esm: 'all'
+const esmRequire = esm(module, {
+	esm: 'js'
 });
 
-module.exports = function connect(opts = {}) {
-	const routes = path.resolve('routes');
-	const out = path.resolve('.sapper');
+module.exports = function connect(opts) {
+	mkdirp(dest);
+	rimraf.sync(path.join(dest, '**/*'));
 
-	let pages = glob.sync('**/*.html', { cwd: routes });
-	let page_matchers = create_matchers(pages);
+	let routes = create_routes(
+		glob.sync('**/*.+(html|js|mjs)', { cwd: src })
+	);
 
-	let server_routes = glob.sync('**/*.+(js|mjs)', { cwd: routes });
-	let server_route_matchers = create_matchers(server_routes);
+	create_app(src, dest, routes, opts);
+
+	const webpack_compiler = create_webpack_compiler(
+		dest,
+		routes,
+		dev
+	);
 
 	return async function(req, res, next) {
 		const url = req.url.replace(/\?.+/, '');
 
-		for (let i = 0; i < page_matchers.length; i += 1) {
-			const matcher = page_matchers[i];
-			if (matcher.test(url)) {
-				const params = matcher.exec(url);
-				const Component = require(`${routes}/${matcher.file}`);
-
-				res.end(Component.render({
-					params,
-					query: req.query
-				}));
-				return;
-			}
+		if (url === '/service-worker.js' || url === '/index.html' || url.startsWith('/client/')) {
+			await webpack_compiler.ready;
+			res.set({
+				'Content-Type': url === '/index.html' ? 'text/html' : 'application/javascript'
+			});
+			fs.createReadStream(`${dest}${url}`).pipe(res);
+			return;
 		}
 
-		for (let i = 0; i < server_route_matchers.length; i += 1) {
-			const matcher = server_route_matchers[i];
-			if (matcher.test(url)) {
-				req.params = matcher.exec(url);
-				const route = require(`${routes}/${matcher.file}`);
+		// whatever happens, we're going to serve some HTML
+		res.set({
+			'Content-Type': 'text/html'
+		});
 
-				const handler = route[req.method.toLowerCase()];
-				if (handler) {
-					if (handler.length === 2) {
-						handler(req, res);
-					} else {
-						const data = await handler(req);
+		try {
+			for (const route of routes) {
+				if (route.test(url)) {
+					await webpack_compiler.ready;
 
-						// TODO headers, error handling
-						if (typeof data === 'string') {
-							res.end(data);
-						} else {
-							res.end(JSON.stringify(data));
+					req.params = route.exec(url);
+
+					const chunk = webpack_compiler.chunks[route.id];
+					const mod = require(path.resolve(dest, 'server', chunk));
+
+					if (route.type === 'page') {
+						let data = { params: req.params, query: req.query };
+						if (mod.default.preload) data = Object.assign(data, await mod.default.preload(data));
+
+						const { html, head, css } = mod.default.render(data);
+
+						const page = templates.render(200, {
+							main: webpack_compiler.client_main,
+							html,
+							head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
+							styles: (css && css.code ? `<style>${css.code}</style>` : '')
+						});
+
+						res.status(200);
+						res.end(page);
+					}
+
+					else {
+						const handler = mod[req.method.toLowerCase()];
+						if (handler) {
+							if (handler.length === 2) {
+								handler(req, res);
+							} else {
+								const data = await handler(req);
+
+								// TODO headers, error handling
+								if (typeof data === 'string') {
+									res.end(data);
+								} else {
+									res.end(JSON.stringify(data));
+								}
+							}
 						}
 					}
 
 					return;
 				}
 			}
+
+			res.status(404).end(templates.render(404, {
+				title: 'Not found',
+				status: 404,
+				method: req.method,
+				url
+			}));
+		} catch(err) {
+			res.status(500).end(templates.render(500, {
+				title: err.name || 'Internal server error',
+				url,
+				error: escape_html(err.details || err.message || err || 'Unknown error')
+			}));
 		}
-
-		next();
 	};
-};
-
+};

lib/config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+exports.dev = process.env.NODE_ENV !== 'production';
+
+exports.templates = path.resolve(process.env.SAPPER_TEMPLATES || 'templates');
+
+exports.src = path.resolve(process.env.SAPPER_ROUTES || 'routes');
+
+exports.dest = path.resolve(
+	process.env.NOW ? '/tmp' :
+	process.env.SAPPER_DEST || '.sapper'
+);

lib/route_manager.js

@@ -0,0 +1,16 @@
+const glob = require('glob');
+const create_routes = require('./utils/create_routes.js');
+const { src } = require('./config.js');
+
+const route_manager = {
+	routes: create_routes(
+		glob.sync('**/*.+(html|js|mjs)', { cwd: src })
+	),
+
+	onchange(fn) {
+		// TODO in dev mode, keep this updated, and allow
+		// webpack compiler etc to hook into it
+	}
+};
+
+module.exports = route_manager;

lib/templates.js

@@ -0,0 +1,43 @@
+const fs = require('fs');
+const glob = require('glob');
+
+const 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)) {
+			throw new Error(`Bad template — should be a valid status code like 404.html, or a wildcard like 2xx.html`);
+		}
+
+		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] : '';
+				});
+			}
+		}
+	})
+	.sort((a, b) => b.specificity - a.specificity);
+
+exports.render = (status, data) => {
+	const template = templates.find(template => template.test(status));
+	if (template) return template.render(data);
+
+	return `Missing template for status code ${status}`;
+};
+
+exports.onchange = fn => {
+	// TODO in dev mode, keep this updated, and allow
+	// webpack compiler etc to hook into it
+};

lib/utils/create_app.js

@@ -0,0 +1,26 @@
+const fs = require('fs');
+const path = require('path');
+
+const template = fs.readFileSync(path.resolve(__dirname, '../../templates/main.js'), 'utf-8');
+
+module.exports = function create_app(src, dest, routes, options) {
+	// TODO in dev mode, watch files
+
+	const code = routes
+		.filter(route => route.type === 'page')
+		.map(route => {
+			const params = route.dynamic.length === 0 ?
+				'{}' :
+				`{ ${route.dynamic.map((part, i) => `${part}: match[${i + 1}]`).join(', ') } }`;
+
+			return `{ pattern: ${route.pattern}, params: match => (${params}), load: () => import('${src}/${route.file}') }`
+		})
+		.join(',\n\t');
+
+	const main = template
+		.replace('__app__', path.resolve(__dirname, '../../runtime/app.js'))
+		.replace('__selector__', options.selector || 'main')
+		.replace('__routes__', code);
+
+	fs.writeFileSync(path.join(dest, 'main.js'), main);
+};

lib/utils/create_routes.js

@@ -3,15 +3,19 @@ const path = require('path');
 module.exports = function create_matchers(files) {
 	return files
 		.map(file => {
+			if (/(^|\/|\\)_/.test(file)) return;
+
 			const parts = file.replace(/\.(html|js|mjs)$/, '').split(path.sep);
 			if (parts[parts.length - 1] === 'index') parts.pop();
 
+			const id = parts.join('_').replace(/[[\]]/g, '$') || '_';
+
 			const dynamic = parts
-				.filter(part => part[0] === '%')
+				.filter(part => part[0] === '[')
 				.map(part => part.slice(1, -1));
 
 			const pattern = new RegExp(
-				`^\\/${parts.map(p => p[0] === '%' ? '([^/]+)' : p).join('\\/')}$`
+				`^\\/${parts.map(p => p[0] === '[' ? '([^/]+)' : p).join('\\/')}$`
 			);
 
 			const test = url => pattern.test(url);
@@ -29,24 +33,21 @@ module.exports = function create_matchers(files) {
 			};
 
 			return {
+				id,
+				type: path.extname(file) === '.html' ? 'page' : 'route',
 				file,
+				pattern,
 				test,
 				exec,
 				parts,
 				dynamic
 			};
 		})
+		.filter(Boolean)
 		.sort((a, b) => {
 			return (
 				(a.dynamic.length - b.dynamic.length) || // match static paths first
 				(b.parts.length - a.parts.length) // match longer paths first
 			);
-		})
-		.map(matcher => {
-			return {
-				file: matcher.file,
-				test: matcher.test,
-				exec: matcher.exec
-			}
 		});
 }

lib/utils/create_routes.test.js

@@ -5,21 +5,21 @@ const create_matchers = require('./create_matchers.js');
 
 describe('create_matchers', () => {
 	it('sorts routes correctly', () => {
-		const matchers = create_matchers(['index.html', 'about.html', '%wildcard%.html', 'post/%id%.html']);
+		const matchers = create_matchers(['index.html', 'about.html', '[wildcard].html', 'post/[id].html']);
 
 		assert.deepEqual(
 			matchers.map(m => m.file),
 			[
 				'about.html',
 				'index.html',
-				'post/%id%.html',
-				'%wildcard%.html'
+				'post/[id].html',
+				'[wildcard].html'
 			]
 		);
 	});
 
 	it('generates params', () => {
-		const matchers = create_matchers(['index.html', 'about.html', '%wildcard%.html', 'post/%id%.html']);
+		const matchers = create_matchers(['index.html', 'about.html', '[wildcard].html', 'post/[id].html']);
 
 		let file;
 		let params;
@@ -31,9 +31,21 @@ describe('create_matchers', () => {
 			}
 		}
 
-		assert.equal(file, 'post/%id%.html');
+		assert.equal(file, 'post/[id].html');
 		assert.deepEqual(params, {
 			id: '123'
 		});
 	});
+
+	it('ignores files and directories with leading underscores', () => {
+		const matches = create_matchers(['index.html', '_foo.html', 'a/_b/c/d.html', 'e/f/g/h.html', 'i/_j.html']);
+
+		assert.deepEqual(
+			matches.map(m => m.file),
+			[
+				'e/f/g/h.html',
+				'index.html'
+			]
+		);
+	});
 });

lib/utils/create_webpack_compiler.js

@@ -0,0 +1,100 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const webpack = require('webpack');
+const templates = require('../templates.js');
+
+module.exports = function create_webpack_compiler(dest, routes, dev) {
+	const compiler = {};
+
+	const client = webpack(
+		require(path.resolve('webpack.client.config.js'))
+	);
+
+	const server = webpack(
+		require(path.resolve('webpack.server.config.js'))
+	);
+
+	if (false) { // TODO watch in dev
+		// TODO how can we invalidate compiler.client_main when watcher restarts?
+		compiler.client_main = new Promise((fulfil, reject) => {
+			client.watch({}, (err, stats) => {
+				if (err || stats.hasErrors()) {
+					// TODO handle errors
+				}
+
+				const filename = stats.toJson().assetsByChunkName.main;
+				fulfil(`/client/${filename}`);
+			});
+		});
+
+		// TODO server
+	} else {
+		compiler.ready = Promise.all([
+			new Promise((fulfil, reject) => {
+				client.run((err, stats) => {
+					console.log(stats.toString({ colors: true }));
+
+					const info = stats.toJson();
+
+					if (err || stats.hasErrors()) {
+						reject(err || info.errors[0]);
+					}
+
+					compiler.client_main = `/client/${info.assetsByChunkName.main}`;
+					compiler.assets = info.assets.map(asset => `/client/${asset.name}`);
+
+					fulfil();
+				});
+			}),
+
+			new Promise((fulfil, reject) => {
+				server.run((err, stats) => {
+					console.log(stats.toString({ colors: true }));
+
+					const info = stats.toJson();
+
+					if (err || stats.hasErrors()) {
+						reject(err || info.errors[0]);
+					}
+
+					compiler.chunks = info.assetsByChunkName;
+
+					fulfil();
+				});
+			})
+		]).then(() => {
+			const assets = glob.sync('**', { cwd: 'assets' });
+
+			const route_code = `[${
+				routes
+					.filter(route => route.type === 'page')
+					.map(route => `{ pattern: ${route.pattern} }`)
+					.join(', ')
+			}]`;
+
+			const service_worker = fs.readFileSync('templates/service-worker.js', 'utf-8')
+				.replace('__timestamp__', Date.now())
+				.replace('__assets__', JSON.stringify(assets))
+				.replace('__shell__', JSON.stringify(compiler.assets.concat('/index.html')))
+				.replace('__routes__', route_code);
+
+			fs.writeFileSync(path.resolve(dest, 'service-worker.js'), service_worker);
+
+			const shell = templates.render(200, {
+				styles: '',
+				head: '',
+				html: '<noscript>Please enable JavaScript!</noscript>',
+				main: compiler.client_main
+			});
+
+			fs.writeFileSync(path.resolve(dest, 'index.html'), shell);
+		});
+
+		compiler.get_chunk = async id => {
+			return path.resolve(dest, 'server', compiler.chunks[id]);
+		};
+	}
+
+	return compiler;
+};

package.json

@@ -1,17 +1,24 @@
 {
   "name": "sapper",
-  "version": "0.0.1",
+  "version": "0.0.16",
   "description": "Combat-ready apps, engineered by Svelte",
   "main": "connect.js",
   "directories": {
     "test": "test"
   },
   "dependencies": {
-    "@std/esm": "^0.18.0"
+    "@std/esm": "^0.18.0",
+    "escape-html": "^1.0.3",
+    "mkdirp": "^0.5.1",
+    "rimraf": "^2.6.2",
+    "webpack": "^3.10.0"
   },
   "devDependencies": {
     "mocha": "^4.0.1",
-	"svelte": "^1.47.0"
+    "svelte": "^1.47.1"
+  },
+  "peerDependencies": {
+    "svelte": "^1.47.1"
   },
   "scripts": {
     "test": "mocha --opts mocha.opts"

runtime/app.js

@@ -0,0 +1,171 @@
+const detach = node => {
+	node.parentNode.removeChild(node);
+};
+
+let component;
+
+const scroll_history = {};
+let uid = 1;
+let cid;
+
+window.scroll_history = scroll_history;
+
+if ('scrollRestoration' in history) {
+	history.scrollRestoration = 'manual'
+}
+
+const app = {
+	init(target, routes) {
+		function select_route(url) {
+			if (url.origin !== window.location.origin) return null;
+
+			for (const route of routes) {
+				const match = route.pattern.exec(url.pathname);
+				if (match) {
+					const params = route.params(match);
+
+					const query = {};
+					for (const [key, value] of url.searchParams) query[key] = value || true;
+
+					return { route, data: { params, query } };
+				}
+			}
+		}
+
+		function render(Component, data, scroll) {
+			Promise.resolve(
+				Component.preload ? Component.preload(data) : {}
+			).then(preloaded => {
+				if (component) {
+					component.destroy();
+				} else {
+					// first load — remove SSR'd <head> contents
+					const start = document.querySelector('#sapper-head-start');
+					let end = document.querySelector('#sapper-head-end');
+
+					if (start && end) {
+						while (start.nextSibling !== end) detach(start.nextSibling);
+						detach(start);
+						detach(end);
+					}
+
+					// preload additional routes
+					routes.reduce((promise, route) => promise.then(route.load), Promise.resolve());
+				}
+
+				component = new Component({
+					target,
+					data: Object.assign(data, preloaded),
+					hydrate: !!component
+				});
+
+				window.scrollTo(scroll.x, scroll.y);
+			});
+		}
+
+		function navigate(url, id) {
+			const selected = select_route(url);
+			if (selected) {
+				if (id) {
+					// popstate or initial navigation
+					cid = id;
+				} else {
+					// clicked on a link. preserve scroll state
+					scroll_history[cid] = scroll_state();
+
+					id = cid = ++uid;
+					scroll_history[cid] = { x: 0, y: 0 };
+
+					history.pushState({ id }, '', url.href);
+					event.preventDefault();
+				}
+
+				selected.route.load().then(mod => {
+					render(mod.default, selected.data, scroll_history[id]);
+				});
+
+				cid = id;
+				return true;
+			}
+		}
+
+		function findAnchor(node) {
+			while (node && node.nodeName.toUpperCase() !== 'A') node = node.parentNode; // SVG <a> elements have a lowercase name
+			return node;
+		}
+
+		window.addEventListener('click', event => {
+			// Adapted from https://github.com/visionmedia/page.js
+			// MIT license https://github.com/visionmedia/page.js#license
+			if (which(event) !== 1) return;
+			if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+			if (event.defaultPrevented) return;
+
+			const a = findAnchor(event.target);
+			if (!a) return;
+
+			event.preventDefault();
+
+			// check if link is inside an svg
+			// in this case, both href and target are always inside an object
+			const svg = typeof a.href === 'object' && a.href.constructor.name === 'SVGAnimatedString';
+			const href = svg ? a.href.baseVal : a.href;
+
+			// Ignore if tag has
+			// 1. 'download' attribute
+			// 2. rel='external' attribute
+			if (a.hasAttribute('download') || a.getAttribute('rel') === 'external') return;
+
+			// Ignore if <a> has a target
+			if (svg ? a.target.baseVal : a.target) return;
+
+			const scroll = scroll_state();
+
+			navigate(new URL(a.href), null);
+		});
+
+		function preload(event) {
+			const a = findAnchor(event.target);
+			if (!a || a.rel !== 'prefetch') return;
+
+			const selected = select_route(new URL(a.href));
+
+			if (selected) {
+				selected.route.load().then(mod => {
+					if (mod.default.preload) mod.default.preload(selected.data);
+				});
+			}
+		}
+
+		window.addEventListener('touchstart', preload);
+		window.addEventListener('mouseover', preload);
+
+		window.addEventListener('popstate', event => {
+			if (!event.state) return; // hashchange, or otherwise outside sapper's control
+			scroll_history[cid] = scroll_state();
+
+			console.log(`storing current scroll: ${cid}`, scroll_state());
+			console.log(`navigating to state: ${event.state.id}`, scroll_history[event.state.id]);
+			navigate(new URL(window.location), event.state.id);
+		});
+
+		const scroll = scroll_history[uid] = scroll_state();
+
+		history.replaceState({ id: uid }, '', window.location.href);
+		navigate(new URL(window.location), uid);
+	}
+};
+
+function which(event) {
+	event = event || window.event;
+	return event.which === null ? event.button : event.which;
+}
+
+function scroll_state() {
+	return {
+		x: window.scrollX,
+		y: window.scrollY
+	};
+}
+
+export default app;

templates/main.js

@@ -0,0 +1,5 @@
+import app from '__app__';
+
+app.init(document.querySelector('__selector__'), [
+	__routes__
+]);

webpack/config.js

@@ -0,0 +1,43 @@
+const path = require('path');
+const route_manager = require('../lib/route_manager.js');
+const { src, dest, dev } = require('../lib/config.js');
+
+module.exports = {
+	dev,
+
+	client: {
+		entry: () => {
+			return {
+				main: `${dest}/main.js`
+			};
+		},
+
+		output: () => {
+			return {
+				path: `${dest}/client`,
+				filename: '[name].[hash].js',
+				chunkFilename: '[name].[id].js',
+				publicPath: '/client/'
+			};
+		}
+	},
+
+	server: {
+		entry: () => {
+			const entries = {};
+			route_manager.routes.forEach(route => {
+				entries[route.id] = path.resolve(src, route.file);
+			});
+			return entries;
+		},
+
+		output: () => {
+			return {
+				path: `${dest}/server`,
+				filename: '[name].[hash].js',
+				chunkFilename: '[name].[id].js',
+				libraryTarget: 'commonjs2'
+			};
+		}
+	}
+};