How to Install Firebase SDK: Step-by-Step Guide

To install the Firebase SDK, use npm install firebase for Node.js or add the Firebase CDN script tag for web projects. Then, initialize Firebase in your app with your project configuration.

Syntax

For Node.js or modern JavaScript projects, install Firebase SDK using npm:

• npm install firebase installs the Firebase package.
• Import Firebase modules in your code with import { initializeApp } from 'firebase/app'.
• Initialize Firebase with your project config object.

For web projects without npm, add Firebase via CDN:

• Add a <script> tag with Firebase URL in your HTML.
• Initialize Firebase in a script block using your config.

bash and javascript

npm install firebase

// In your JavaScript file
import { initializeApp } from 'firebase/app';

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);

Example

This example shows how to install Firebase SDK using npm and initialize it in a Node.js or React project.

javascript

npm install firebase

// index.js
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "AIzaSyExampleKey1234567890",
  authDomain: "myapp.firebaseapp.com",
  projectId: "myapp",
  storageBucket: "myapp.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

const app = initializeApp(firebaseConfig);
console.log('Firebase initialized:', app.name);

Output

Firebase initialized: [DEFAULT]

Common Pitfalls

Common mistakes when installing Firebase SDK include:

• Not running npm install firebase before importing Firebase modules.
• Using outdated Firebase CDN URLs or mixing npm and CDN methods.
• Forgetting to replace the placeholder config values with your actual Firebase project settings.
• Not initializing Firebase before using its services.

javascript

/* Wrong: Missing npm install */
import { initializeApp } from 'firebase/app'; // This will cause an error if firebase is not installed

/* Right: Run this first in terminal */
npm install firebase

/* Then import and initialize as shown in previous examples */

Quick Reference

Summary tips for installing Firebase SDK:

• Use npm install firebase for Node.js or modern web apps.
• Use Firebase CDN script tags for simple web pages without build tools.
• Always initialize Firebase with your project config before using any Firebase services.
• Keep your Firebase config secure and do not expose sensitive keys publicly.

Key Takeaways

Install Firebase SDK with npm using 'npm install firebase' for Node.js or modern web apps.

Add Firebase CDN script tags for simple web projects without npm or build tools.

Always initialize Firebase with your project configuration before using its services.

Replace placeholder config values with your actual Firebase project settings.

Avoid mixing installation methods and keep your Firebase keys secure.