Guides & Tutorials

Complete Intro to Netlify in 3.5 hours

Guides & Tutorials

Complete Intro to Netlify in 3.5 hours

Given the wide range of Netlify products and features, statistically speaking, you're probably unaware of something Netlify does that might dramatically improve the way you deploy modern web apps!

For example, most users who use Netlify's Continuous Deployment might want to take better advantage of Custom Domains and Managed DNS.

Or you might use Netlify Forms for contact pages and file uploads via vanilla HTML form submission, and be unaware that you can send and retrieve form submissions via JavaScript.

Or you might want to get started with serverless functions and have no idea where to start.

The Netlify team has done excellent docs and blogposts and talks and talks and talks but everyone's learning style is different!

Netlify ❀️ FreeCodeCamp

We are big fans of FreeCodeCamp and recently collaborated with them to record an extended tutorial to walk you through everything you can possibly want to know about Netlify and how its various products and features can link together to create a full JAMstack app!

(link to video)

Specifically, the contents cover:

Each of these sections come with extensive links for further followup – if you wish to read more, detailed notes and references per each section below! You are welcome to use this sequence to teach a full Netlify/JAMstack workshop if you wish.


Detailed Notes and References:

Part 1: πŸ—ΊοΈ Netlify Edge (00:03:42)

Part 2: βš’οΈ Netlify Build (00:37:15)

Part 3: πŸ‘©πŸΌβ€πŸ’» Netlify Dev (01:02:02)

  • Netlify Dev
    • Docs
    • 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 (01:24:17)

  • 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 (01:55:21)

  • 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 (02:34:07)

Part 7: βž• Netlify Addons (02:59:53)

Part 8: 🍻 Netlify API (03:18:18)

Part 9: ❓ Learn More (03:25:39)

Keep reading

Recent posts

Book cover with the title Deliver web project 10 times faster with Jamstack enterprise

Deliver web projects 10Γ— faster

Get the whitepaper