🔥 Firebase Storage: Easy Setup & File Listing.

"Firebase is a Backend-as-a-Service (BaaS) platform developed by Google that helps developers build web and mobile apps faster without managing traditional server-side infrastructure."

Step 1: Firebase Setup

1. Create a New Project

Click on “Add Project” or “Create Project”
Give your project a meaningful name (e.g., MyFirebaseStorageDemo)
Follow the guided steps and click Finish to set up the project.

2. Enable Firebase Storage

Go to the left sidebar and click on “Build > Storage”
Click “Get Started” and choose your storage location (pick the one closest to your users).

3. Upgrade to Blaze Plan

Go to Project Settings > Usage and billing.
Select Blaze Plan (first $1 is often free as part of a trial)

4. Set Storage Rule

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.time < timestamp.date(2025, 8, 23);
    }
  }
}

5. Upload Files on Cloud Storage

Create a folder after Clicking on Folder Icon at Right Corner.
Upload images file to the Folder.

Step 2: Add Firebase SDK to HTML.

<script src="https://www.gstatic.com/firebasejs/10.3.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.3.1/firebase-storage.js"></script>

Step 3: Import Firebase CDN in Javascript Block.

<script
<--Above Code-->
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.3.1/firebase-app.js";
import { getStorage, ref, listAll } from "https://www.gstatic.com/firebasejs/10.3.1/firebase-storage.js";
</script>

You can Find CDN in Firebase Documentation.

Step 4: Now Intialize Firebase config.

Go to https://console.firebase.google.com
Select your project
Click ⚙️ Settings (next to Project Overview)
Scroll down to “Your Apps”
Select Your Existing Web App.
Copy the firebaseConfig object shown on screen.
Copy and Paste firebaseConfig.
initialize using an App and Storage Variable.

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"
};

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

Step 4: Listing Files from Folder in Firebase storage

const fileList = document.getElementById("fileList");
    const listRef = ref(storage, '');
    listAll(listRef)
      .then((res) => {
        res.items.forEach((itemRef) => {
          const li = document.createElement("li");
          li.textContent = itemRef.name;
          fileList.appendChild(li);
        });
      })
      .catch((error) => {
        console.error("Error listing files:", error);
      });

Step 5: Add the HTML Content.

<h2>File List</h2>
  <ul id="fileList"></ul>
<script>
<---Javascript Code from Here-->
</script>

Conclusion:

In this guide, we learned how to:

Set up and configure Firebase Storage in a web project
Apply temporary access rules for development
List all files stored in a folder (or root) using simple JavaScript
Display those files cleanly in the browser.

DEV Community