jlengstorfjlengstorf
81

Jamstack Intro

screenshot of Jamstack Intro

GithubDemo

Overview:

The article is a workshop tutorial on the JAMstack, explaining what it is, its capabilities, and how to use it to build full-featured apps with less complexity and overhead. The tutorial is divided into several sections, each covering a specific aspect of building a JAMstack site and deploying it. The sections include creating a basic JAMstack site, deploying the site using Netlify, using serverless functions, processing form submissions, creating a password-protected dashboard, and creating a database-backed todo app using Fauna.

Features:

  • Create a Basic JAMstack Site
  • Deploy a JAMstack Site
  • Serverless Functions
  • Process a Form Submission
  • Create a Password-Protected Dashboard
  • Create a DB-Backed Todo App

Section 1: Create a Basic JAMstack Site

  1. Create an index.html file with a heading and a content area.
  2. Use npx serve to load the site during development.
  3. Create a styles.css file with basic styles.
  4. Create a main.js file that loads repositories from GitHub.
  5. Add a link and a script element to index.html.

Section 2: Deploy a JAMstack Site

  1. Set up Netlify CLI with the command yarn global add netlify-cli.
  2. Create a GitHub repository using Hub.
  3. Create a Netlify site connected to the GitHub repository with the command netlify init.
  4. Push the code to the GitHub repository with the following commands: git add -A, git commit -m 'message', git push --set-upstream origin master.
  5. See the deploy with the command netlify open.
  6. Push a change as a Pull Request (PR) with Hub.
  7. Check out a new branch with the command git checkout -b feature-idea.
  8. Make a change (e.g., add a body background color).
  9. Add and commit the change with the command git commit -am 'feat: update background color'.
  10. Push the changes to the feature branch with the command git push origin feature-idea.
  11. Open a pull request with Hub using the command git pull-request.
  12. See the deploy as a preview.
  13. Compare the live site vs. the deploy preview.
  14. Merge the pull request to make the deploy go live.

Section 3: Serverless Functions

  1. Learn about serverless functions and other providers.
  2. Use Netlify for serverless functions as it requires minimal setup and configuration.
  3. Create a "hello world" function.
  4. Use Netlify Dev to run the function locally on port 8888.
  5. Learn about redirects to change the URL.
  6. Deploy the function and see it working live.

Section 4: Process a Form Submission

  1. Create an accessible form using React/CSS Modules.
  2. Use a reducer hook to manage form state.
  3. Handle idle, sending, and sent states for the form.
  4. Create a serverless function.
  5. Get credentials from Mailgun (sandbox).
  6. Use the serverless function to send email from the form.

Section 5: Create a Password-Protected Dashboard

  1. Add a home page and a dashboard page.
  2. Set up client-only routes in Gatsby.
  3. Use matchPath in gatsby-node.js.
  4. Create components to show at different sub-routes (e.g., /dashboard/login).
  5. Add a redirect for Netlify.
  6. Deploy the site to Netlify.
  7. Add authentication with Netlify Dev (runs on port 8888).
  8. Create necessary components and dependencies using yarn.
  9. Create a Layout component that wraps everything with the provider.
  10. Add the Identity modal to the dashboard page.
  11. Add a Profile component to show whether or not the user is logged in.
  12. Add navigation for the dashboard.
  13. Create a PrivateRoute component to redirect to the login screen if not logged in.
  14. Update the Dashboard component to use private routes.
  15. Deploy the updated site.
  16. Sign up for an account.
  17. Bounce to the login screen when accessing protected routes while logged out.

Section 6: Create a DB-Backed Todo App

  1. Create a Fauna account.
  2. Write a GraphQL schema for todos.
  3. Create a new Fauna DB.
  4. Set up collections and indexes in Fauna.
  5. Create functions to interact with the database.
  6. Implement CRUD operations for todos.
  7. Use the functions in the React app to display and manage todos.

Summary:

The article is a comprehensive tutorial on building a JAMstack site and deploying it using Netlify. It covers various topics such as creating a basic site, using serverless functions, processing form submissions, creating a password-protected dashboard, and creating a database-backed todo app. The tutorial provides step-by-step instructions and code snippets for each section, making it easy to follow along and implement the concepts. Overall, it is a great resource for anyone looking to learn and use the JAMstack for building web applications.