The World's Greatest Netlify Demo 2019

swyx 2019-09-24

Note: this was published as the Complete Intro to Netlify on the Netlify Blog and the FreeCodeCamp Channel

Hi everyone! I’m swyx and I’m happy to be sharing this walkthrough with you!

I learned Web Dev through FreeCodeCamp 3 years ago and back then I struggled a lot with getting my projects online, at first through Cloud9 and then Heroku. I only found Netlify a year later and realized that deploying and scaling is a lot easier with the JAMstack approach, especially with modern front-end frameworks like React and Vue. So this is the video series I wish I had when I started out!

How to Build Everything with Netlify in 4 hours

Part 1: 🗺️ Netlify Edge

4 methods
- Netlify Drop
- Netlify CLI separate video
- Continuous Deploy to Netlify
  - Deploy Hooks
  - Private repos https://url.netlify.com/rJ-WZsqwS
- Deploy to Netlify Button
  - https://url.netlify.com/SkmMWo5wH
  - more ways (Siri, Wand, Watch, CodeSandbox) https://url.netlify.com/rkRMZjcPB
Functions
- add a sample JS and Go function
- setting Functions folder in app
- setting Functions folder in netlify.toml
- Event Triggered Functions
  - deploy-building, deploy-succeeded, deploy-failed, deploy-locked, deploy-unlocked
  - Env variables
    - INCOMING_HOOK_TITLE, INCOMING_HOOK_URL, INCOMING_HOOK_BODY https://url.netlify.com/ryqXbo5Pr
- AWS Lambda versions: AWS_LAMBDA_JS_RUNTIME nodejs10.x
Defaults
- HTTPS
- Deploy Previews
  - Branch deploys
  - Split testing
    - split-test-activated, split-test-deactivated, split-test-modified
- Distributed Deploys, Atomic Deploys, Instant Rollbacks
Post Processing
- Forms separate video
- Mixed Content
- Prerendering https://url.netlify.com/S1Hj-i9wr
- Asset Optimization
  - Netlify Large Media
  - https://url.netlify.com/HyRnZsqDH
- Snippet Injection
  - for GA, eg its more involved if you do it in Nuxt
Netlify and Custom Domains
- Custom Netlify Domain
- Redirects
  - _redirects file
  - netlify.toml version
  - Redirects Playground https://url.netlify.com/Syk0-s5wB
- Headers
  - _headers file
  - netlify.toml version
  - Headers Playground https://url.netlify.com/SJlkMiqDr
  - Cache control https://url.netlify.com/By2kfoqwr
  - Auth headers https://url.netlify.com/HkLlfjcwr
- Custom Domains
- Netlify DNS
  - DNS Docs https://url.netlify.com/Bk5-GsqwB
  - Community Common Issue: Should you use Netlify DNS? https://url.netlify.com/Sy_MficDr
  - Migrating to Netlify DNS with minimal downtime https://url.netlify.com/HykBGocvB
- Emails https://url.netlify.com/SkWIMi5PH
CDN Tips
- Faster deploys https://url.netlify.com/BJiLMscDB
- Enterprise https://url.netlify.com/B1zvGsqDS

Part 2: ⚒️ Netlify Build

Netlify ❤️ Build Tools and SSGs
- StaticGen.com https://url.netlify.com/ryQFMscwr
- https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/
Understand The Build Process
- You can always local build!!! You May Not Need CD™
- Build Settings and where to set them
  - Build Settings Docs https://url.netlify.com/Syr5ficPH
  - in app
  - netlify.toml (override)
- the Build Bot
  - How it Works https://url.netlify.com/BJMifs9wS
  - https://github.com/netlify/build-image/blob/master/run-build.sh
- Build stages and Reading Logs
  - Netlify App Logs https://url.netlify.com/SJEpGi9wH
  - Netlify Site Logs https://url.netlify.com/BykRMi9Pr
  - Fetch from cache
    - NETLIFY_CACHE_DIR = “/opt/build/cache”
    - https://github.com/DavidWells/cache-me-outside
  - Install
  - Build
  - Package & optimize
  - Save cache
  - (post processing)
  - Deploy
  - Output manifest
- Concurrent Builds and Canceling Builds
- Gotchas
  - Common Build Gotchas https://url.netlify.com/H1hAMocDH
  - 15 min rule
  - Permissions and API Secrets
  - Think about what folder you are deploying
  - Community Build tips https://url.netlify.com/BJjJ7jqDH
- Troubleshooting
  - Read your build logs
  - Make sure you can build locally
  - Hidden Dependencies
    - Environment version
    - Yarn vs npm
    - Preinstalled Grunt/Hugo/Bower etc
  - Netlify Community https://url.netlify.com/BysgQs5wS
Environment Variables

Part 3: 👩🏼‍💻 Netlify Dev

Netlify Dev
- Docs https://url.netlify.com/B1k5Xjcvr
- netlify dev (netlify.toml)
  - command
  - port
- netlify dev (detector)
  - env vars
  - redirects
- netlify dev —live (beta)
- netlify functions:create
- netlify functions:invoke
netlify-lambda
- netlify-lambda install
- netlify-lambda build

Part 4: 🗒️ Netlify Forms

Introducing Forms in plain HTML
File Uploads
Customize Post-Submit page
Slack/Email/Webhook Notifications
Zapier
submission-created
Spam Filtering
- Akismet
- Honeypot
- Recaptcha
Forms in Single Page Apps
Forms in Gatsby
AJAX form submissions

Part 5: 🆔 Netlify Identity

Before Identity: Password Protection and Role Based Access Control
- Netlify Password Protection https://url.netlify.com/Sk1fQoqvB
- Netlify RBAC https://url.netlify.com/HkoMXjqvH
Identity
- Enable Netlify Identity
- Identity on a boilerplate
- Adding netlify-identity-widget
- Important settings
  - open signup vs invite only
  - confirm vs don’t confirm
  - External providers
  - Email templates
- Metadata
  - User metadata
  - App metadata
- gotrue-js and friends
  - gotrue
  - react-netlify-identity
  - react-netlify-identity-widget
  - gatsby-plugin-react-netlify-identity
- Authenticated Functions: Identity + Functions
  - netlify functions:invoke
- Event Triggered Functions
  - identity-validate: before sign up
  - identity-signup: on sign up
    - Note: this fires for only email+password signups, not for signups via external providers e.g. Google/GitHub
  - identity-login: on log in
- Retrieving Netlify Form Info in Function
  - https://jamstack-comments.netlify.com
  - https://open-api.netlify.com/
- Paid features
  - Branded OAuth
  - SSO
  - Audit log
  - Custom sender