Gatsby's custom starter

Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.

🖥️ Tech stack

• Gatsby.js for client side

  • Styled-component
  • Material-UI
  • PWA (optional)

• Hasura for backend and DB

• Apollo for handling graphql and management state

• Heroku for deploying Hasura

• Firebase

  • Hosting for deploying gatsby file
  • Authentication for secure access to Hasura DB
  • Cloud Functions for handling JWT
  • Cloud Firestore for token refresh

🚀 Quick start

1. Create a Gatsby site.

   Use the Gatsby CLI to create a new site, specifying this repo.

   gatsby new <appname> https://github.com/Zett-8/great-gatsby

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd <appname>/
   gatsby develop

3. Check on browser

   The site is now running at http://localhost:8000

   Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

⚙️ Set up dependencies

1. Init Firebase project

   -- Caution! --
   DO NOT overwrite functions/index.js

   npm install -g firebase-tools
   
   firebase init
   
   firebase deploy

   then fill Firebase config

   ./src/provider/firebase.js

   if (!firebase.apps.length)
     firebase.initializeApp({
       apiKey: '',
       authDomain: '',
       databaseURL: '',
       projectId: '',
       storageBucket: '',
       messagingSenderId: '',
       appId: '',
     })

2. Build postgres DB and Hasura on Heroku

   You can easily do this just by clicking the button!
   Follow the official document of Hasura
   https://hasura.io/

3. Set config on heroku

   {
     "HASURA_GRAPHQL_ADMIN_SECRET": "<randomString>",
     "HASURA_GRAPHQL_CORS_DOMAIN": "*",
     "HASURA_GRAPHQL_UNAUTHORIZED_ROLE": "anonymous",
     "HASURA_GRAPHQL_JWT_SECRET": {
       "type": "RS256",
       "jwk_url": "https://www.googleapis.com/service_accounts/v1/jwk/securetoken@system.gserviceaccount.com", 
       "audience": "<FIREBASE_PROJECT_ID>", 
       "issuer": "https://securetoken.google.com/<FIREBASE_PROJECT_ID>"
       }
   }

   *JWT secret generator

4. Specify graphql endpoint for Apollo

   ./src/provider/apolloAuth.js

   const client = new ApolloClient({
     uri: '<ENDPOINT HERE>',
   })

   then enable Apollo Provider!

   ./gatsby-wrapper.js

   export default ({ element }) => (
     <>
       <ApolloAuthProvider>
         <CssBaseline />
         {element}
       </ApolloAuthProvider>
     </>
   )

5. Set up hasura info
   ./functions/index.js

   const client = new ApolloClient({
     fetch,
     uri: functions.config().hasura.url,
     request: (operation) => {
       operation.setContext({
         headers: {
           'x-hasura-admin-secret': functions.config().hasura.admin_secret,
         },
       })
     },
   })

   make sure user model or modify

   client.mutate({
     variables: { id: user.uid, email: user.email || '' },
     mutation: gql`
       mutation InsertUsers($id: String, $email: String) {
         insert_users(objects: { id: $id, name: $name }) {
           returning {
             id
             name
             email
             created_at
           }
         }
       }
     `,
   })

📝 What's inside?

A quick look at the top-level files and directories you'll see in a Gatsby project.

.
├── node_modules
├── functions
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── gatsby-wrapper.js
├── jest.config.js
├── jest-preprocess.js
├── loadershim.js
├── setup-test-env.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

• For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

• To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.