Serverless Functions with Netlify

Clone the project, remove the git folder, and initialize a new git repo, then install dependencies with npm install, preparing for the next video on the star project setup.

Explore the star project's structure for serverless functions with Netlify, including assets, examples, and node modules, and learn to run a local production-like environment with Netlify Dev.

Set up Naglfar to locate your functions and create a root functions folder. Define a basic Netlify function with exports.handler that returns a 200 response.

Describe CommonJS exports and imports, exporting a handler named Naglfar, and compare async versus callback usage. Learn to return a string body with a 200 status and JSON handling.

Explore how HTTP requests and status codes enable client-server communication, from 200 success responses to 400, 404, and 500 errors, and use 201 for created resources.

Create your first serverless function and fetch its response on the frontend using vanilla JavaScript and Axios to display data and handle errors.

Learn how redirects in Netlify serverless functions shorten API paths with a star wildcard, control navigation with 301 or 200 statuses, and manage auto imports to keep code clean.

Explore building a basic API with a serverless function that serves products with images, price, and name from local data, and fetch and display them on the front end.

Create a basic Netlify API function that imports an items array from assets and returns it as a JSON string, enabling a clean front-end data flow.

Learn how to consume a basic API from a Netlify serverless function by fetching data, handling loading, success, and errors, and rendering a product list front-end.

Deploy early to demonstrate continuous deployment, set up the API you can consume in your own project, and tackle a course bug while preparing network and good accounts.

learn how to create a temporary GitHub repo, push changes, and enable continuous deployment for serverless functions on Netlify, including environmental variables and deployment monitoring.

Fix CORS errors by adding access-control-allow-origin headers to Netlify functions, enabling data access from external apps and different servers after deployment.

Explore the generous free request tier that covers most use cases, and know when to upgrade. For high traffic, consider hosting an express server on Digital Ocean to manage costs.

Learn how to use Airtable with serverless functions to manage products via a graphical interface, fetch data securely, and hide API keys with environment variables.

Explore how to sign up for Airtable, create a workspace and bases, and structure tables from scratch, with tips on naming and collaboration, and avoiding empty rows during data fetching.

Create an Airtable base and a table named product, then add name, description, image, and price fields, attach assets, and configure currency data types for a simple e-commerce catalog.

Learn to consume Airtable data through the API using the ER table npm package, with secure API key handling and environment variables, and fetch or update records.

Fetch Airtable data with a Netlify serverless function using the table node API, configure environment variables, and map records to product objects with id, name, image, and price.

Hide sensitive values with environment variables in a dotenv file and keep the api key from the front end.

Display Airtable products on a front-end, then navigate to a product detail page using an id in the query string and fetch data with Axios in a serverless Netlify setup.

Create a Netlify serverless function to fetch a single product from Airtable using event.queryStringParameters.id, returning the product or a 400/404 error when missing or not found.

Learn to fetch and render a dynamic single product using a frontend call to a serverless product API, handle loading and errors, and display name, price, image, and description.

Combine multiple Airtable functions into a single Netlify serverless function, test product endpoints locally, handle ID-based queries and errors, and streamline deployment with environment variables.

Add environmental variables in Netlify, push updates, and automatically rebuild the site while configuring headers and the basic API for cross-app access to the serverless function.

Vote on a three-option question and persist results in a table as votes change. Implement a like button and a page counter to track engagement with serverless functions.

Create a survey table with room names and integer vote counts, populate bathroom, kitchen, and bedroom, initialize votes to zero, and then set up the corresponding serverless function.

Create a Netlify function to fetch votes from a table, map records to id, room, and vote, and return a structured array via an API endpoint.

Learn to fetch survey data, render a dynamic list of rooms with vote counts, and set up data attributes for updating votes using axios and vanilla JavaScript.

Increase votes on the front end by wiring dynamic buttons and event listeners, updating the vote display and data attributes, and preparing for serverless function integration.

Learn how http methods drive serverless interactions, including get, post, put, and delete. Read data, create resources, update, and delete as your operations—and log the http method from the event.

Use a put request to modify survey data on a serverless function via axios, sending id and vote, while handling responses with try-catch and showing a loading state.

Learn how a Netlify survey function handles http methods by processing get and put requests. Parse event http method and body to modify resources and return 4xx for disallowed methods.

Learn to implement a Netlify serverless function updating vote counts via a put request, validating id and votes, parsing the body, and persisting survey vote updates to a table node.

Build a weather app to show how to hide API keys with serverless functions, handle post requests with Axios, and work with the OpenWeatherMap API.

Set up serverless functions and a weather front-end to fetch weather data using a post request to the weather function, handling city input, alerts, and errors.

Identify and enforce the post method in a serverless weather API, parse city from the request body, log and return the city, and respond with a 400 for non-post methods.

Set up and test current weather data requests from the open weather API by configuring city query, units, and an API key, then deploy a Netlify serverless function.

Build a weather app with a Netlify serverless function, calling the OpenWeatherMap API via axios. Handle errors and return city, country, temperature, feels like, and description to the frontend.

Explore building a newsletter feature with Netlify serverless functions, showing a complete example, including submitting a dummy email, handling errors with generic messages, and confirming success in the service dashboard.

Learn how to set up a newsletter using a free Button Down account, configure newsletter settings, and wire a serverless function with environment variables to trigger API calls.

Learn to implement a front-end newsletter form that communicates with a Netlify serverless function, including form setup, loading state handling, and success or error feedback.

Set up authentication for the Buttondown newsletter API by configuring the authorization header and token, then create a new subscriber via a post request with the user's email.

Set up a Netlify newsletter function to accept only post requests, extract the email from the body, and post it via Axios with auth headers, returning 201 on success.

Learn to handle empty email submissions in a newsletter form by validating serverless functions with Netlify, triggering a 400 error and returning a clear message like 'please provide email value'.

Test the newsletter signup flow end-to-end, validate error messages for invalid emails, confirm successful subscription delivers an inbox email and updates the subscriber list.

Identify and debug newsletter signup errors by inspecting error responses, accessing data.email as an array, and implementing logic to test properties one by one, with a generic user-friendly message.

Learn to send emails using a Netlify serverless function, test live email delivery, and verify results in the dashboard by sending a test message to Peter at Gmail.

Build a front-end email form that calls a Netlify serverless function, with name, email, subject, and message, plus a loading spinner and success or error alerts.

Learn to set up a Netlify serverless function for email, validate post requests, and require name, email, subject, and message, returning 400 when values are missing.

Learn to implement email sending with Netlify serverless functions using nodemailer and Ethereal for testing, configure environment variables, and test end-to-end from the front end.

Learn to implement secure Stripe payments with a service function to obtain the client secret and process payments, then set up a Stripe account and storefront to test.

Learn to set up Stripe payments with a Netlify serverless function, connecting a front-end form to a back-end, using public and secret keys to obtain a client secret.

Learn how to implement a Stripe payment flow in a Netlify serverless function, including setting up Stripe, handling post requests, calculating total amount, and returning a client secret.

Set up serverless functions with a React app on Netlify, building a basic integration to fetch data from your project. Learn deployment gotchas and data access via serverless endpoints.

Set up a react app with create react app, install dependencies, and configure Netlify serverless functions, including creating the functions folder, adjusting package scripts, and running local servers.

Build a basic serverless function example on Netlify by fetching remote API data with axios in a React app, render products, and manage headers and 125k free requests.

Set up a Netlify serverless function, organize the project with a functions folder, and fetch product data using environment variables, the API key, and a products table to test locally.

Learn to display Airtable product data with Netlify serverless functions in a React app, fetching via Axios from a third-party API or your own endpoint and rendering products.

Set up react router with two routes: home page and a single product page using a product id parameter; navigate via links that pass the id to load that product.

fetch a single product by id with axios, render name, price, description, and image, and manage loading with state while providing a back home link.

Deploy a react app with Netlify serverless functions by configuring the build command, publishing the build directory, and adding redirect rules for API and React Router to ensure seamless deployment.