Introduction to the JAMstack
This is the code for a Frontend Masters workshop. In this workshop, we’ll learn what the JAMstack is, what it’s capable of, and how we can use it to build full-featured apps with less complexity and overhead.
Sections
Section 1: Create a Basic JAMstack Site
- Create an
index.html
with a heading and a content area - Use
npx serve
to load the site during development - Create a
styles.css
with basic styles - Create a
main.js
that loads repos from GitHub - Add a
link
and ascript
element toindex.html
Section 2: Deploy a JAMstack Site
- Set up Netlify CLI
yarn global add netlify-cli
- Create a GitHub repository (use Hub) https://hub.github.com
git create <repo-name>
- Create a Netlify site connected to the GitHub repo
netlify init
- Push the code
git add -A
,git commit -m 'message'
,git push --set-upstream origin master
- See the deploy
netlify open
- Push a change as a PR
- Check out a new branch (
git checkout -b feature-idea
) - Make a change (add a
body
background color) - Add and commit the change (
git commit -am 'feat: update background color'
) - Push the changes (
git push origin feature-idea
) - Open a pull request with Hub (
git pull-request
)
- Check out a new branch (
- See the deploy as a preview
- Show the live site vs. the deploy preview
- Merge the pull request
- See the deploy go live
Section 3: Serverless Functions
Before serverless functions, getting
- What are serverless functions?
- Talk about other providers
- Use Netlify because it requires almost no setup/config
- Create a "hello world" function
- Use Netlify Dev to run it locally, Netlify Dev runs on port 8888
- Learn about redirects to change the URL
- Deploy and see it working live
Section 4: Process a Form Submission
- Create an accessible form using React/CSS Modules
- Use a reducer hook to manage form state
- Handle idle, sending, and sent states
- Create a serverless function
- Get credentials from Mailgun (sandbox)
- Use the serverless function to send email from the form
Section 5: Create a Password-Protected Dashboard
- Add a home page and a dashboard page
- Set up client-only routes in Gatsby
- Use
matchPath
ingatsby-node.js
- Create components to show at different sub-routes (e.g.
/dashboard/login
) - Add a redirect for Netlify
- Use
- Deploy the site to Netlify
- Required so we can activate Identity
- Add authentication w/Netlify Dev,
netlify dev
runs on port 8888, so access the site through localhost:8888yarn add react-netlify-identity-widget react-netlify-identity @reach/dialog @reach/tabs @reach/visually-hidden
- Create a
Layout
component that wraps everything with the provider - Add the Identity modal to the dashboard page
- Add a
Profile
component to show whether or not we’re logged in - Add navigation for the dashboard
- Create a
PrivateRoute
component to bounce to the login screen if not logged in - Update
Dashboard
to use private routes
- Deploy
- Sign up for an account
- Bounce to login screen when accessing protected routes while logged out
Section 6: Create a DB-Backed Todo App
- Create a Fauna account (https://fauna.com)
- Write a GraphQL schema (
functions/utils/todos.gql
) - Create a new Fauna DB (https://dashboard.fauna.com/db-new/)
- Upload the GraphQL schema to Fauna
- Explore the GraphQL Playground in Fauna
- Create an API server key in the “security” tab
- Add the server key to
.env
- Create a helper for serverless functions (
functions/utils/send-query.js
) netlify dev
runs on port 8888, so access the site through localhost:8888 (not 8000)- Load all todos
- Create a serverless function
/functions/get-all-todos.js
- Write a hook to load todos
- Create a
Todo
component to display todo items
- Create a serverless function
- Add the ability to create todos
- Create a serverless function
/functions/create-todo.js
- Create a
Form
component
- Create a serverless function
- Add the ability to toggle todo completed state
- Create a serverless function
/functions/toggle-completed.js
- Add a checkbox input to show completed state and handle toggling
- Create a serverless function
- Add the ability to delete todos
- Create a serverless function
/functions/delete-todo.js
- Add a button to delete todos
- Create a serverless function
Thanks
Huge thanks to David Khourshid and Ryan Florence for reviewing code and providing better patterns for using React Hooks. Thanks to Sarah Drasner for sharing notes and examples from her JAMstack workshop.