simotae14/jamstack-intro

Introduction to the JAMstack

Introduction to the JAMstack

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

No dependencies, no frameworks, just Vanilla JS

• Create an index.html with a heading and a content area
• Use npx serve to load the site during development (instead of open the html file in the browser) from the directory containing the html
• Create a styles.css with basic styles
• Create a main.js that loads repos from GitHub
• Add a link and a script element to index.html

Section 2: Deploy a JAMstack Site

• Set up Netlify CLI yarn global add netlify-cli
• Login to Netlify with netlify login
• 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) or (hub pull-request)
• 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 in gatsby-node.js
  • Create components to show at different sub-routes (e.g. /dashboard/login)
  • Add a redirect for Netlify
• 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:8888
  • yarn 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
• Add the ability to create todos
  • Create a serverless function /functions/create-todo.js
  • Create a Form component
• 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
• Add the ability to delete todos
  • Create a serverless function /functions/delete-todo.js
  • Add a button to delete todos