└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Introduction to the JAMstack 2 | 3 | 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. 4 | 5 | ## Sections 6 | 7 | ### Section 1: Create a Basic JAMstack Site 8 | 9 | - Create an `index.html` with a heading and a content area 10 | - Use `npx serve` to load the site during development 11 | - Create a `styles.css` with basic styles 12 | - Create a `main.js` that loads repos from GitHub 13 | - Add a `link` and a `script` element to `index.html` 14 | 15 | ### Section 2: Deploy a JAMstack Site 16 | 17 | - Set up Netlify CLI `yarn global add netlify-cli` 18 | - Create a GitHub repository (use Hub) https://hub.github.com `git create ` 19 | - Create a Netlify site connected to the GitHub repo `netlify init` 20 | - Push the code `git add -A`, `git commit -m 'message'`, `git push --set-upstream origin master` 21 | - See the deploy `netlify open` 22 | - Push a change as a PR 23 | - Check out a new branch (`git checkout -b feature-idea`) 24 | - Make a change (add a `body` background color) 25 | - Add and commit the change (`git commit -am 'feat: update background color'`) 26 | - Push the changes (`git push origin feature-idea`) 27 | - Open a pull request with Hub (`git pull-request`) 28 | - See the deploy as a preview 29 | - Show the live site vs. the deploy preview 30 | - Merge the pull request 31 | - See the deploy go live 32 | 33 | ### Section 3: Serverless Functions 34 | 35 | Before serverless functions, getting 36 | 37 | - What are serverless functions? 38 | - Talk about other providers 39 | - Use Netlify because it requires almost no setup/config 40 | - Create a "hello world" function 41 | - Use Netlify Dev to run it locally, Netlify Dev runs on port 8888 42 | - Learn about redirects to change the URL 43 | - Deploy and see it working live 44 | 45 | ### Section 4: Process a Form Submission 46 | 47 | - Create an accessible form using React/CSS Modules 48 | - Use a reducer hook to manage form state 49 | - Handle idle, sending, and sent states 50 | - Create a serverless function 51 | - Get credentials from Mailgun (sandbox) 52 | - Use the serverless function to send email from the form 53 | 54 | ### Section 5: Create a Password-Protected Dashboard 55 | 56 | - Add a home page and a dashboard page 57 | - Set up client-only routes in Gatsby 58 | - Use `matchPath` in `gatsby-node.js` 59 | - Create components to show at different sub-routes (e.g. `/dashboard/login`) 60 | - Add a redirect for Netlify 61 | - Deploy the site to Netlify 62 | - Required so we can activate Identity 63 | - Add authentication w/Netlify Dev, `netlify dev` runs on port 8888, so access the site through localhost:**8888** 64 | - `yarn add react-netlify-identity-widget react-netlify-identity @reach/dialog @reach/tabs @reach/visually-hidden` 65 | - Create a `Layout` component that wraps everything with the provider 66 | - Add the Identity modal to the dashboard page 67 | - Add a `Profile` component to show whether or not we’re logged in 68 | - Add navigation for the dashboard 69 | - Create a `PrivateRoute` component to bounce to the login screen if not logged in 70 | - Update `Dashboard` to use private routes 71 | - Deploy 72 | - Sign up for an account 73 | - Bounce to login screen when accessing protected routes while logged out 74 | 75 | ### Section 6: Create a DB-Backed Todo App 76 | 77 | - Create a Fauna account (https://fauna.com) 78 | - Write a GraphQL schema (`functions/utils/todos.gql`) 79 | - Create a new Fauna DB (https://dashboard.fauna.com/db-new/) 80 | - Upload the GraphQL schema to Fauna 81 | - Explore the GraphQL Playground in Fauna 82 | - Create an API server key in the “security” tab 83 | - Add the server key to `.env` 84 | - Create a helper for serverless functions (`functions/utils/send-query.js`) 85 | - `netlify dev` runs on port 8888, so access the site through localhost:**8888** (not 8000) 86 | - Load all todos 87 | - Create a serverless function `/functions/get-all-todos.js` 88 | - Write a hook to load todos 89 | - Create a `Todo` component to display todo items 90 | - Add the ability to create todos 91 | - Create a serverless function `/functions/create-todo.js` 92 | - Create a `Form` component 93 | - Add the ability to toggle todo completed state 94 | - Create a serverless function `/functions/toggle-completed.js` 95 | - Add a checkbox input to show completed state and handle toggling 96 | - Add the ability to delete todos 97 | - Create a serverless function `/functions/delete-todo.js` 98 | - Add a button to delete todos 99 | 100 | ## Thanks 101 | 102 | Huge thanks to [David Khourshid](https://twitter.com/DavidKPiano) and [Ryan Florence](https://twitter.com/ryanflorence) for reviewing code and providing [better patterns for using React Hooks](https://twitter.com/jlengstorf/status/1185705298868129793). Thanks to [Sarah Drasner](https://twitter.com/sarah_edo) for sharing notes and examples from [her JAMstack workshop](https://github.com/sdras/JAMstack-Workshop). 103 | --------------------------------------------------------------------------------