Skip to content
Permalink
Browse files

Add Sapper Example (#453)

* add  sapper example

* add .nowignoree
  • Loading branch information...
msweeneydev committed Aug 1, 2019
1 parent a70374b commit 50891af47d66ab83af04d2ac052649fd82303ef0
@@ -39,14 +39,20 @@
"example": "Angular",
"path": "/angular",
"demo": "https://angular.now-examples.now.sh",
"description": "An Angular app, created with the Angular CLI"
"description": "An Angular app, created with the Angular CLI."
},
{
"example": "Hugo",
"path": "/hugo",
"demo": "https://hugo.now-examples.now.sh",
"description": "A Hugo site, created with the Hugo CLI."
},
{
"example": "Sapper",
"path": "/sapper",
"demo": "https://sapper.now-examples.now.sh",
"description": "A Sapper app, using the Sapper template."
},
{
"example": "UmiJS",
"path": "/umijs",
@@ -0,0 +1,6 @@
.DS_Store
/node_modules/
/src/node_modules/@sapper/
yarn-error.log
/cypress/screenshots/
/__sapper__/
@@ -0,0 +1,2 @@
README.md
yarn.lock
@@ -0,0 +1,21 @@
# Sapper Example

This directory is a brief example of a [Sapper](https://sapper.svelte.dev/) app that can be deployed to ZEIT Now with zero configuration.

## How we created this example

To get started with Sapper on Now, you can use [degit](https://github.com/Rich-Harris/degit) to initialize the project:

```shell
$ npx degit "sveltejs/sapper-template#webpack" my-sapper-app
```

> The only change made is to change the build script in `package.json` to be `"sapper export"`.
## Deploying this Example

Once initialized, you can deploy the Sapper example with just a single command:

```shell
$ now
```
@@ -0,0 +1,18 @@
version: "{build}"

shallow_clone: true

init:
- git config --global core.autocrlf false

build: off

environment:
matrix:
# node.js
- nodejs_version: stable

install:
- ps: Install-Product node $env:nodejs_version
- npm install cypress
- npm install
@@ -0,0 +1,4 @@
{
"baseUrl": "http://localhost:3000",
"video": false
}
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}
@@ -0,0 +1,19 @@
describe('Sapper template app', () => {
beforeEach(() => {
cy.visit('/')
});

it('has the correct <h1>', () => {
cy.contains('h1', 'Great success!')
});

it('navigates to /about', () => {
cy.get('nav a').contains('about').click();
cy.url().should('include', '/about');
});

it('navigates to /blog', () => {
cy.get('nav a').contains('blog').click();
cy.url().should('include', '/blog');
});
});
@@ -0,0 +1,17 @@
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}
@@ -0,0 +1,25 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
@@ -0,0 +1,20 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')
@@ -0,0 +1,24 @@
{
"name": "TODO",
"description": "TODO",
"version": "0.0.1",
"scripts": {
"dev": "sapper dev",
"build": "sapper export",
"cy:run": "cypress run",
"cy:open": "cypress open",
"test": "run-p --race dev cy:run"
},
"dependencies": {
"compression": "^1.7.1",
"polka": "next",
"sirv": "^0.4.0"
},
"devDependencies": {
"npm-run-all": "^4.1.5",
"sapper": "^0.27.0",
"svelte": "^3.0.0",
"svelte-loader": "^2.9.0",
"webpack": "^4.7.0"
}
}
@@ -0,0 +1,5 @@
import * as sapper from '@sapper/app';

sapper.start({
target: document.querySelector('#sapper')
});
@@ -0,0 +1,60 @@
<script>
export let segment;
</script>

<style>
nav {
border-bottom: 1px solid rgba(255,62,0,0.1);
font-weight: 300;
padding: 0 1em;
}
ul {
margin: 0;
padding: 0;
}
/* clearfix */
ul::after {
content: '';
display: block;
clear: both;
}
li {
display: block;
float: left;
}
.selected {
position: relative;
display: inline-block;
}
.selected::after {
position: absolute;
content: '';
width: calc(100% - 1em);
height: 2px;
background-color: rgb(255,62,0);
display: block;
bottom: -1px;
}
a {
text-decoration: none;
padding: 1em 0.5em;
display: block;
}
</style>

<nav>
<ul>
<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
<li><a class='{segment === "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='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
</ul>
</nav>
@@ -0,0 +1,40 @@
<script>
export let status;
export let error;
const dev = process.env.NODE_ENV === 'development';
</script>

<style>
h1, p {
margin: 0 auto;
}
h1 {
font-size: 2.8em;
font-weight: 700;
margin: 0 0 0.5em 0;
}
p {
margin: 1em auto;
}
@media (min-width: 480px) {
h1 {
font-size: 4em;
}
}
</style>

<svelte:head>
<title>{status}</title>
</svelte:head>

<h1>{status}</h1>

<p>{error.message}</p>

{#if dev && error.stack}
<pre>{error.stack}</pre>
{/if}
@@ -0,0 +1,22 @@
<script>
import Nav from '../components/Nav.svelte';
export let segment;
</script>

<style>
main {
position: relative;
max-width: 56em;
background-color: white;
padding: 2em;
margin: 0 auto;
box-sizing: border-box;
}
</style>

<Nav {segment}/>

<main>
<slot></slot>
</main>
@@ -0,0 +1,7 @@
<svelte:head>
<title>About</title>
</svelte:head>

<h1>About this site</h1>

<p>This is the 'about' page. There's not much here.</p>
@@ -0,0 +1,28 @@
import posts from './_posts.js';

const lookup = new Map();
posts.forEach(post => {
lookup.set(post.slug, JSON.stringify(post));
});

export function get(req, res, next) {
// the `slug` parameter is available because
// this file is called [slug].json.js
const { slug } = req.params;

if (lookup.has(slug)) {
res.writeHead(200, {
'Content-Type': 'application/json'
});

res.end(lookup.get(slug));
} else {
res.writeHead(404, {
'Content-Type': 'application/json'
});

res.end(JSON.stringify({
message: `Not found`
}));
}
}

1 comment on commit 50891af

@now

This comment has been minimized.

Copy link

commented on 50891af Aug 1, 2019

Please sign in to comment.
You can’t perform that action at this time.