Jamstack Hackathon Starter is a Gatsby boilerplate, forked from gatsbyjs/gatsby-starter-default by Shawn Wang (swyx), that shows how to build authenticated, serverless, dynamic clientside JAMstack apps with Netlify Functions and Netlify Identity, run locally through Netlify Dev.
What is Jamstack Hackathon Starter?
Jamstack Hackathon Starter is a Gatsby boilerplate that demonstrates how to add Netlify Identity authentication and Netlify Functions serverless backends to a static Gatsby site. The repo takes a plain Gatsby starter and turns it into a reference implementation with serverless functions, protected routes, external provider login, and clientside dynamic pages, all coordinated locally by Netlify Dev. It is published as a starting point for JAMstack hackathons and as a learning resource for developers adding these features to existing Gatsby projects.
What makes Jamstack Hackathon Starter stand out?
It combines three Netlify services — Functions, Identity, and Dev — in one small Gatsby project, so a single repository demonstrates the full authenticated-serverless-JAMstack pattern.
- Serverless Functions — Netlify Functions run serverless endpoints; the extra dependency netlify-lambda installs function dependencies during deployment.
- Netlify Identity authentication — the react-netlify-identity-widget dependency adds a login UI to any React page, wired to Netlify's Identity service.
- Authenticated Serverless Functions — functions can require a logged-in identity, keeping protected data behind authentication.
- External provider login — Identity supports sign-in with GitHub, Bitbucket, Google, and other OAuth providers.
- Protected routes — Gatsby clientside routes block unauthenticated visitors from restricted pages.
- Dynamic clientside pages — pages render in the browser rather than at build time, which is what enables authentication and route protection in a static site.
- Hidden API secrets — serverless functions keep API keys and secrets off the frontend bundle.
Who should use Jamstack Hackathon Starter?
- Hackathon participants: deploy a working authenticated serverless app in one click using the Deploy to Netlify button, which includes the stack=cms query parameter that enables Netlify Identity automatically.
- Gatsby developers: learn how to wire Netlify Identity and Functions into an existing Gatsby project by following the linked Gatsby blog post, FreeCodeCamp guide, and video walkthrough.
- JAMstack learners: study a minimal reference implementation that combines serverless functions, identity, and protected routes without a separate backend.
What can you do with Jamstack Hackathon Starter?
- Prototype an authenticated app: clone and open the repo in Gitpod, run netlify dev, and test external provider login and protected routes locally.
- Practice serverless functions: use the starter as a sandbox for writing Netlify Functions with proper authentication checks.
- Reference the pattern: reuse the project's structure and dependencies when adding Netlify services to other Gatsby sites.
How does Jamstack Hackathon Starter work?
Install the Netlify CLI globally with npm i -g netlify-cli, log in once with netlify login, then run netlify dev (or ntl dev). Netlify Dev starts the Gatsby server on port 8000 and a functions server on a randomly selected port, then proxies both to a new port, usually 8888; the README stresses visiting http://localhost:8888 for the project to work.
Pros and cons
- One-click setup: the Deploy to Netlify button includes stack=cms, which sets up Netlify Identity automatically rather than requiring manual dashboard configuration.
- Local parity: Netlify Dev runs the Gatsby frontend and the functions server together, so local development matches the deployed environment.
- Learning resources: the README links a 3-minute video walkthrough, a Gatsby blog post, and a FreeCodeCamp guide on building authenticated serverless JAMstack apps.
- Port quirk: during local development the project only works when accessed through the Netlify Dev proxy port (usually 8888), not Gatsby's default port 8000.
FAQ
Do I need the Netlify CLI to run this starter?
Yes. Install the CLI globally with npm i -g netlify-cli, log in with netlify login, then run netlify dev or ntl dev from the project root to start the Gatsby and functions servers together.
Does the Deploy to Netlify button enable Netlify Identity automatically?
Yes, but only because the deploy URL in this repo includes the stack=cms query parameter, which auto-configures Identity. If you skip the button, you must enable Netlify Identity manually at app.netlify.com/sites/YOUR_SITE_HERE/identity.
What extra dependencies does the starter add?
It adds netlify-lambda, which installs Netlify Function dependencies during deployment, and react-netlify-identity-widget, which provides a Netlify Identity login widget for any React page.
Why is the project served on port 8888 instead of 8000?
Netlify Dev starts Gatsby on port 8000 and a functions server on a random port, then proxies both to a new port, usually 8888. The README says to visit http://localhost:8888 for the project to work correctly.
Is this starter only useful for hackathons?
No. It is positioned as a hackathon starter, but the README explicitly says you may not need the repo at all and links guidance for adding Netlify Identity and Functions to your own existing Gatsby project.
