Your first JAMStack app
While you can build your own JAMStack, that's not the focus of this workshop. We're going to lean on teams of smart people doing the fiddly work for us.
That's how you can focus on your code, not the machinery everyone needs.
In the next two exercises, you're going to try Gatsby and NextJS. The most popular frameworks in this space. Others exist, but I'd classify them as experimental.
Don't overthink these exercises, they're a hello world 😊
Gatsby
Gatsby is the first framework to popularize the approach of building static-first websites and webapps with React.
It's a fantastic framework for building websites with dynamic features. A little clunky for webapps.
Exercise
Create a new Gatsby project using the default starter.
$ gatsby new my-gatsby-project https://github.com/gatsbyjs/gatsby-starter-default
Gatsby Starters are like pre-configured templates you can use to bootstrap development.
Run your site locally with npm start or yarn start.
Deploy with the vercel command. That's easiest.
To deploy with Netlify start by building your site with yarn build or npm run build. Then initialize a Netlify site with netlify init, and use netlify deploy to publish. Set the deploy directory to public/.
Try replacing gatsby-astronaut.png in src/components/image.js with a very large photo. You'll see a cool feature that made Gatsby popular.
Solution
NextJS
NextJS is Gatsby's younger cousin. These days it can do almost everything Gatsby can, but follows a different design philosophy.
Where everything in Gatsby is a plugin, making it harder to configure, NextJS aims to bring everything useful into its core.
Plus it supports on-demand page generation, which Gatsby does not.
Exercise
Create a new NextJS project using the setup script.
$ npx create-next-app
or
$ yarn create next-app
Run your site locally with npm run dev or yarn dev.
Deploy with the vercel command. That's easiest.
Hosting NextJS on Netlify is a little trickier because of the dynamic nature of static paths. You'll need the next-on-netlify compatibility layer and follow their instructions.
We'll use Vercel for NextJS in this workshop because they're optimized to work together.
Solution
GitHub integration
One of the best parts of JAMStack is integrating your hosting with your GitHub. Gives you live previews on every pull request, automatic deploys when you merge to master, and branch previews.
Exercise
Create a new GitHub repository for your hello world project and push to master.
Go into Netlify and Vercel, find your deployed project, navigate to Settings, and link your project to git.
Once connected, make a change on a new branch, and create a pull request. See what happens.
Solution
If you don't want to pollute your GitHub, watch me do it :)