React - Firebase

react.optersoft.workers.dev typescript/react/firebase

On this page

Terminal window
deno run -A npm:create-vite@latest react-firebase --template react-ts
Terminal window
cd react-firebase
deno install --allow-scripts --node-modules-dir --npm firebase tailwindcss @tailwindcss/vite

Create a file src/firebase.ts to initialize your connection:

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


const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "...",
  appId: "..."
};


const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

In src/App.tsx, we will fetch the list of pets from Firestore and display them.

import { useEffect, useState } from 'react';
import { db } from './firebase';
import { collection, getDocs } from 'firebase/firestore';


interface Pet { id: string; name: string; type: string; }


function App() {
  const [pets, setPets] = useState<Pet[]>([]);


  useEffect(() => {
    const fetchPets = async () => {
      const querySnapshot = await getDocs(collection(db, "pets"));
      const petList = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() } as Pet));
      setPets(petList);
    };
    fetchPets();
  }, []);


  return (
    <div>
      <h1>🐾 Edge Pet Store</h1>
      <ul>
        {pets.map(pet => (
          <li key={pet.id}>{pet.name} ({pet.type})</li>
        ))}
      </ul>
    </div>
  );
}


export default App;

Run the development server:

Terminal window
deno task dev

Better UI

  • config tailwind

  • @src/App.tsx and add functionality to add new pets
  • @src/App.tsx add loading indicator when fetching pets

Configure Cloudflare Worker (SPA Mode)

Create your wrangler.toml in the project root.

We use the not_found_handling setting to ensure the React Router (if you add one later) or hard refreshes don’t break.

name = "firebase"
compatibility_date = "2026-03-16"


[assets]
directory = "dist"
not_found_handling = "single-page-application"

Build your React app:

Terminal window
deno task build

Deploy to Cloudflare:

Terminal window
deno run -A npm:wrangler deploy

Auth

add auth

sign in with google doesn’t work

add firebase mcp