## Rediscovering Neverland How to instantly deploy your code 🚀  <small>by Steven (<a href="https://twitter.com/styfle">@styfle</a>)</small>

Problems with deployments...🤔

- Slow builds

- Too much configuration

- Hard to scale instances and regions

- Cache invalidation is hard

- Domains, sub-domains, SSL certs

- Unreproducable build/deploy

## Possible downtime  Any mistake could lead to downtime

## Eventually you'll get it  Overcome these obstacles and deploy

## Another environment?  Staging? Test? Feature Branch?

## Hey wait  Let's pause and rewind to simpler times...

## World Wide Web The first web browser was released in 1991

## Hook (film) The live-action Peter Pan movie was released in 1991

## Coincidence? Maybe, maybe not 🧚‍♀️

## Do you remember this era? <video src="assets/pan-remember.mp4" controls></video>

## Deployment in the 1990's - 🔑 Login to FTP Server - ↔️ Copy HTML/PHP files - ✅ Done

## Easy - 🎯 Zero configuration* - 📈 Zero downtime* - 🚧 Zero build time* - 😵 No SSL* <small>*kind of</small>

## Problems - Which files to upload? All? Some? Diff? - Non-atomic => undefined behavior - Vulnerable to MITM attacks without SSL - Restart server to take affect

## Almost  90s was a simpler time but also had many problems

## Why not both? <div style="display:flex; width:100%"> <img src="assets/pan-fear.jpg" width="50%"> <img src="assets/pan-laugh.jpg" width="50%"> </div> Can we take best of both worlds?

## Introducing ZEIT Now <svg width="113" height="100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient x1="196.572434%" y1="228.815483%" x2="50%" y2="50%" id="a"> <stop offset="0%"/> <stop stop-color="#FFF" offset="100%"/> </linearGradient> </defs> <path d="M350.5 150L407 250H294z" transform="translate(-294 -150)" fill="url(#a)" fill-rule="evenodd"/> </svg> Serverless deployments for the modern day

## Why ZEIT Now? - 🔢 No need to setup DNS - 🔒 No need to setup SSL - 🌩️ No need to setup a CDN - 🤑 No need for a credit card - ⛄ Immutable deployments - 🚀 `git push` to deploy

## DNS Free `now.sh` or use a custom domain ✨ https://zeit.co/domains

## SSL/TLS Served over HTTP/2 with TLS 1.3 🔒 and Brotli 🥦 https://zeit.co/docs/v2/network/encryption

## Smart CDN Served from the edge in 20+ regions worldwide 🌎 https://zeit.co/smart-cdn

## Start for free No credit card required to create an account 🤑 - 100 deployments per day - 20 GB bandwidth per month - 3 team members http://zeit.co/pricing

## Git Integration Connect GitHub, GitLab, or BitBucket account 🔌 Immutable, unique URL for each Pull Request 🚀 Merge PR to promote to production ↩️ https://zeit.co/docs/v2/git-integration

## Getting Started Projects have two parts: 1. Frontend with static site generator 2. Backend API with Node.js, Go, Python, etc

## Frontend 1. Define `build` script to invoke SSG (or write plain HTML/CSS)

## Backend 2. Create `/api` directory with serverless functions

## Demo CLI - 🆕 Create a project - 📝 Add html files - 🌀 Add functions to `/api` dir - ⚡ Install Now CLI - 👩🏽‍💻 Develop locally - 🚀 Deploy

## Create a project ```bash mkdir 'my-project' cd 'my-project' ```

## index.html ```html <link rel="stylesheet" href="https://css.zeit.sh/v1.css"> <h1>Welcome</h1> <p>Below are examples of Serverless Function APIs</p> <ul> <li><a href="/api/echo?hello=now">Say hello</a></li> <li><a href="/api/sqrt?value=64">Show sqrt(64)</a></li> <li><a href="/api/sqrt?value=4">Show sqrt(4)</a></li> </ul> ```

## Echo API ```js // api/echo.js module.exports = (req, res) => { res.json(req.query); } ```

## Square Root API ```js // api/sqrt.js module.exports = (req, res) => { const { value } = req.query; const answer = Math.sqrt(value); res.json({ value, answer }); } ```

## Install Now CLI ```bash npm i -g now ```

## Develop locally ```bash now dev ```

## Deploy ```bash now ```

## Production domain ```bash now --prod ```

## Demo Git Integration - 🆕 Create or fork a repository - 🏗 Add dependencies and `build` script - 🆙 `git push` and create a Pull Request - 👩🏽‍💻 Review and Merge

## Create or Fork https://github.com/wesbos/dad-jokes

## Build Script ```js // build.js const fs = require('fs'); const readme = fs.readFileSync('./readme.md', 'utf8'); const data = readme .split('---') .map(block => ( { lines: block.split('\n').filter(Boolean) } )); const json = JSON.stringify(data); fs.writeFileSync('./public/jokes.json', json); ```

## Config ```js // package.json { "private": true, "scripts": { "build": "node build.js" } } ```

## HTML ```html <!-- public/index.html --> <html> <head> <meta charset="utf-8" /> <title>Dad Jokes</title> <link href="https://fonts.googleapis.com/css?family=Rammetto+One|Luckiest+Guy|Lemon|Sansita+One|Titan+One|Chango" rel="stylesheet" type="text/css"> <link href="./style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Dad Joke</h1> <div id="joke"><!-- joke goes here --></div> <script type="module" src="./script.js"></script> </body> </html> ```

## JS ```js // public/script.js async function fetchJokes() { const res = await fetch('./jokes.json'); return res.json(); } async function main() { const jokes = await fetchJokes(); const i = Math.floor(Math.random() * 100); const { lines } = jokes[i]; const el = document.querySelector('#joke'); el.innerHTML = lines.map(line => line.replace(/\*\*Q:\*\*/g, '').replace(/\*\*A:\*\*/g, '')).join('<p>'); document.querySelector('h1').innerText = 'Joke #' + i; } main() ```

## CSS ```css // public/style.css body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color: darkslategray; color: white; text-align: center; } h1 { font-family: monospace; margin: 10px auto 50px auto; } #joke { font-family: "Rammetto One"; font-size: 57px; line-height: 63px; letter-spacing: 1px; text-shadow: rgba(0, 0, 0, 0.1) 5px 5px; max-width: 1000px; margin: 0 auto; } ```

## Pull Requests  Instant and infinite environments

## Welcome to Neverland <video src="assets/pan-flying.mp4" controls></video>

## Thank You! Please let me know if you have any questions 😇 Tweet at me [@styfle](https://twitter.com/styfle)