Skip to content

Latest commit

 

History

History
67 lines (52 loc) · 2.29 KB

README.md

File metadata and controls

67 lines (52 loc) · 2.29 KB
Raw

Pure Frontend Project

This is a small project to demonstrate how to build a powerful but totally on frontend side with almost basic features. The most painful combination is Gatsby + Firebase + Apollo Client. This project works perfectly when using Hasura as a backend solution.

Related Technologies

Paintful problem solved

  • Use Firebase with Gastby. Forget everything about SSR Gatsby build issue.
  • Use Apollo Client with Gatsby and Firebase, which support update Firebase user token whenever it changes.

Structure Explaination

.
+-- README.md
+-- gatsby-browser.js
+-- gatsby-config.js
+-- gatsby-ssr.js
+-- package.json
+-- src
|     +-- assets
|     |     +-- css
|     |     +-- fonts
|     |     +-- images
|     +-- components
|     +-- containers
|     +-- data
|     +-- helpers
|     +-- pages
|     +-- queries
|     +-- translations
|     +-- apollo.js
|     +-- firebase.js
|     +-- root.js

There are some important files are:

  • src/root.js: this is where we should start from, wrap all React inside a Provider via React Context with included Firebase and Apollo Client. wrapRootElement of Gatsby would be defined here, too.
  • src/firebase.js: this is the firebase magic, resolve all SSR issue with Firebase in Gatsby.
  • src/apollo.js: this is Apollo client we need for Apollo Provider, resolve Firebase user token issue here.

Other structured folder:

  • src/helpers: where all app logic comes from.
  • src/page: Gatsby's default page folder for all static pages.
  • src/translations: contains all JSON files for multiple language site.
  • src/queries: all GraphQL queries are defined here.
  • src/data: contains all dummy data for client side when the backend has not ready yet.
  • src/containers: all containers in React, stateful.
  • src/components: all STATELESS React components.

What you should do first

  • Change your information inside package.json file.

Feedback

Please feel free to have any feedback. I am always keep moving forward to improve this project.