How to Inherit .env in a Vite + Supabase Project

Introduction

When creating a new Vite project (e.g., type-class1),
there were instances where I wanted to reuse Supabase environment variables previously set up in an older project (e.g., react1). Therefore, I'll summarize how to reuse those previously configured Supabase environment variables.

Problem

Solution

1. Locate .env in react1

First, check if the old project contains a .env file.

ls -a ~/workspace/react1

If .env appears in the output, it's present.
Note: .env is a file, not a folder, so cd .env won't work.

2. Verify Contents

Use the following command to view its contents:

cat ~/workspace/react1/.env

Example output

VITE_SUPABASE_URL=https://abcd1234.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6...

3. Check supabaseClient.js

supabaseClient.js should be configured to read values from .env.

import { createClient } from ‘@supabase/supabase-js’

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

This makes Supabase available in new projects too.

2. Checking the Contents

Use the following command to view the contents:

cat ~/workspace/react1/.env

Example Output

VITE_SUPABASE_URL=https://abcd1234.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6...

---

Conclusion

Check contents using cat or nano

Copy to a new project for immediate reuse

supabaseClient.js retrieves values using import.meta.env