Skip to content

Commit 488603d

Browse files
erikareadstrek
erikareads
and
trek
authored
copy sapper example from vercel/vercel (#1030)
Co-authored-by: Trek Glowacki <[email protected]>
1 parent 873a431 commit 488603d

33 files changed

+3834
-0
lines changed

Diff for: ‎framework-boilerplates/sapper/.gitignore

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.DS_Store
2+
/node_modules/
3+
/src/node_modules/@sapper/
4+
yarn-error.log
5+
/cypress/screenshots/
6+
/__sapper__/
7+
.env
8+
.env.build
9+
10+
.vercel

Diff for: ‎framework-boilerplates/sapper/.vercelignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
README.md

Diff for: ‎framework-boilerplates/sapper/README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Sapper Example
2+
3+
This directory is a brief example of a [Sapper](https://sapper.svelte.dev/) app that can be deployed to Vercel with zero configuration.
4+
5+
## Deploy Your Own
6+
7+
Deploy your own Sapper project with Vercel.
8+
9+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/framework-boilerplates/sapper&template=sapper)
10+
11+
_Live Example: https://sapper-template.vercel.app_
12+
13+
### How We Created This Example
14+
15+
To get started with Sapper deployed with Vercel, you can use [degit](https://github.com/Rich-Harris/degit) to initialize the project:
16+
17+
```shell
18+
$ npx degit "sveltejs/sapper-template#webpack" my-sapper-app
19+
```
20+
21+
> The only change made is to change the build script in `package.json` to be `"sapper export"`.

Diff for: ‎framework-boilerplates/sapper/appveyor.yml

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
version: "{build}"
2+
3+
shallow_clone: true
4+
5+
init:
6+
- git config --global core.autocrlf false
7+
8+
build: off
9+
10+
environment:
11+
matrix:
12+
# node.js
13+
- nodejs_version: stable
14+
15+
install:
16+
- ps: Install-Product node $env:nodejs_version
17+
- npm install cypress
18+
- npm install

Diff for: ‎framework-boilerplates/sapper/cypress.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"baseUrl": "http://localhost:3000",
3+
"video": false
4+
}

Diff for: ‎framework-boilerplates/sapper/cypress/fixtures/example.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "[email protected]",
4+
"body": "Fixtures are a great way to mock data for responses to routes"
5+
}

Diff for: ‎framework-boilerplates/sapper/cypress/integration/spec.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
describe('Sapper template app', () => {
2+
beforeEach(() => {
3+
cy.visit('/');
4+
});
5+
6+
it('has the correct <h1>', () => {
7+
cy.contains('h1', 'Great success!');
8+
});
9+
10+
it('navigates to /about', () => {
11+
cy.get('nav a')
12+
.contains('about')
13+
.click();
14+
cy.url().should('include', '/about');
15+
});
16+
17+
it('navigates to /blog', () => {
18+
cy.get('nav a')
19+
.contains('blog')
20+
.click();
21+
cy.url().should('include', '/blog');
22+
});
23+
});

Diff for: ‎framework-boilerplates/sapper/cypress/plugins/index.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// ***********************************************************
2+
// This example plugins/index.js can be used to load plugins
3+
//
4+
// You can change the location of this file or turn off loading
5+
// the plugins file with the 'pluginsFile' configuration option.
6+
//
7+
// You can read more here:
8+
// https://on.cypress.io/plugins-guide
9+
// ***********************************************************
10+
11+
// This function is called when a project is opened or re-opened (e.g. due to
12+
// the project's config changing)
13+
14+
module.exports = (on, config) => {
15+
// `on` is used to hook into various events Cypress emits
16+
// `config` is the resolved Cypress config
17+
};

Diff for: ‎framework-boilerplates/sapper/cypress/support/commands.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// ***********************************************
2+
// This example commands.js shows you how to
3+
// create various custom commands and overwrite
4+
// existing commands.
5+
//
6+
// For more comprehensive examples of custom
7+
// commands please read more here:
8+
// https://on.cypress.io/custom-commands
9+
// ***********************************************
10+
//
11+
//
12+
// -- This is a parent command --
13+
// Cypress.Commands.add("login", (email, password) => { ... })
14+
//
15+
//
16+
// -- This is a child command --
17+
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18+
//
19+
//
20+
// -- This is a dual command --
21+
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22+
//
23+
//
24+
// -- This is will overwrite an existing command --
25+
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

Diff for: ‎framework-boilerplates/sapper/cypress/support/index.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// ***********************************************************
2+
// This example support/index.js is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands';
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')

Diff for: ‎framework-boilerplates/sapper/package.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "sapper",
3+
"private": true,
4+
"scripts": {
5+
"start": "sapper dev",
6+
"dev": "sapper dev --port $PORT",
7+
"build": "sapper export",
8+
"cy:run": "cypress run",
9+
"cy:open": "cypress open",
10+
"test": "run-p --race dev cy:run"
11+
},
12+
"engines": {
13+
"node": "16.x"
14+
},
15+
"dependencies": {
16+
"compression": "^1.7.1",
17+
"polka": "next",
18+
"sirv": "^0.4.0"
19+
},
20+
"devDependencies": {
21+
"npm-run-all": "^4.1.5",
22+
"sapper": "^0.27.0",
23+
"svelte": "^3.0.0",
24+
"svelte-loader": "^2.9.0",
25+
"webpack": "^4.7.0"
26+
}
27+
}

Diff for: ‎framework-boilerplates/sapper/src/client.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as sapper from '@sapper/app';
2+
3+
sapper.start({
4+
target: document.querySelector('#sapper'),
5+
});

Diff for: ‎framework-boilerplates/sapper/src/components/Nav.svelte

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<script>
2+
export let segment;
3+
</script>
4+
5+
<style>
6+
nav {
7+
border-bottom: 1px solid rgba(255,62,0,0.1);
8+
font-weight: 300;
9+
padding: 0 1em;
10+
}
11+
12+
ul {
13+
margin: 0;
14+
padding: 0;
15+
}
16+
17+
/* clearfix */
18+
ul::after {
19+
content: '';
20+
display: block;
21+
clear: both;
22+
}
23+
24+
li {
25+
display: block;
26+
float: left;
27+
}
28+
29+
.selected {
30+
position: relative;
31+
display: inline-block;
32+
}
33+
34+
.selected::after {
35+
position: absolute;
36+
content: '';
37+
width: calc(100% - 1em);
38+
height: 2px;
39+
background-color: rgb(255,62,0);
40+
display: block;
41+
bottom: -1px;
42+
}
43+
44+
a {
45+
text-decoration: none;
46+
padding: 1em 0.5em;
47+
display: block;
48+
}
49+
</style>
50+
51+
<nav>
52+
<ul>
53+
<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
54+
<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li>
55+
56+
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
57+
the blog data when we hover over the link or tap it on a touchscreen -->
58+
<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
59+
</ul>
60+
</nav>

Diff for: ‎framework-boilerplates/sapper/src/routes/_error.svelte

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script>
2+
export let status;
3+
export let error;
4+
5+
const dev = process.env.NODE_ENV === 'development';
6+
</script>
7+
8+
<style>
9+
h1, p {
10+
margin: 0 auto;
11+
}
12+
13+
h1 {
14+
font-size: 2.8em;
15+
font-weight: 700;
16+
margin: 0 0 0.5em 0;
17+
}
18+
19+
p {
20+
margin: 1em auto;
21+
}
22+
23+
@media (min-width: 480px) {
24+
h1 {
25+
font-size: 4em;
26+
}
27+
}
28+
</style>
29+
30+
<svelte:head>
31+
<title>{status}</title>
32+
</svelte:head>
33+
34+
<h1>{status}</h1>
35+
36+
<p>{error.message}</p>
37+
38+
{#if dev && error.stack}
39+
<pre>{error.stack}</pre>
40+
{/if}

Diff for: ‎framework-boilerplates/sapper/src/routes/_layout.svelte

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script>
2+
import Nav from '../components/Nav.svelte';
3+
4+
export let segment;
5+
</script>
6+
7+
<style>
8+
main {
9+
position: relative;
10+
max-width: 56em;
11+
background-color: white;
12+
padding: 2em;
13+
margin: 0 auto;
14+
box-sizing: border-box;
15+
}
16+
</style>
17+
18+
<Nav {segment}/>
19+
20+
<main>
21+
<slot></slot>
22+
</main>

Diff for: ‎framework-boilerplates/sapper/src/routes/about.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<svelte:head>
2+
<title>About</title>
3+
</svelte:head>
4+
5+
<h1>About this site</h1>
6+
7+
<p>This is the 'about' page. There's not much here.</p>

Diff for: ‎framework-boilerplates/sapper/src/routes/blog/[slug].json.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import posts from './_posts.js';
2+
3+
const lookup = new Map();
4+
posts.forEach(post => {
5+
lookup.set(post.slug, JSON.stringify(post));
6+
});
7+
8+
export function get(req, res, next) {
9+
// the `slug` parameter is available because
10+
// this file is called [slug].json.js
11+
const { slug } = req.params;
12+
13+
if (lookup.has(slug)) {
14+
res.writeHead(200, {
15+
'Content-Type': 'application/json'
16+
});
17+
18+
res.end(lookup.get(slug));
19+
} else {
20+
res.writeHead(404, {
21+
'Content-Type': 'application/json'
22+
});
23+
24+
res.end(JSON.stringify({
25+
message: `Not found`
26+
}));
27+
}
28+
}

0 commit comments

Comments
 (0)