Make Authenticated, Serverless, Dynamic Clientside JAMstack apps with Gatsby + Netlify Dev (Functions + Identity)!
This is a fork of https://github.com/gatsbyjs/gatsby-starter-default which shows how to use Netlify Identity and Netlify Functions (via Netlify Dev) with Gatsby. Start here for your next JAMstack hackathon or use this as a reference implementation.
🚋Serverless Functions 🔏Authentication (with Netlify Identity) 🔐Authenticated Serverless Functions 😻External Provider login with GitHub, Bitbucket, Google, etc. 🏠Protected Routes
- 👋🏼Dynamic Clientside Pages in Gatsby (enabling all the above)
- 🕵🏼♂️Hide API Secrets from being exposed to Frontend
3 minute video walkthrough of this starter
Make this yourself
You may not need this starter repo! Learn how to add Netlify Identity and Functions to your own existing Gatsby project.
- May 2019 livestream Note: this doesn't include Netlify Dev.
- Check our post on the Gatsby blog: Turning the Static Dynamic: Gatsby + Netlify Functions + Netlify Identity
- FreeCodeCamp Guide: How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify
How to start
Basically these are the extra dependencies it adds:
netlify-lambda: For installing dependencies of Netlify Functions when deploying
react-netlify-identity-widget: For adding Netlify Identity authentication easily on any React site
For local development, first make sure you have Netlify CLI:
npm i -g netlify-cli ## if you are totally new, you will probably need to log in, e.g. netlify login
And then you can run this project with:
netlify dev # or ntl dev
This starts up both the Gatsby server (at port 8000) and a functions server (at a randomly selected port) and proxies them for you to a new port (usually port 8888). So make sure you go to
http://localhost:8888 to have the project work
You can read the Netlify Dev docs for more info.
Enabling Netlify Identity
If you are not using the Deploy to Netlify button (which has the
&stack=cms query param at the end that automatically sets Netlify Identity up for you), you will have to enable Netlify Identity manually yourself. Just head to
https://app.netlify.com/sites/YOUR_SITE_HERE/identity and enable it, so that your
Further Documentation in nested READMEs
- please see the src README for explanation on the layout
- please see the app README for explanation on the app
Other useful resources/reference projects that may help you:
Please contact @swyx if you need more help with Netlify.