make basepath-friendly

app/server.js

@@ -1,20 +1,21 @@
-import fs from 'fs';
-import polka from 'polka';
+import { resolve } from 'url';
+import express from 'express';
 import compression from 'compression';
 import sapper from 'sapper';
 import serve from 'serve-static';
 import fetch from 'node-fetch';
-import { routes } from './manifest/server.js';
+import { basepath, routes } from './manifest/server.js';
+
+const { PORT } = process.env;
 
 // this allows us to do e.g. `fetch('/api/blog-posts')` on the server
 global.fetch = (url, opts) => {
-	if (url[0] === '/') url = `http://localhost:${PORT}${url}`;
+	url = resolve(`http://localhost:${PORT}${basepath}/`, url);
 	return fetch(url, opts);
 };
 
-// you can also use Express
-polka()
+express()
 	.use(compression({ threshold: 0 }))
-	.use(serve('assets'))
+	.use(basepath, serve('assets'))
 	.use(sapper({ routes }))
-	.listen(process.env.PORT);
+	.listen(PORT);

app/template.html

@@ -5,15 +5,11 @@
 	<meta name='viewport' content='width=device-width'>
 	<meta name='theme-color' content='#aa1e1e'>
 
-	<link rel='stylesheet' href='/global.css'>
-	<link rel='manifest' href='/manifest.json'>
-	<link rel='icon' type='image/png' href='/favicon.png'>
+	%sapper.base%
 
-	<script>
-		if ('serviceWorker' in navigator) {
-			navigator.serviceWorker.register('/service-worker.js');
-		}
-	</script>
+	<link rel='stylesheet' href='global.css'>
+	<link rel='manifest' href='manifest.json'>
+	<link rel='icon' type='image/png' href='favicon.png'>
 
 	<!-- Sapper generates a <style> tag containing critical CSS
 	     for the current page. CSS for the rest of the app is