I want to create an env variable called supabase_url how can i create it and use it in front end
I want to create an env variable called supabase_url how can i create it and use it in front end
1 Reply
Hi @Mohan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To create and use an environment variable called
- Name your variable
supabase_url in your Wasp app's frontend, follow these steps:
1. Define the Variable with the Correct Prefix
Client environment variables in Wasp must be prefixed with REACT_APP_ to be accessible in the frontend. So, you should name your variable REACT_APP_SUPABASE_URL.
#### In Development
Create a file named .env.client in the root of your Wasp project (if it doesn't already exist), and add your variable:
This file is automatically gitignored by default and is only used in development. You can then access this variable in your frontend code using:
or in TypeScript:
Docs: Project Env Variables
Docs: Defining Env Vars in Development
#### In Production
Client env vars are embedded at build time. To set the variable for production, provide it when running the build command:
This will embed the value into your frontend code, making it accessible via import.meta.env.REACT_APP_SUPABASE_URL in your client code. Remember, client env vars are public, so do not store secrets in them.
Docs: Defining Env Vars in Production
---
Summary:- Name your variable
REACT_APP_SUPABASE_URL.
- Set it in .env.client for development.
- Pass it as an environment variable to the build command for production.
- Access it in your frontend code with import.meta.env.REACT_APP_SUPABASE_URL.
If you need to use this variable in the backend/server, you would not use the REACT_APP_ prefix and would set it in .env.server instead.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Mohan, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?