Skip to main content

​
Overview

CEDIS Pedidos requires specific environment variables to connect to your Supabase backend. This guide walks you through configuring your local development environment and understanding the required variables.
Never commit your .env file to version control. The .env file contains sensitive credentials that should remain private.

​
Required Environment Variables

The application requires two essential environment variables to connect to Supabase:
VariableDescriptionExample
VITE_SUPABASE_URLYour Supabase project URLhttps://xxxxx.supabase.co
VITE_SUPABASE_ANON_KEYYour Supabase anonymous/public keyeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
These variables use the VITE_ prefix because the application is built with Vite. This prefix exposes the variables to the client-side code.

​
Local Development Setup

1

Clone the repository

Clone the CEDIS Pedidos repository to your local machine:
git clone https://github.com/AlejandroMartinezG/App_Pedidos_CEDIS.git
cd App_Pedidos_CEDIS
2

Install dependencies

Install all required Node.js dependencies using npm:
npm install
The application requires Node.js to be installed on your system. The key dependencies include:
  • React 19 for the UI framework
  • Vite 6 for build tooling and development server
  • Supabase JS Client for backend connectivity
  • Tailwind CSS for styling
3

Create environment file

Create a .env file in the root directory of the project:
touch .env
Add your Supabase credentials to the .env file:
.env
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
Replace the placeholder values with your actual Supabase credentials obtained from your Supabase project dashboard.
4

Verify configuration

The Supabase client configuration validates that environment variables are set at runtime:
src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

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

if (!supabaseUrl || !supabaseAnonKey) {
    throw new Error('Missing Supabase environment variables. Check .env file.')
}

export const supabase = createClient(supabaseUrl, supabaseAnonKey)
If variables are missing, the application will throw an error on startup.
5

Start development server

Start the Vite development server:
npm run dev
The development server will start on http://localhost:5173 by default (or another port if 5173 is in use).
The Vite configuration enables network access (host: true), allowing you to access the development server from other devices on your local network.

​
Development Configuration

​
Vite Configuration

The application uses a custom Vite configuration (vite.config.ts):
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  server: {
    host: true, // Permite conexiones desde otros dispositivos en la red
  },
})
Key features:
  • Path alias: @/ maps to ./src/ for cleaner imports
  • Network access: Development server accessible on local network
  • React plugin: Fast Refresh for instant HMR
  • Tailwind CSS: Vite plugin for Tailwind v4

​
NPM Scripts

Available scripts from package.json: 
npm run dev
# Starts Vite development server with HMR

​
Obtaining Supabase Credentials

To get your Supabase environment variables:
1

Access project dashboard

Log in to your Supabase dashboard at https://app.supabase.com
2

Navigate to project settings

Select your project and go to Settings → API
3

Copy credentials

Copy the following values:
  • Project URL: Use this for VITE_SUPABASE_URL
  • anon/public key: Use this for VITE_SUPABASE_ANON_KEY
Do not use the service_role key in your frontend application. This key has elevated permissions and should only be used in secure backend environments.

​
Security Best Practices

Environment Variable Security
  • Never commit .env files to version control
  • Use .gitignore to exclude .env files
  • Rotate keys if accidentally exposed
  • Use Row Level Security (RLS) in Supabase to protect data
  • The anon key is safe for client-side use when RLS is properly configured

​
Row Level Security

The application relies on Supabase Row Level Security (RLS) policies to protect data. Even though the anon key is exposed in the client-side code, RLS ensures:
  • Users can only access data they’re authorized to see
  • Sucursales (branches) can only view their own orders
  • Admins have elevated permissions across all data
  • Database operations are validated server-side

​
Troubleshooting

​
Missing Environment Variables

Error: Missing Supabase environment variables. Check .env file. Solution: Ensure your .env file exists in the project root and contains both required variables.

​
Connection Errors

Error: Cannot connect to Supabase Solution:
  • Verify your VITE_SUPABASE_URL is correct
  • Check that your Supabase project is active
  • Ensure your API key hasn’t been revoked

​
Build Errors

Error: TypeScript compilation errors Solution: 
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

# Run TypeScript compiler
npm run build

​
Next Steps

Once your local environment is configured:
  1. Configure Supabase - Set up your database schema and RLS policies
  2. Deploy to Vercel - Deploy your application to production

Build docs developers (and LLMs) love

Get started for freeTalk to us