GatsbyFire Starter

A Gatsby Starter to build a complete webapp with Gatsby & Firebase by using the library reactfire

You can see the example running here

🚀 Quick start

1. Create a Gatsby site.

   Use the Gatsby CLI to create a new site, specifying the default starter.

   # create a new GatsbyFire app
   gatsby new gatsby-fire-starter https://github.com/GeorgeSteel/gatsby-fire-starter

2. Start developing.

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

   cd gatsby-fire-starter
   gatsby develop

3. Open the source code and start editing!

   Create 2 files called: .env.development & .env.production in the root folder with the following content:

     GATSBY_FIREBASE_API_KEY=
     GATSBY_FIREBASE_AUTH_DOMAIN=
     GATSBY_FIREBASE_DATABASE_URL=
     GATSBY_FIREBASE_PROJECT_ID=
     GATSBY_FIREBASE_STORAGE_BUCKET=
     GATSBY_FIREBASE_MESSAGING_SENDER_ID=
     GATSBY_FIREBASE_APP_ID=
     GATSBY_FIREBASE_MEASUREMENT_ID=
   

   There you put your firebase' project credentials Now your site is now running at http://localhost:8000!

🧐 What's inside?

A quick look at the important components that you'll see in a Gatsby project.

1. FirebaseUI: This is a simple login component based in Firebase UI, but not the original, it's the localized version: react-firebaseui-localized.

2. PrivateRoute: This component prevents the access to the routes that you want to protect, if you use it, the only way to get access is by signing in.

3. app.jsx: There you define all the endpoints of your app, or at least all the endpoints you want to make private. If wou want to create new public pages, I recomend you to just create a new file in the pages folder. For this I used Reach Router

4. ReactFireContext: In that folder you will find the wrapRootElement component that contains the FirebaseAppProvider, you can edit it if you want but I wouldn't recommend it. The other file called fireConfig.js is where you put your firebase' project credentials.

💫 Deploy