Merge pull request #49 from sveltejs/basepath

Use <base>, via %sapper.base%

Author: Rich-Harris

app/server.js

@@ -1,4 +1,4 @@
-import fs from 'fs';
+import { resolve } from 'url';
 import polka from 'polka';
 import compression from 'compression';
 import sapper from 'sapper';
@@ -10,13 +10,11 @@ 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}/`, url);
 	return fetch(url, opts);
 };
 
-// you can also use Express
 polka()
 	.use(compression({ threshold: 0 }))
-	.use(serve('assets'))
-	.use(sapper({ routes }))
+	.use(serve('assets'), sapper({ routes }))
 	.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

package.json

@@ -19,7 +19,7 @@
     "polka": "^0.3.4",
     "sapper": "^0.9.4",
     "serve-static": "^1.13.1",
-    "svelte": "^1.56.0",
+    "svelte": "^1.57.3",
     "svelte-loader": "^2.3.3",
     "webpack": "^4.1.0"
   }

routes/_components/Nav.html

@@ -1,11 +1,11 @@
 <nav>
 	<ul>
-		<li><a class='{{page === "home"  ? "selected" : ""}}' href='/'>home</a></li>
-		<li><a class='{{page === "about"  ? "selected" : ""}}' href='/about'>about</a></li>
+		<li><a class='{{page === "home"  ? "selected" : ""}}' href='.'>home</a></li>
+		<li><a class='{{page === "about"  ? "selected" : ""}}' href='about'>about</a></li>
 
 		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
 		     the blog data when we hover over the link or tap it on a touchscreen -->
-		<li><a rel=prefetch class='{{page === "blog"  ? "selected" : ""}}' href='/blog'>blog</a></li>
+		<li><a rel=prefetch class='{{page === "blog"  ? "selected" : ""}}' href='blog'>blog</a></li>
 	</ul>
 </nav>
 

routes/blog/[slug].html

@@ -59,7 +59,7 @@ <h1>{{post.title}}</h1>
 			// is called [slug].html
 			const { slug } = params;
 
-			return fetch(`/blog/${slug}.json`).then(r => r.json()).then(post => {
+			return fetch(`blog/${slug}.json`).then(r => r.json()).then(post => {
 				return { post };
 			});
 		}

routes/blog/_posts.js

@@ -14,7 +14,7 @@ const posts = [
 		html: `
 			<p>First, you have to know what <a href='https://svelte.technology'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.technology/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
 
-			<p>Sapper is a Next.js-style framework (<a href='/blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
+			<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
 
 			<ul>
 				<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
@@ -70,8 +70,8 @@ const posts = [
 			<ul>
 				<li>It's powered by <a href='https://svelte.technology'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
 				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>routes/blog/[slug].html</code></li>
-				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <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>
+				<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>
 		`
 	},

routes/blog/index.html

@@ -11,7 +11,7 @@ <h1>Recent posts</h1>
 			     tell Sapper to load the data for the page as soon as
 			     the user hovers over the link or taps it, instead of
 			     waiting for the 'click' event -->
-			<li><a rel='prefetch' href='/blog/{{post.slug}}'>{{post.title}}</a></li>
+			<li><a rel='prefetch' href='blog/{{post.slug}}'>{{post.title}}</a></li>
 		{{/each}}
 	</ul>
 </Layout>
@@ -32,7 +32,7 @@ <h1>Recent posts</h1>
 		},
 
 		preload({ params, query }) {
-			return fetch(`/blog.json`).then(r => r.json()).then(posts => {
+			return fetch(`blog.json`).then(r => r.json()).then(posts => {
 				return { posts };
 			});
 		}

routes/index.html

@@ -6,7 +6,7 @@
 	<h1>Great success!</h1>
 
 	<figure>
-		<img alt='Borat' src='/great-success.png'>
+		<img alt='Borat' src='great-success.png'>
 		<figcaption>HIGH FIVE!</figcaption>
 	</figure>