Keyboard shortcuts

jk
move through the list
↵
open the selected item
a
ask a question
nucw
tabs: new, unanswered, active, top
⌘↵
post the answer you are writing
/or⌘K
search
t
switch theme
?
this list
AskVibe
AskSign in
Demo, all content is generated
Question

Cloned my Lovable project from GitHub, npm run dev shows a white page

Solved · 195 views · asked by olga_s · edited
lovablesupabasereactdeployment

Want to continue in Cursor so I cloned the repo Lovable made. npm install and npm run dev work, it says

  VITE v5.4.1  ready in 412 ms
  ➜  Local:   http://localhost:8080/

but the page is totally white. On lovable.app it works. In the browser console:

Uncaught Error: supabaseUrl is required.
What I’ve tried

Deleted node_modules and installed again, tried another browser, also tried npm run build && npm run preview, same white page.

Comment
Is there a .env or .env.example in the repo? pawel_z · edited
no, only .gitignore and the normal files olga_s · edited

3 answers

Marked as helpful by the asker
jb_supa · edited

Your Supabase URL and key aren't in the repo because they live in Lovable's environment, not in git (which is correct).

Create .env (or .env.local) next to package.json:

VITE_SUPABASE_URL=https://yourref.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=eyJ...

Open src/integrations/supabase/client.ts to see the exact variable names your project reads, older Lovable projects use VITE_SUPABASE_ANON_KEY. Values are in Supabase → Project Settings → API. Restart npm run dev after, Vite only reads env files on startup.

And add .env to .gitignore before your next commit.

Comment
It was ANON_KEY in my file. Works now, thanks olga_s · edited
Nice. If you're on Lovable Cloud instead of your own Supabase project, the values are in the Cloud settings, same idea. jb_supa · edited
nadia_r · edited

White page with no visible error is almost always a thrown error before React mounts. Worth keeping the devtools console open by default when you run it locally, it saves a lot of guessing.

Comment
pawel_z · edited

When you deploy it somewhere yourself later, the same variables go into the Vercel/Netlify environment settings, named exactly the same including the VITE_ prefix.

Comment

Related

Launch day and new signups get 'email rate limit exceeded'solved
My app works on localhost, how do I actually put it on the internet?solved
Supabase free project paused and my users couldn't log in all weekend3 ans.
Moving off Lovable to Cursor: can I keep using the same Supabase project?solved
Lovable site on Netlify: every page except home gives 404 when I refreshsolved

Your answer

Sign in to write an answer