https://github.com/mkubdev/jamstack-hackathon-starter
Make Authenticated, Serverless, Dynamic Clientside JAMstack apps with Gatsby + Netlify Dev (Functions + Identity)!
https://github.com/mkubdev/jamstack-hackathon-starter
Last synced: about 1 year ago
JSON representation
Make Authenticated, Serverless, Dynamic Clientside JAMstack apps with Gatsby + Netlify Dev (Functions + Identity)!
- Host: GitHub
- URL: https://github.com/mkubdev/jamstack-hackathon-starter
- Owner: mkubdev
- License: mit
- Created: 2019-11-09T17:37:15.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T02:54:05.000Z (over 3 years ago)
- Last Synced: 2025-01-22T22:31:44.109Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 10.3 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 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](https://www.netlify.com/products/dev/?utm_source=github&utm_medium=swyx-hackathon-starter&utm_campaign=devex)) with Gatsby. Start here for your next JAMstack hackathon or use this as a reference implementation.
Features:
- 🚋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
[](https://www.youtube.com/watch?v=bueXJInQt2c)
## 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](https://www.youtube.com/watch?v=vrSoLMmQ46k&feature=youtu.be) Note: this doesn't include Netlify Dev.
- Check our post on the Gatsby blog: [Turning the Static Dynamic: Gatsby + Netlify Functions + Netlify Identity](https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/)
- [FreeCodeCamp Guide: How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify](https://www.freecodecamp.org/news/building-jamstack-apps/)
## How to start
You can clone and deploy this sample project with one click:
[](https://app.netlify.com/start/deploy?repository=https://github.com/sw-yx/jamstack-hackathon-starter&stack=cms&utm_source=github&utm_medium=swyx-hackathon-starter&utm_campaign=devex)
Basically these are the extra dependencies it adds:
- [`netlify-lambda`](https://github.com/netlify/netlify-lambda): For installing dependencies of Netlify Functions when deploying
- [`react-netlify-identity-widget`](https://github.com/sw-yx/react-netlify-identity-widget): For adding Netlify Identity authentication easily on any React site
For local development, first make sure you have Netlify CLI:
```bash
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:
```bash
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](https://www.netlify.com/docs/cli/?utm_source=github&utm_medium=swyx-jamstack&utm_campaign=devex#netlify-dev-beta) for more info.
## Enabling Netlify Identity
If you are not using the [**Deploy to Netlify**](https://app.netlify.com/start/deploy?repository=https://github.com/sw-yx/jamstack-hackathon-starter&stack=cms&utm_source=github&utm_medium=swyx-hackathon-starter&utm_campaign=devex) 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 `netlify-identity-widget` works.
## Further Documentation in nested READMEs
- please see the [src README](/src/README.md) for explanation on the layout
- please see the [app README](/src/app/README.md) for explanation on the app
## Other Resources
Other useful resources/reference projects that may help you:
- https://github.com/netlify/create-react-app-lambda
- https://github.com/sw-yx/react-netlify-identity-widget
Please contact [@swyx](https://twitter.com/swyx) if you need more help with Netlify.