Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
example: sirv (#46)
  • Loading branch information
lukeed committed May 14, 2018
1 parent 8af07b5 commit 1284606
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 0 deletions.
13 changes: 13 additions & 0 deletions examples/with-sirv/index.js
@@ -0,0 +1,13 @@
const polka = require('polka');

const { PORT=3000 } = process.env;
const serve = require('sirv')('public');

polka()
.use(serve)
.get('/health', (req, res) => {
res.end('OK');
})
.listen(PORT).then(_ => {
console.log(`> Running on localhost:${PORT}`);
});
9 changes: 9 additions & 0 deletions examples/with-sirv/package.json
@@ -0,0 +1,9 @@
{
"scripts": {
"start": "node index"
},
"dependencies": {
"polka": "latest",
"sirv": "latest"
}
}
20 changes: 20 additions & 0 deletions examples/with-sirv/public/app.js
@@ -0,0 +1,20 @@
(function () {
let i=0, img, arr=[];
let doc=document, app=doc.getElementById('app'), images=[
'uOi3lg8fGl4', 'OjVIrvBKWP8', 'uSFOwYo1qEw', 'tZaA8VqJG3g',
'9yWcy5B-haM', '_MeRaXKnEYo', 'HrkyU8bVwYI', 'Yohivf5JWvg',
'78A265wPiO4', 'TAhsXhWipwg', 'dQBZY7yEVpc', '6k2FqycNmwU'
];

for (; i < images.length; i++) {
img = doc.createElement('img');
img.src = 'https://source.unsplash.com/' + images[i];
arr.push(img) && app.appendChild(img);
}

onloaded(arr, {
onComplete() {
app.className = 'rdy';
}
});
})();
13 changes: 13 additions & 0 deletions examples/with-sirv/public/index.html
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example: Sirv</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="app" />
<script src="https://unpkg.com/onloaded@1.0.0/dist/onloaded.min.js"></script>
<script src="/app.js"></script>
</body>
</html>
22 changes: 22 additions & 0 deletions examples/with-sirv/public/style.css
@@ -0,0 +1,22 @@
#app {
opacity: 0;
margin: 100px;
column-count: 3;
column-gap: 25px;
column-rule-width: 0;
transition: all 250ms 50ms;
will-change: transform, opacity;
transform: translateY(8px);
}

#app img {
display: block;
position: relative;
margin-bottom: 25px;
width: 100%;
}

#app.rdy {
transform: translateY(0);
opacity: 1;
}
18 changes: 18 additions & 0 deletions examples/with-sirv/readme.md
@@ -0,0 +1,18 @@
# Example: Sirv

Tiny example that illustrates how to use [`sirv`](https://github.com/lukeed/sirv) as an alternative to [`serve-static`](https://github.com/expressjs/serve-static).

The `public` directory (configurable) contents are served by Polka as static assets.

All photos are fetched from [Unsplash](https://unsplash.com) via the `public/app.js` script.

## Setup

```sh
$ npm install
$ npm start
```

## Usage

Open a browser to `localhost:3000`!

0 comments on commit 1284606

Please sign in to comment.