How to Set Up Firebase with a Web Application

How to Set Up Firebase with a Web Application – Step-by-Step Guide

This guide walks you through the complete process of integrating Firebase into a basic web app using CDN links and Firebase console setup.

🔹 Step 1: Create a Firebase Project

  1. Go to https://firebase.google.com

  2. Click on "Get Started" or "Go to Console"

  3. Click "Add Project"

  4. Name your project:
    👉 Dean-Project

  5. Click Continue

  6. Enable Google Analytics (toggle ON)

  7. Click Continue

  8. Choose Default Account for Firebase

  9. Click Create Project

🔄 Firebase will now take a few moments to set up your project.

  1. Once complete, click Continue


🔹 Step 2: Register Your Web App

  1. In Firebase Console, go to Project Overview

  2. Click on the Web icon (</>) to register a web app

  3. Enter your app name:
    👉 Ry-app

  4. ❌ Do not check "Also set up Firebase Hosting"

  5. Click Register App

  6. Firebase will now generate a JavaScript snippet – Copy this code

  7. Click Continue to Console

🔹 Step 3: Set Up Firebase in Your Web App

  1. In VS Code, create a new project folder:

    mkdir firebase
cd firebase

  2. Create a file:
    👉 index.html
    👉 index.js

🔹 Step 4: Add Firebase SDK via CDN

To use Firebase features, include the CDN version of Firebase SDK.

  1. Go to:
    https://firebase.google.com/docs/web/setup

  2. Scroll to "Add Firebase SDKs via CDN"

  3. Copy the required libraries:

<!-- Firebase App (core SDK) -->
<script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js"></script>

<!-- Add other Firebase services you want to use -->
<script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js"></script>

🔹 Step 5: Add Firebase Config in HTML

Paste the config script you got during registration in the <body> tag or inside your index.js:

<script>
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID"
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

✅ Example: Simple Project Structure

firebase/
├── index.html
└── index.js

✅ Example: index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Firebase Demo</title>
</head>
<body>

  <h1>Welcome to Firebase Web App</h1>

  <!-- Firebase SDKs -->
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js"></script>

  <script>
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "SENDER_ID",
      appId: "APP_ID"
    };

    firebase.initializeApp(firebaseConfig);
  </script>

</body>
</html>

🔹 Next Step: Use Firebase Services

You can now start using Firebase features like:

firebase.auth()
firebase.firestore()

✅ You’re all set up to build Firebase-powered apps using HTML and JavaScript. Let me know if you want to add Firebase Authentication, Firestore Database, or Hosting next.

Comments

Post a Comment

Popular posts from this blog

How to Upload Your Local Project to GitHub Properly

Image
How to Upload Your Local Project to GitHub – Step-by-Step Guide  📂 How I Learned the Right Way to Upload a Project to GitHub (From My College Mistake) 🏫 The College Phase: Uploading Projects to GitHub… the Wrong Way When I was in college, like many students, I worked on small development projects — web apps, Java-based tools, and mini full-stack apps. Back then, seniors and recruiters would often ask: “Do you have a GitHub link for your projects?” So I did what most beginners do: I created a new repository on GitHub. Then, I clicked Upload Files . I dragged and dropped my entire project folder . And hit “Commit”. Done, right? Well... not exactly . ❌ Why That Was the Wrong Way At first glance, it looked fine — my code was there on GitHub. But: There was no commit history Git wasn’t tracking actual changes over time No .gitignore file — so unnecessary files were also uploaded If I cloned it somewhere else, setup was messy Worse, I coul...
Read more

YouTube Videos, Translation, AI Tools Aur Hindi Mein Dekhne Ka Experience

  YouTube Videos, Translation, AI Tools Aur Hindi Mein Dekhne Ka Experience  Introduction Aaj kal har koi YouTube pe videos dekhta hai—tutorials, funny clips, interviews, ya podcasts. Lekin jab content English mein ho aur aapko Hindi mein samajhna ho, toh kya options hain? Language barrier content enjoy karne mein bada hurdle ho sakta hai, especially jab video English mein ho aur aapko Hindi mein samajhna ho ya Hindi audio chahiye. Is blog mein hum yehi samjhenge ki aap English YouTube video ko Hindi mein kaise dekh sakte hain ya sun sakte hain, kaun-kaun se AI tools available hain, aur kya limitations hain real life usage mein. YouTube Video Dekhne Mein Language Problem YouTube duniya ka sabse bada video platform hai—yahan har topic, har language, har audience ke liye kuch na kuch available hai. Lekin jab: Video English ya kisi aur language mein ho https://unhealthyirreparable.com/cit2c8ca?key=7566cfdb82de49ba4912160b26b7621f User ko Hindi mein content ch...
Read more

How to Build a Telegram Bot Using Node.js – Step-by-Step Guide

Image
How to Build a Telegram Bot Using Node.js – Step-by-Step Guide   Creating your own Telegram bot is easier than you think. In this guide, I’ll walk you through the complete process — from setting up your bot with BotFather , writing the bot using Node.js , to deploying it live 24/7 using Render . username: tns_server_error_bot 🧭 Step 1: Create a Bot on Telegram Using BotFather Open Telegram app In the search bar, type: BotFather Start the chat and type /start Then type /newbot and follow the steps: Choose a name for your bot (e.g., TNS Server Bot ) Choose a username that must end with _bot (e.g., tns_server_error_bot ) Copy the HTTP API token that BotFather gives you — we’ll use this later in our .env file. 💻 Step 2: Set Up Y our Project in VS Code (or Cursor) Open your preferred IDE (I used Cursor but you can use VS Code) Create a new folder for your project: mkdir tns_server_error_bot cd tns_server_error_bot Initiali...
Read more