lukeed · lukeed · May 14, 2018 · May 14, 2018
diff --git a/examples/with-sirv/index.js b/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}`);
+	});
diff --git a/examples/with-sirv/package.json b/examples/with-sirv/package.json
@@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "start": "node index"
+  },
+  "dependencies": {
+    "polka": "latest",
+    "sirv": "latest"
+  }
+}
diff --git a/examples/with-sirv/public/app.js b/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';
+		}
+	});
+})();
diff --git a/examples/with-sirv/public/index.html b/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>
diff --git a/examples/with-sirv/public/style.css b/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;
+}
diff --git a/examples/with-sirv/readme.md b/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`!