Disclaimer: I only got this working locally and didn't feed this back to Lovable so please read this with caution. I plan to create another post if I got it actually loading back to Lovable. Also due to the nature of work, this post will be bit technical. Also this is NO in shape or form that I'm saying I'm moving away from Lovable. I still love it but I started to feel the need to have local environment for isolating production-like environment from development.
First, getting project to run locally is surprisingly simple (assuming you already have front-end dev environment like node)
Here is the 4 easy steps
step 1: clone repo locally (and create branch as necessary)
step 2: npm install
step 3: npm run dev
step 4: hit http://localhost:8080
so yeah, branching is EASY, right? Well, at this point, I am still using same Supabase instance which is production-like environment so I still haven't solve the problem of "how can I safely make changes, without impacting user data" but it's a good start!
So I continue my journey into setting up Supabase locally (and this, I didn't take good note so I might miss one or two steps but hopefully whatever I didn't catpure is not that hard) There are few gotcha and I wanted to write this article to hopefully to save someone bit of time (it cost me half day - yeah, I'm bit slow)
First, I'm using Macbook Pro (M1) and as I said I have generally frontend development set up so depends on how clean slate you are, you might need more tools (like even git, if you never work locally, you might need git CLI etc.)
Anyway, I want to cover:
- Setting up Supabase CLI and Docker Desktop
- Getting data from your production-like database
- Getting Edge functions
- Setting up your secrets
Setting up Supabase CLI and Docker Desktop
You need to get supabase CLI and when you run supabase start for the first time and if you don't have Docker Desktop, it should instruct you to download from https://docs.docker.com/desktop. Make sure to choose one for your OS (for me I choose Apple Silicon) Then when you run supabase start again (btw, you should run this at your project root), it might take bit of time but it should give you console output that it has started and you can check if it is in fact up and running by hitting http://localhost:54323. You see somewhat familiar GUI and feel like "wow, that wasn't too bad!" well, let's see.
Getting data from your production-like database
First thing you realize is, it contains nothing - no tables, no data - of course it doesn't as if it does something is seriously wrong. For me, because I have Pro it create nightly backup - so all I need to do is go to Backups -> from Scheduled backups, click "Download" from the most recent ones, it download file (let's say data-backup.gz) You can extract this file (should create file data-bacup) then run command:
psql -h 127.0.0.1 -p 54322 -U postgres -f data-backup
if everything is good, it should run bunch of query and insert tables and data for you. Still not too bad :)
Getting Edge functions
Here, I struggle - I thought maybe Edge functions are not loaded properly, I was getting CORS then 404 then 500 ... man, this is mess - good news is because Lovable already keep the copy of Edge functions in the way that Supabase expect, this should not be an issue so you can skip to next section (I burned so many time here) Basically the reason why your Edge function is NOT working is because of not be able to load secrets! Also another gotcha is, when you set up Supabase locally you will NOT see Edge function inside GUI (under Edge Functions -> Functions so don't panic if you don't see it)
Setting up your secrets
We all know we can create .env file, right? And depends on where you look for info (for me, I was rendezvous with Gemini Code Assist and Chat GPT interchangeably), it might tell you to create .env file under /supabase. It seem to be all good until when you run no matter what you do, it won't load your .env file. You might be asked to change it to .env.local - or you might be asked to create docker-compose.override.yml or even asked to eject supabase docker with "supabase eject" (btw, there is no such command lol)
Solution? Just put .env file under /supabase/functions and ... that's it! After this, assuming you have all the secret values configured, I can make call to Open AI API, I can get to Stripe Sandbox, yeah, my app was functional after that, fully locally.
One last thing is, when you set up .env file locally do NOT attempt to copy value you set in production-like Supabase - as that is encrypted value and won't work - you need to get the API key value from Open AI and/or Stripe and set its raw text value. So needless to say do NOT check this file in Git unless you want to be super generous and let other people use your key - you can simply just add
.env
.env.local
to your .gitignore.
When I reflect back, I think I should do quick Google myself to find the issue sooner (I got too comfortable talking to various AI engine) but in the end I got what I needed so I'm happy. It was interesting how almost every AI telling me "sorry, this must be frustrating ..." but honestly development we used do was full of this - one time I stuck same problem for 2 full weeks and I have to be OK with it. So half day troubleshooting is not that bad and I feel that's how I learn.
Having said that, hopefully this article can save bit of time for another (not sure if this article get ever read by someone, maybe other than my colleagues and few people that is keen enough to click link that I plan to post in Circle) - happy coding everyone!