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:

(00:03:42) Part 1: 🗺️ Netlify Edge – Netlify's CDN layer for Hosting, Redirects, and more!
(00:37:15) Part 2: ⚒️ Netlify Build – Automated builds of your projects and static site generators
(01:02:02) Part 3: 👩🏼‍💻 Netlify Dev – local emulation of Netlify Functions, Redirects, and live sharing
(01:24:17) Part 4: 🗒️ Netlify Forms – form submissions without a running server!
(01:55:21) Part 5: 🆔 Netlify Identity – JWT based authentication with external provider support for GitHub, Google, and more!
(02:34:07) Part 6: ✍️ NetlifyCMS – the leading open source Git-based (aka no running server) CMS!
(02:59:53) Part 7: ➕ Netlify Addons – Add unblockable Analytics, Add a Serverless Database with Fauna DB, or attain PCI/SOC2 compliance with Very Good Security, and more!
(03:18:18) Part 8: 🍻 Netlify API – Write your own Netlify client!
(03:25:39) Part 9: ❓ Learn More – Join the JAMstack community and learn more from conferences and books!

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.

Enjoy!

Detailed Notes and References:

Part 1: 🗺️ Netlify Edge (00:03:42)

4 methods
- Netlify Drop
- Netlify CLI
- Continuous Deploy to Netlify
  - Deploy Hooks
  - Private repos
- Deploy to Netlify Button
- more ways (Siri, Wand, Watch, CodeSandbox)
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
- 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
- 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
- Headers
  - _headers file
  - netlify.toml version
  - Headers Playground
  - Cache control
  - Auth headers
- Custom Domains
- Netlify DNS
- Emails
CDN Tips
- Faster deploys
- Enterprise

Part 2: ⚒️ Netlify Build (00:37:15)

Netlify ❤️ Build Tools and SSGs
- StaticGen.com
- 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
  - in app
  - netlify.toml (override)
- the Build Bot
  - How it Works
  - https://github.com/netlify/build-image/blob/master/run-build.sh
- Build stages and Reading Logs
  - Netlify App Logs
  - Netlify Site Logs
  - 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
  - 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
Environment Variables

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
- Netlify Password Protection
- Netlify RBAC
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