Hey reader👋🏻! If you're working on a JavaScript project and would like to use Firebase's Firestore database, this is the right article for you. We will not cover javascript concepts or have a deep dive into firebase functionalities. We are gonna create a simple CRUD functionality app using Vanilla Javascript and Firestore. At the end of this article, you will have Firestore set up and add data to your Firestore database. Now, it's time to get our hands dirty.

Setting up your project

In order to focus only on the topic, we will include links for more details on certain parts of this article. To set up our project, we will start by;

1. Create a project on Firebase console

• Go to the Firebase console and click Add Project

• Enter your project name, review, and accept the terms.

• Click Continue and then click Create project

You should see this screen at this point.

2. Add SDK to your Javascript project

• Create a project with just 2 files; index.html and app.js

• In the project dashboard on Firebase, add a web app to the project.

• Add a nickname and click Register app.

• Then select Use a script tag to add the SDK to your project. You should see this code.

Note: We will be using version 9.6.10 as newer versions do not support CND for libraries such as FIRESTORE

• Then click Continue to console which takes you back to the dashboard.

• Click Build on the sidebar and then Firestore Database.

• Create a new database.

• Go to the Rules tab in the database and change the read and write permissions to true and click Publish

3. Add SDK to our project

At this point, our project structure looks like this

backend
      |------ app.js
      |------index.html

• Add the SDK code to your index.html file.

NOTE: We will be using the firebase version 9.6.10 as the recent version of firebase requires using the SDK.

Setup your code

Add this script to your index.html file

<script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp, } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
    import {
      getFirestore,
      collection,
      doc,
    } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js";


    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
      apiKey: "******************",
      authDomain: "*************",
      projectId: "***********",
      storageBucket: "***************",
      messagingSenderId: "***************",
      appId: "*************"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);


    //Firestore connection
    const database = getFirestore();
  </script>

With this configuration, you are set to go.

Next: We will get and create data in firestore from our HTML file.