Skip to main content

Set up Firebase for your static site

This guide walks you through the shared Firebase setup that any of our use cases relying on Firebase reference (Kanban, blog comments, internal admin tools, multiplayer apps…). You'll create a Firebase project, enable a Firestore database, set up email/password authentication, register a web app, and copy the public credentials your static site needs.

It's the same steps every Firebase-backed Flexweg project starts from — do them once, then your project's tutorial picks up at "apply your project's Firestore security rules" and ".env configuration".

What you'll get​

  • A Firebase project with Firestore Database in production mode
  • Email/password authentication enabled, with a bootstrap admin account
  • A registered web app + the 6 public config values you'll paste into your project's .env

Prerequisites​

  • A Google account (any Gmail address works) to sign in to Firebase.
  • Your project's tutorial open in another tab — at the end of this setup you'll switch back to it to apply security rules and configure the local app.

Step 1 — Open the Firebase console​

On the Firebase home page (once signed in), click Get started by setting up a Firebase project.

Firebase setup — step 1

Step 2 — Name your project​

Enter the name of your project and click Continue.

Firebase setup — step 2

Step 3 — Configure Google Analytics (or skip it)​

You can untick Enable Google Analytics for this project — you don't need it for this setup. Click Create project.

Firebase setup — step 3

Step 4 — Wait for the project to be provisioned​

Once the project is created, you'll see "Your Firebase project is ready". Click Continue.

Firebase setup — step 4

Step 5 — Open the project dashboard​

Once your project is created, you'll see it in the right column (here named "myproject"). Click on it to open the dashboard.

Firebase setup — step 5

Step 6 — Open Firestore Database​

Once on your project dashboard, in the right sidebar select Databases & Storage → Firestore.

Firebase setup — step 6

Step 7 — Create the database (1/4)​

Click Create database.

Firebase setup — step 7

Step 8 — Create the database (2/4)​

You can leave the Database ID field empty. Select Standard Edition, then click Next.

Firebase setup — step 8

Step 9 — Create the database (3/4)​

Select the region for your database, then click Next.

After you set this location, you cannot change it later

Pick the region closest to most of your users — moving the database afterwards requires a manual migration.

Firebase setup — step 9

Step 10 — Create the database (4/4)​

Select Start in production mode, then click Create.

Firebase setup — step 10

No schema or tables to define

Firestore is schemaless — you don't create any collections by hand at this point. The application you're deploying creates the necessary collections automatically the first time it's used. For now, leaving the database empty is normal.

Step 11 — Database dashboard​

Once your database is created, you'll be redirected to its dashboard view.

Firebase setup — step 11

Step 12 — Open Authentication​

In the left sidebar, select Security → Authentication.

Firebase setup — step 12

Step 13 — Set up Authentication (1/4)​

In the Authentication screen, click Get started.

Firebase setup — step 13

Step 14 — Set up Authentication (2/4)​

In the Sign-in method tab, select Email/Password.

Firebase setup — step 14

Step 15 — Set up Authentication (3/4)​

Toggle Enable on the Email/Password row, then click Save.

Firebase setup — step 15

Step 16 — Set up Authentication (4/4)​

You're returned to the Sign-in providers list — Email/Password now shows as Enabled.

Firebase setup — step 16

Step 17 — Add the bootstrap admin user (1/2)​

In the Authentication screen, switch to the Users tab, then click Add user.

Firebase setup — step 17

Step 18 — Add the bootstrap admin user (2/2)​

Enter an email and a password to create the bootstrap administrator. Note both down — most projects use them as:

  • The VITE_ADMIN_EMAIL (or equivalent) value in their .env file
  • The login credentials when first opening the deployed app
  • The reference email inside the project's Firestore security rules (so this account is granted admin privileges)

Firebase setup — step 18

Step 19 — Register a web app and copy your Firebase config​

Your app needs a few public Firebase identifiers (project ID, API key, etc.) to connect to your project from the browser. Generate them by registering a web app:

1. In the Firebase console, click the gear icon (top left) → Project settings.

Step 19 — point 1: open Project settings

2. Scroll down to the Your apps section.

3. Click the </> Web icon to register a new web app.

Step 19 — point 3: register a web app

4. Give it any nickname (e.g. your project's name) and click Register app. Skip the Firebase Hosting setup — Flexweg will host the site.

Step 19 — point 4: name and register the app

5. Firebase displays a code block with a firebaseConfig object. Copy the values — you'll paste them into your project's .env file.

Step 19 — point 5: copy the firebaseConfig values

You now have everything every Firebase-backed Flexweg project needs:

  • 6 public Firebase config values (apiKey, authDomain, projectId, storageBucket, messagingSenderId, appId)
  • The bootstrap admin email and password

Next: project-specific Firestore security rules​

The Firebase project is set up but the database is currently wide open — only signed-in users can write, but the rules don't enforce any other constraint. Every project that uses this Firebase setup ships its own Firestore security rules: an access-control policy that restricts who can read or write what.

Switch back to your project's tutorial — it tells you the exact rules to paste into Firestore Database → Rules, and the corresponding .env values to fill in.

Used by​

Tutorials that build on this setup:

More projects coming soon. If you're writing a new tutorial that uses Firebase, reference this page from your "Step 1 — Set up Firebase" instead of duplicating the screenshots.