Steps to setup Firebase | Create New Database in Firebase Firestore by web.

Steps to setup Firebase | Create New Database in Firebase Firestore by web.

Firebase Database/Hosting is super easy to work with besides it’s free and provide many benefits, including fast response times (thanks to CDN’s), HTTPS enabled by default, and support for HTTP2 push.

Follow me while I’ll show you how to create and deploy our project to new Firebase account.

#1 To start, we need a Firebase Project.

Follow these👇 steps from video to create and setup new Firebase Project.

Okay, I assume you have followed each step from video↑ to create Firebase Project.

Please comment in the comment box below if anything does not works for you!
I'll be happy to Help :)

We have done so far:

  1. Open Google and Search for: “Firebase Console”.
  2. Sign in with Gmail account.
  3. Create new Project.
  4. Create Web App with in New Project.
  5. Install Firebase CLI.
    (make sure within your project root directory run below command)
    👉 npm install -g firebase-tools
  6. Do Firebase Login.
    (make sure within your project root directory run below command)
    👉 firebase login
    (this will redirect you to your browser to sign-in using Google — don’t worry allow necessary permissions)
  7. Initialize Firebase in your project directory.
    (make sure within your project root directory run below command)
    👉 firebase init
    (this command will generate a firebase.json config file for us to adjust the deployment details)

#2 Update firebase.json file.

In our project root directory ensure our firebase.json file looks like this below JSON file. Go to your project root directory and check for my-project/firebase.json

(If not, simply copy the code below👇 and replace with your `firebase.json` file)

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      {
        "source": "/build/app/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      },
      {
        "source": "sw.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}

Done! 🤩 It’s that simple to setup Firebase.

See you later👋👋


Next, you may cover:

  1. How to do CRUD operations in Firebase with Firestore. (Click here👆)
  2. Add Firebase Authentication to PWA or Angular project using AngularFire. (Click here👆)
  3. Deploy project to Firebase Hosting. (Click here👆)

Feel free to comment down in the comment box… If I missed anything or anything is incorrect or anything does not works for you :)
Stay connected for more articles.