The World's Greatest Netlify Demo 2019

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

Part 2: ⚒️ Netlify Build

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
  • 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
    • Paid features
      • Branded OAuth
      • SSO
      • Audit log
      • Custom sender

Part 6: ✍️ NetlifyCMS

Part 7: ➕ Netlify Addons: Everything Else!

Part 8: 🍻 Netlify API

Part 9: ❓ Learn More

Tagged in: #tech #netlify

Leave a reaction if you liked this post! 🧡
Loading comments...
Webmentions
Loading...

Subscribe to the newsletter

Join >10,000 subscribers getting occasional updates on new posts and projects!

I also write an AI newsletter and a DevRel/DevTools newsletter.

Latest Posts

Search and see all content