totole/sapper-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper-template.git synced 2026-01-19 13:05:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

make project exportable by avoiding api/blog route conflict

Browse Source
This commit is contained in:
Rich Harris
2018-02-05 09:09:32 -05:00
parent c4181157dd
commit c84ae160ef
4 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
routes/api/blog/index.js → routes/api/blog-posts.js
View File

@@ -1,4 +1,4 @@
import posts from './_posts.js'; import posts from './blog/_posts.js';
const contents = JSON.stringify(posts.map(post => { const contents = JSON.stringify(posts.map(post => {
return { return {

2
routes/api/blog/_posts.js
View File

@@ -70,7 +70,7 @@ const posts = [
<ul> <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>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>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 powering this very page (look in <code>routes/api/blog-posts</code>)</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>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> </ul>
` `

2
routes/blog/index.html
View File

@@ -32,7 +32,7 @@
}, },
preload({ params, query }) { preload({ params, query }) {
return fetch(`/api/blog`).then(r => r.json()).then(posts => { return fetch(`/api/blog-posts`).then(r => r.json()).then(posts => {
return { posts }; return { posts };
}); });
} }

2
server.js
View File

@@ -6,7 +6,7 @@ const static = require('serve-static');
const { PORT = 3000 } = process.env; const { PORT = 3000 } = process.env;
// this allows us to do e.g. `fetch('/api/blog')` on the server // this allows us to do e.g. `fetch('/api/blog-posts')` on the server
const fetch = require('node-fetch'); const fetch = require('node-fetch');
global.fetch = (url, opts) => { global.fetch = (url, opts) => {
if (url[0] === '/') url = `http://localhost:${PORT}${url}`; if (url[0] === '/') url = `http://localhost:${PORT}${url}`;