coderdiaz / jamstack-hackathon-starter Goto Github PK

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.

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

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

You can clone and deploy this sample project with one click:

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.

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 netlify-identity-widget works.

• 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:

• https://github.com/netlify/create-react-app-lambda
• https://github.com/sw-yx/react-netlify-identity-widget

Please contact @swyx if you need more help with Netlify.