My Cloudflare Pages Adventure: React, Firebase, and the Veins on My Forehead

Okay, buckle up, because today’s story is a wild ride in the life of a frontend developer. Picture me, staring at my screen, veins popping, sipping coffee, muttering at Cloudflare like it personally offended me. Yeah… it was one of those days.

The Backstory

Here’s the setup: I have this React dashboard - nothing fancy, just a good old SPA with Firebase for login and database stuff. No SEO magic, just pure functional awesomeness.

Recently, I transferred the repo from one GitHub account to another. Fun, right? Well… it meant I had to delete the old Cloudflare Worker/Pages project and start fresh. Clean slate, new project… cue the tiny adventure music.

Step 1: Setting Up the New Cloudflare Pages Project

So I open Cloudflare Pages and start poking around. Here’s what I needed to do:

• Git repo: obviously.

• Build command: npm run build.

• Build output folder: build (React default).

• Branch control: master = production.

• Automatic deployments: yes, I like my life automated.

Everything seems smooth. I’m thinking: “Yeah, this is going to be easy, Maiko.” Famous last words.

Step 2: Environment Variables – The Spicy Part

Here’s where things get interesting. Firebase lives in environment variables because duh, security.

I copy all my keys into Cloudflare Pages, double-check that they start with REACT_APP_ (React ignores anything else), and mark the sensitive ones as secrets.

I look at it and think: “Perfect. This is flawless. I am a wizard.”

Step 3: Deployment Fun (Veins + Rage Edition)

I hit Deploy - and the screen hits me with:

Uncaught Error: Missing required Firebase configuration. 
Please check your environment variables.

My first reaction: 😳

Then Cloudflare’s slow-ass dashboard shows up like it’s in slow motion. The veins on my forehead? Yeah, they started doing a little dance of their own.

Now here’s the kicker - I knew everything was correct. I mean, the Google reCAPTCHA was working, Firebase env console looked perfect, everything was legit. But nooo, the deployment screams at me like I had never coded in my life.

And then it hits me: the newly created custom subdomain hadn’t fully propagated yet. Cloudflare hadn’t realized it was live, so my build didn’t see the variables. The internet strikes again.

Step 4: Lessons Learned (Or “Maiko’s Wisdom for the Day”)

1. React reads env variables at build time, not runtime. Forget this, and you cry.

2. Secrets vs plaintext: Debug flags can be plaintext, Firebase keys are better as secrets. Keep your secrets secret, folks.

3. DNS propagation matters: A new subdomain is like a toddler - it takes a few minutes to walk properly.

4. Patience with Cloudflare: Slow dashboard + new projects = veins. Keep water nearby.

5. Trust yourself: Just because the console yells at you doesn’t mean your config is wrong. It’s probably the internet being dramatic.
   

Step 5: Redeploy & Celebrate

After waiting a bit (and maybe screaming into my pillow), I retriggered the deployment - or pushed a tiny commit, whatever - and just like magic:

• ✅ React dashboard live

• ✅ Firebase happy

• ✅ Google reCAPTCHA working

• ✅ Environment variables being read correctly

Cue the celebratory coffee sip. ☕

The Moral of the Story

Sometimes you think it’s a coding problem, but really… it’s just the internet taking its sweet time to catch up.

Starting fresh can be scary, but it’s also kinda fun. Deleting the old worker, setting up the new Pages project, adding env variables carefully - feels like tidying your desk, but with higher stakes and more caffeine.

Next time you transfer a repo and start over on Cloudflare Pages, remember:

• Check your build command

• Double-check your env variables

• Wait for DNS/subdomain propagation

• Trust your code

• Breathe - and maybe keep some aspirin for those veins