Firebase from Scratch: Project Setup and Web App Integration – Hands-on Guide • Meteora Web Agency

You have a static web app — HTML, CSS, JavaScript — and you are missing the backend. You need user authentication, a real-time database, or file uploads without setting up a LAMP or Node.js server. That is exactly the problem Firebase solves. We, at Meteora Web, use it in real projects for clients who need a backend ready in an afternoon, not a month. In this guide we walk you from clicking "Create project" to the first Firestore write, with working code and zero unnecessary theory.

Why Firebase? The Backend You Don't Manage

Firebase is a set of backend services provided by Google: database (Firestore and Realtime Database), authentication, storage, hosting, serverless functions. The advantage? You do not have to configure servers, security patches, or horizontal scaling. You pay only for what you use, and the SDK talks directly to your frontend. For a web app that needs to grow fast, it is the most pragmatic choice.

We have chosen it multiple times for lightweight e-commerce projects and service apps. Integration with Google Cloud allows scaling without rethinking, and Security Rules give granular control over who can read or write data. Security is not automatic, but once you learn to configure it — and we show you the basics — you get a robust system without writing server-side code.

When to Use Firebase and When Not

Firebase is great for apps with structured data, simple authentication, and no complex backend logic. It is not the right choice if you need advanced SQL queries, joins across multiple tables, or a fixed-cost dedicated server. For 80% of SME projects, Firebase does the heavy lifting and lets you focus on the frontend.

Step 1: Create a Firebase Project

Go to console.firebase.google.com and sign in with your Google account. Click "Create a project".

Enter a project name (e.g., "my-app-123"). The name must be unique across all Firebase projects.
Choose whether to enable Google Analytics. For basic setup it is not needed, but if you want to track user events, go ahead.
Confirm and wait a few seconds. Done.

Step 2: Register Your Web App

Inside the console, click the (Web) icon to add a web app. You will be asked for a nickname (e.g., "client-web"). After registration you will see a configuration object:

const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "my-app-123.firebaseapp.com",
  projectId: "my-app-123",
  storageBucket: "my-app-123.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123"
};

Copy these credentials to a separate file. Never share them publicly. We will use this object to initialize the SDK.

Step 3: Integrate Firebase into Your Web App

There are two ways: via CDN (fast, suitable for simple projects) or via npm (recommended for modern apps with a bundler like Vite or webpack).

Option A: CDN (for prototypes or single HTML files)

Add these scripts inside the of your HTML:

<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
<script>
  const app = firebase.initializeApp(firebaseConfig);
  const db = firebase.firestore();
</script>

Note: firebase-app-compat is the compatibility version of SDK v8. If you prefer the modular v9, use ES modules (Option B).

Option B: npm (recommended for structured projects)

Install the packages in your project:

npm install firebase

Then import and initialize in your main JavaScript file:

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

const firebaseConfig = { /* your credentials */ };
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db };

Now you can use db in any other module. This approach gives you tree-shaking (load only the modules you use) and better control.

Practical Example: Writing and Reading Data on Firestore

In your HTML file (or component), create a simple form to add a document to a collection named "users". Then read the data and display it on the page.

Writing a Document

import { collection, addDoc } from 'firebase/firestore';

async function addUser(name, email) {
  try {
    const docRef = await addDoc(collection(db, 'users'), {
      name: name,
      email: email,
      createdAt: new Date()
    });
    console.log('Document added with ID: ', docRef.id);
  } catch (e) {
    console.error('Error: ', e);
  }
}

Reading Documents in Real Time

import { collection, onSnapshot } from 'firebase/firestore';

const unsubscribe = onSnapshot(collection(db, 'users'), (snapshot) => {
  snapshot.forEach((doc) => {
    console.log(doc.id, ' => ', doc.data());
  });
});
// Call unsubscribe() when you no longer want to listen

Important note: Firestore requires security rules to allow reads/writes. By default, after 30 days the project blocks all operations. For testing, go to Rules in the console and temporarily set:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

For development you can use allow read, write: if true; but never in production. We, at Meteora Web, always recommend tying rules to authentication.

Adding Authentication (Google Sign-In)

Authentication is one of the most used services. Here is how to enable Google login in a few steps:

In the Firebase console, go to Authentication → Sign-in method → Enable Google.
Install the auth module: npm install firebase (already included) and import:

import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

const auth = getAuth(app);
const provider = new GoogleAuthProvider();

async function googleLogin() {
  try {
    const result = await signInWithPopup(auth, provider);
    console.log('Logged in user:', result.user);
  } catch (error) {
    console.error('Login error:', error);
  }
}

Then attach the function to a button in your HTML. From the user profile you can get name, email, photo. By integrating with Firestore, you can save protected user data.

Hosting on Firebase (deploy in 2 commands)

Once your app is ready, you can publish it on Firebase Hosting for free (with bandwidth limits). Install Firebase CLI:

npm install -g firebase-tools
firebase login
firebase init hosting

Choose the output folder (e.g., dist or public), then:

firebase deploy --only hosting

Your app will be live at your-project.web.app. You can connect a custom domain.

Common Mistakes to Avoid

Exposing credentials in client-side code: The apiKey is not a secret on the client, but it must not end up in public repositories. Use environment variables or configuration files excluded from git.
Overly permissive security rules in production: Never use allow read, write: if true; on real data.
Forgetting to initialize the app: If you see Firebase: No Firebase App '[DEFAULT]' has been created, it means initializeApp was not called or was called after usage.
Not creating composite indexes for complex queries: Firestore requires indexes for multiple filters and orderings; if missing, the console will show a link to create them automatically.

In a Nutshell — What to Do Now

Create a Firebase project at console.firebase.google.com and register your web app.
Initialize the SDK in your project (CDN or npm) and verify with a simple console.log(app).
Try writing and reading a document on Firestore using the example above. Then enable authentication and link user data.

You now have 90% of what you need for a modern web app with a ready backend. For deeper dives, check the official Firebase documentation. If you need help with a concrete project, We, at Meteora Web, are here.