diff --git a/app/server.js b/app/server.js
index 13ba886..be338a1 100644
--- a/app/server.js
+++ b/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);
\ No newline at end of file
+ .listen(PORT);
\ No newline at end of file
diff --git a/app/template.html b/app/template.html
index 5dc665a..43e1ef3 100644
--- a/app/template.html
+++ b/app/template.html
@@ -5,15 +5,11 @@
-
-
-
+ %sapper.base%
-
+
+
+
-
First, you have to know what Svelte 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 introductory blog post, you should!
-
Sapper is a Next.js-style framework (more on that here) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:
+
Sapper is a Next.js-style framework (more on that here) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:
Code-splitting, dynamic imports and hot module replacement, powered by webpack
@@ -70,8 +70,8 @@ const posts = [
It's powered by Svelte instead of React, so it's faster and your apps are smaller
Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is routes/blog/[slug].html
-
As well as pages (Svelte components, which render on server or client), you can create server routes in your routes directory. These are just .js files that export functions corresponding to HTTP methods, and receive Express request and response objects as arguments. This makes it very easy to, for example, add a JSON API such as the one powering this very page
-
Links are just <a> elements, rather than framework-specific <Link> components. That means, for example, that this link right here, despite being inside a blob of HTML, works with the router as you'd expect.
+
As well as pages (Svelte components, which render on server or client), you can create server routes in your routes directory. These are just .js files that export functions corresponding to HTTP methods, and receive Express request and response objects as arguments. This makes it very easy to, for example, add a JSON API such as the one powering this very page
+
Links are just <a> elements, rather than framework-specific <Link> components. That means, for example, that this link right here, despite being inside a blob of HTML, works with the router as you'd expect.
`
},
diff --git a/routes/blog/index.html b/routes/blog/index.html
index d8deaf5..6c98653 100644
--- a/routes/blog/index.html
+++ b/routes/blog/index.html
@@ -11,7 +11,7 @@
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 -->
-
+ 