The World's Greatest Netlify Demo 2019

swyx

0 reactions 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

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

Get updates on new posts and projects

3000+ subscribers including my Mom – see past issues

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