• Stars
    star
    335
  • Rank 125,904 (Top 3 %)
  • Language
    JavaScript
  • Created over 5 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Netlify Serverless Functions Workshop

Netlify Functions Serverless Workshop

This repo will teach you the core concepts of using serverless functions with Netlify.

Table of Contents

Using this repo

After following the prerequisite setup steps, work from the lessons folders.

If you get stuck or want to look ahead checkout the lessons-code-complete directory for the completed code.

Repo directory structure:

|── /lessons                 ✅ Work from these files!
|── /lessons-code-complete   💡 Complete lesson answers
|── /_instructor             🙈 Ignore these files. For instructor updates
|── /_scripts                🙈 Ignore these files

Workshop Lessons

Core Concepts

Lesson Final Code
1 Hello World
Deploying Your First Endpoint
Complete Code
2 Dynamic Content
Rendering Dynamic Content
Complete Code
3 Using Environment Variables
Using environment variables
Complete Code
4 Using Dependancies
Using NPM dependencies
Complete Code
5 Authenication
Protecting Endpoints
Complete Code
6 Using A Database
Using a database
Complete Code
7 Using Middleware
Using Function middleware
Complete Code
8 Using Addons
Deploying Your First Endpoint
Complete Code
9 Using Cors
Adding CORS support
Complete Code
10 Testing Functions
Testing Serverless functions
Complete Code

Use Cases

Lesson Final Code
1 Rest Api
Using functions for REST APIs
Complete Code
2 Graphql
Using functions for GraphQL APIs
Complete Code
3 Redirects
Using functions for Dynamic Redirects
Complete Code
4 Setting Cookies
Using functions to set cookies
Complete Code
5 Fetching Data
Using functions to fetch external API data
Complete Code
6 Scraping
Using functions for web scraping
Complete Code
7 Sending Emails
Using functions for sending email
Complete Code
8 Sending Sms
Using functions for sending text messages
Complete Code
9 Event Driven Functions
Using Netlify Event Driven functions
Complete Code
10 Payment Processing
Using functions for Payment Processing
Complete Code
11 Handling Oauth
Handing OAuth Flows
Complete Code
12 Handling File Uploads
Using functions for uploading files
Complete Code
13 Returning Dynamic Images
Using functions for returning images
Complete Code

Helpful Tools

  • Postman - desktop app for quick & easy endpoint testing
  • NVM - Node version manager

Prerequisites & Setup Steps

  1. Install the latest LTS version of Node. How to install Node.

  2. Verify you have git on your machine

    Most machines come pre-loaded with git. 🎉

    To verify you have git, open up your terminal and run:

    which git

    This should return a path of where git is installed. If the command returns git not found, we will need to install git on your machine.

  3. Setup a Netlify account

    If you don't already have an Netlify account, let's get one setup.

    Click here to setup a free Netlify account

  4. Install Netlify CLI

    Open up your terminal and run:

    npm install netlify-cli -g
  5. Connect the Netlify CLI with your Netlify account

    Open up your terminal and run:

    netlify login
  6. Verify the Netlify CLI works on your machine

    Open up your terminal and run:

    netlify --help
    

    This should return the list of commands from the CLI tool.

Bonus setup:

  • Install postman for quick & easy testing of endpoints we deploy
  • It's also recommended that you use nvm (node version manager) just in case you need to change versions of node for the workshop.

Additional Learning materials

Netlify

Serverless

More Repositories

1

analytics

Lightweight analytics abstraction layer for tracking page views, custom events, & identifying visitors
JavaScript
2,024
star
2

isomorphic-react-example

Deprecated! ReactJS + NodeJS ( express ) demo tutorial with video. Universal/Isomorphic JS = Shared JavaScript that runs on both the client & server.
JavaScript
1,692
star
3

markdown-magic

💫  Automatically format markdown files using comment blocks. Update contents via custom transforms, external data sources & your source code.
JavaScript
785
star
4

advanced-markdown

Learn about advanced markdown techniques
JavaScript
283
star
5

serverless-workshop

⚡️ Open source serverless workshop. Ready to deploy serverless examples on AWS
JavaScript
185
star
6

responsible

Responsible.js - Give visitors the mobile experience THEY want
JavaScript
164
star
7

serverless-auth-strategies

How to handle authentication with serverless functions
JavaScript
137
star
8

types-with-jsdocs

Using JSDoc for Typescript Types
JavaScript
128
star
9

awesome-stoicism

💆‍♂️ Stoic philosophy resources
JavaScript
124
star
10

safe-await

Safely use async await without all the try/catch blocks
JavaScript
120
star
11

PostCSS-tutorial

Tutorial on adding PostCSS to `create-react-app` CLI
JavaScript
102
star
12

aws-profile-manager

GUI for managing AWS profile credentials.
JavaScript
58
star
13

atom-react-autocomplete

(Deprecated/Maintainer wanted) Atom Plugin for autocompleting react components & their props
JavaScript
55
star
14

next-with-react-router-v6

Next.js with React Router v6 demo
TypeScript
48
star
15

icon-pipeline

🚚 SVG icon pipeline - Optimize icons & build SVG sprites
JavaScript
45
star
16

pnpm-workspaces-example

PNPM workspaces example for monorepos
JavaScript
39
star
17

cache-me-outside

📁 Caching tool for quicker builds in CI systems
JavaScript
37
star
18

react-router-tutorial

Learn how to add routing to your React App
JavaScript
30
star
19

serverless-manifest-plugin

Output manifest of endpoints, resources, outputs, etc. of a serverless service
JavaScript
27
star
20

video-app

👨‍💻 Electron App for showing your webcam in a window thats always on top
JavaScript
26
star
21

react-server-components

Example of react server components running in AWS Lambda deployed via serverless framework
JavaScript
24
star
22

easy-markdown

WordPress Plugin to support Github Flavored Markdown + Syntax Highlighting
PHP
24
star
23

npm-statistics

NPM Download Statistics for David's Open Source Projects
JavaScript
21
star
24

configorama

⚙️ ${variable} support for config files
JavaScript
20
star
25

dom-guard

🔐 Lock DOM node contents to protect people against scammers using browser devtools
HTML
19
star
26

davidwells.io

🌐 David's personal website
JavaScript
17
star
27

middy-example

Serverless project using middy middleware for so fresh & so clean clean lambdas 🛀
JavaScript
14
star
28

markdown-magic-github-contributors

markdown-magic Plugin to list out the contributors of your repository.
JavaScript
13
star
29

react-project-base

Super old. Do not use. My base for starting React Projects
JavaScript
12
star
30

aws-profile-cli

💻 CLI & Utils for managing AWS accounts on your machine
JavaScript
12
star
31

intro-to-react

Introduction to React Core Concepts
JavaScript
12
star
32

netlify-site-as-aws-custom-resource-example

Define Netlify sites as part of an AWS Cloudformation stack.
JavaScript
11
star
33

function-zips

Using zip based functions in Netlify
HTML
11
star
34

use-analytics-with-react-router-demo

Use analytics react hooks with React Router v6
JavaScript
9
star
35

davidwells-legacy-site

👴 David's old personal site
JavaScript
9
star
36

react-example-project

JavaScript
8
star
37

env-stage-loader

Loads .env files in order based on process.env.NODE_ENV value with [stage].local support
JavaScript
8
star
38

oparser

A very forgiving key-value option parser
JavaScript
6
star
39

redux-toolkit-vite-example

TypeScript
6
star
40

netlify-sentry-plugin

WIP - Plugin to automatically run sentry releases
JavaScript
6
star
41

redux-tutorial

JavaScript
6
star
42

debug-plugin-activation-errors

Plugin for Debugging WordPress Plugin Activation Errors. Instead of seeing: "The plugin generated ### characters of unexpected output during activation. If you notice “headers already sent” messages, problems with syndication feeds or other issues, try deactivating or removing this plugin." you get the errors being thrown.
PHP
6
star
43

react-autocomplete-cli

CLI companion to the atom-react-autocomplete plugin
JavaScript
4
star
44

happiness-as-a-service

Happiness as a serverless service
JavaScript
4
star
45

scope

🔭 Scope - Create a birdeye's view of your Github project and embed on your site
JavaScript
4
star
46

js-code-search

Quick links to find how people use npm packages.
JavaScript
4
star
47

google-tag-manager-serverless

TODO serverlessify google tag manager serverside implementation
JavaScript
4
star
48

node-docker-workflow

Node Docker Continuous Integration with Express + Redis
Shell
3
star
49

Next-JS-Landing-Page-Starter-Template

next template with tailwind jit & webpack 5
TypeScript
3
star
50

next-with-react-router-v5

Using Next.js as SPA with react router v5
TypeScript
3
star
51

lerna-example

Lerna example for monorepos
JavaScript
3
star
52

repo-using-markdown-magic

Example of repo using markdown magic
JavaScript
3
star
53

analytics-e2e-testing

WIP analytics testing via Cypress
JavaScript
3
star
54

npm-workspaces-example

NPM workspaces example for monorepos
JavaScript
3
star
55

calm

Check if person is calm or not with javascript
JavaScript
3
star
56

explorer-demo-with-video

2
star
57

whats-in-the-cache

Recursively lookup files in a (cache) directory & print a manifest
JavaScript
2
star
58

explorer-demo-weds-two

2
star
59

gitignore-utils

JavaScript
2
star
60

themeable-components-themes

CSS
2
star
61

test-repo-tues-two

HTML
2
star
62

js-library-starter-kit

JavaScript library starter kit for open source projects
JavaScript
2
star
63

parse-npm-script

Parse package.json "script" commands to see how they resolve
JavaScript
2
star
64

explorer-demo-tues-four

2
star
65

simple-supplier-distributor-tues

2
star
66

jsdoc-parser

Updated fork of dox
JavaScript
2
star
67

store-it

Store data in browser. Fallbacks for everythang
JavaScript
2
star
68

mono-repo-example

HTML
2
star
69

WordPress-UI

A CSS Framework and a Set of React Components that Implement WordPress UI
JavaScript
2
star
70

git-er-done

Notice! Moved! See link below...... Utility for dealing with modified, created, deleted files since a git commit.
JavaScript
2
star
71

my-new-uni

Vendia Universal Application
HTML
1
star
72

next-netlify-blog-starter

JavaScript
1
star
73

ryan-wells-foundation

WordPress Site for Ryan Wells Foundation
PHP
1
star
74

react-workshop

1
star
75

safe-chalk

🎨 Terminal colors. Wrapper for chalk package with easy enable/disable option.
JavaScript
1
star
76

react-angular-webpack

React + Angular using ES6 + webpack
JavaScript
1
star
77

vis-tree-demo

JavaScript
1
star
78

electron-dev-setup

Starter project for electron apps
JavaScript
1
star
79

demo-netlify-gated-sites-login-site

JavaScript
1
star
80

customerio-example

JavaScript
1
star
81

redact-logs

Redact sensitive env vars from logs & CLI output.
JavaScript
1
star
82

buslify

Show me da bus
JavaScript
1
star
83

awesomesauce

JavaScript
1
star
84

react-dom-primitives

React Base Dom Primatives
JavaScript
1
star
85

addon-api-example

Example Netlify Add-on API using Netlify functions
JavaScript
1
star
86

netlify-build-mono-repo-base-dir

Mono repo base dir issue https://github.com/homertherefore/netlify-monorepo-project
JavaScript
1
star
87

amplify-vs-cognito-sdk-bundle-size-test

Amplify vs Cognito SDK bundle size test
HTML
1
star
88

minimal-code-sandbox

JavaScript
1
star
89

begin-basic-crud-app

Begin app
HTML
1
star
90

vgs-vanilla-demo

HTML
1
star
91

themeable-components

Themable (at build) react components using CSS
JavaScript
1
star
92

react-router-fibonacci

Fibonacci Sequence with React Router
JavaScript
1
star
93

tiny-cognito

Get AWS Cognito creds to use with aws4fetch
JavaScript
1
star
94

install-github-dep

Git submodules without using submodules
JavaScript
1
star
95

test-repo-cxz

HTML
1
star
96

components

React Components
JavaScript
1
star
97

get-object-diff

JavaScript
1
star
98

react-meetup-demo

Real world react meetup demo!!!!!!!!
JavaScript
1
star
99

react-i18next-advanced

react-i18next with local storage fallback
JavaScript
1
star
100

old-analytics-example

[Old] Example site using `analytics` package
JavaScript
1
star