Initial setup for Cloud Firestore database

This quick guide shows you how to set up Cloud Firestore for your application.

Note: This guide will use Web version 9 (modular) - which is the latest version.

Create a project in Firebase

If you haven't already, create a Firebase project and register your app with that project in the Firebase Console.

Once you have your project set up, you'll get a Firebase configuration object that you'll need to connect your app to your firebase project resources. Head over to the project settings and look for the SDK setup and configuration.

Install SDK & initialize Firestore Database

In your terminal, install the SDK (you can use npm or yarn):

npm install firebase
// or if you use yarn:
yarn add firebase

Then, initialize Firebase:

// create a new folder inside src called "config"
mkdir root/src/config
// create a file called "firebase.js"
touch root/src/config/firebase.js

Then stick this in it:

// You'll need to import these methods from Firebase and Cloud Firestore.
import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"

// Initialize your app's Firebase configuration.
const app = initializeApp({
  projectId: process.env.PROJECT_ID,
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID,
})
// Export your Firestore database so you can use the services throughout your app.
export const firestoreDb = getFirestore()

For security reasons, make sure to place your configuration keys inside environment variables so git can ignore it.

Environment Variables

In the root folder, create a .env.local file. Then paste this in it:

PROJECT_ID = your - project - id
APP_ID = your - app_id
API_KEY = your - api_key
AUTH_DOMAIN = your - project - id.firebaseapp.com
STORAGE_BUCKET = your - project - id.appspot.com
MESSAGING_SENDER_ID = your - messaging_sender_id

For NextJS applications

If you're developing in NextJS, you will need to copy this code in your next.config.js file.

module.exports = {
  reactStrictMode: true,
  env: {
    PROJECT_ID=your-project-id
    APP_ID=your-app_id
    API_KEY=your-api_key
    AUTH_DOMAIN=your-project-id.firebaseapp.com
    STORAGE_BUCKET=your-project-id.appspot.com
    MESSAGING_SENDER_ID=your-messaging_sender_id
  },
  images: {
    domains: ["firebasestorage.googleapis.com"], // if you are using Firebase storage
  },
};

Conclusion

A Firebase App is basically like a container-like object that has the common configuration and it shares authentication across all the Firebase services. So after you initialize the object, you can start using the services.

The first time you add data in Firestore, they are stored implicitly in Documents, which is stored in Collections. You can create a new collection and a document either in the Firebase console or by adding some code.

That's it. We've connected our Cloud Firestore Database to our app. 🎉

If you'd like to learn on how to fetch data from Firestore, check out my blog post. Good luck!