How to add a new document in Firestore?

 

Step 1: Set Up Firebase Project

 

To begin, ensure you have a Firebase project. If you haven't set one up yet, follow these instructions:

• Go to the Firebase Console.
• Click on "Add project" and follow the on-screen instructions.
• Once your project is created, add a web app or another platform as required. Follow the prompts to register your app. You will receive a Firebase configuration object. Keep this handy as you'll need it in the next steps.

 

Step 2: Install Firebase SDK

 

Integrate Firebase into your application by installing the Firebase SDK. This example uses a web application with JavaScript.

• Open your project directory in the terminal/command prompt.
• Run the following command to install Firebase:

npm install firebase

 

Step 3: Initialize Firebase in Your Application

 

Before you can add documents to Firestore, you'll need to initialize Firebase using the configuration object you obtained earlier.

• Create a JavaScript file (e.g., firebaseApp.js).
• Include the following code snippet, substituting your configuration details.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER\_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db };

 

Step 4: Add a New Document to Firestore

 

Now, ensure your Firestore database is ready to store documents and collections:

• Go to Firebase Console and select your project.
• In the left menu, click on "Firestore Database".
• Click on "Create Database", then choose "Start in Test Mode" to easily test without immediate security rules in place (ensure you update these for production).

Next, add a document:

• Create a new JavaScript file (e.g., addDocument.js) in your project.
• Use the following code to add a new document to a collection called 'yourCollectionName'. Modify 'yourCollectionName' and data according to your needs:

import { db } from './firebaseApp';
import { collection, addDoc } from "firebase/firestore"; 

async function addNewDocument() {
  try {
    const docRef = await addDoc(collection(db, "yourCollectionName"), {
      name: "Tokyo",
      country: "Japan"
    });
    console.log("Document written with ID: ", docRef.id);
  } catch (e) {
    console.error("Error adding document: ", e);
  }
}

addNewDocument();

 

Step 5: Test Your Implementation

 

To ensure your setup works as expected:

• Run your web application with your preferred method (e.g., using a local server).
• Open the web page that executes the addNewDocument function.
• Check the Firestore Database in your Firebase Console to confirm the new document appears in your specified collection.

By following these steps, you have successfully added a new document to Firestore using Firebase! Make sure to secure your Firestore rules as your app progresses to production status.