Cómo heredar .env en Vite + Supabase

Como heredar .env en un proyecto Vite + Supabase

Cuando inicias un proyecto Vite nuevo, por ejemplo type-class1, es habitual querer reutilizar las variables de entorno de Supabase que ya configuraste en un proyecto anterior, por ejemplo react1. A continuación verás cómo heredar esas variables de forma segura y rápida, junto con buenas prácticas para entornos locales y de producción.

Paso 1. Localiza el archivo .env del proyecto antiguo

Comprueba si existe en la ruta del proyecto anterior. Ejecuta en tu terminal un ls -a en la carpeta del proyecto, por ejemplo ls -a ~/workspace/react1. Si aparece .env en la lista, está presente. Importante .env es un archivo, no una carpeta, por lo que no podrás entrar con cd .env.

Paso 2. Verifica el contenido

Visualiza su contenido con cat ~/workspace/react1/.env y confirma que tienes al menos las siguientes claves con el prefijo VITE

VITE_SUPABASE_URL=https://abcd1234.supabase.co

VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6

Paso 3. Copia .env al proyecto nuevo

Copia el archivo al directorio raíz del nuevo proyecto, por ejemplo cp ~/workspace/react1/.env ~/workspace/type-class1/.env. Reinicia el servidor de desarrollo de Vite para que cargue los cambios.

Paso 4. Configura el cliente de Supabase

En el nuevo proyecto crea un archivo supabaseClient.js y usa las variables import.meta.env.VITE_SUPABASE_URL e import.meta.env.VITE_SUPABASE_ANON_KEY para inicializar el cliente con createClient. Asegúrate de que todas las variables que el frontend de Vite debe leer empiezan por VITE, de lo contrario no estarán disponibles en el navegador.

Paso 5. Reglas clave de Vite y variables de entorno

Usa el prefijo VITE para exponer sólo las variables seguras al frontend. La clave pública de Supabase Anon Key puede exponerse en el cliente, pero nunca la Service Role. Si necesitas secretos que no deben llegar al navegador, colócalos en el backend o en funciones serverless sin el prefijo VITE y consúmelos únicamente del lado servidor.

Paso 6. Diferencia de archivos por entorno

Puedes utilizar .env para valores por defecto y .env.local para valores locales que no se deben versionar. Además, Vite soporta .env.development y .env.production para separar configuraciones según el modo. Recuerda añadir .env.local a tu .gitignore.

Paso 7. Comprobación rápida

Inicia tu app y verifica que import.meta.env.VITE_SUPABASE_URL devuelve el valor esperado. Realiza una operación simple con el cliente de Supabase para confirmar la conexión, por ejemplo un fetch de una tabla de prueba.

Buenas prácticas

No subas .env a tu repositorio si contiene secretos. Gestiona las variables de producción desde el panel de tu proveedor de despliegue. Documenta qué claves necesita cada entorno. Usa nombres claros y consistentes y evita duplicidades. Mantén separadas las claves públicas del cliente y las privadas del servidor.

¿Por qué esto importa para tu negocio

Una correcta gestión de variables de entorno acelera tus despliegues y reduce errores en aplicaciones a medida y software a medida, especialmente cuando integras servicios cloud, autentificación y bases de datos en tiempo real como Supabase. En Q2BSTUDIO diseñamos arquitecturas robustas, seguras y escalables para proyectos con necesidades reales de negocio y crecimiento.

Cómo te ayudamos desde Q2BSTUDIO

Somos una empresa de desarrollo con foco en aplicaciones a medida, inteligencia artificial e ia para empresas, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, además de automatización de procesos y diseño de agentes IA. Si buscas un partner técnico que domine el ciclo completo, desde la definición hasta la puesta en producción y monitorización, podemos acompañarte.

Si estás planificando un nuevo producto digital o quieres modernizar tu stack, podemos crear una base sólida con Vite, Supabase y pipelines de CI CD seguros. Conoce más sobre nuestro enfoque en desarrollo de software y aplicaciones a medida y cómo desplegamos infraestructura escalable en servicios cloud AWS y Azure.

Resumen rápido

Localiza .env en el proyecto antiguo, verifica su contenido y copia el archivo al proyecto nuevo. Configura supabaseClient.js para leer import.meta.env y usa el prefijo VITE en todas las variables del frontend. Gestiona entornos con .env.local y evita versionar secretos. Con esto tendrás tu proyecto Vite + Supabase funcionando en minutos con una configuración limpia y mantenible.