Lin / frontend /vite.config.js
Zelyanoth's picture
feat: Configure Vite to inject Supabase env vars directly for Hugging Face compatibility
7039966
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
// Charge les variables d'environnement pour le mode actuel ('development', 'production', etc.)
// Cela inclut les variables définies dans l'environnement d'exécution (comme sur Hugging Face)
const env = loadEnv(mode, process.cwd(), '');
// --- Vérification des variables critiques pour le frontend ---
if (!env.VITE_SUPABASE_URL) {
console.warn('⚠️ Variable d\'environnement VITE_SUPABASE_URL non définie. Utilisation d\'une valeur par défaut pour le développement.');
}
if (!env.VITE_SUPABASE_ANON_KEY) {
console.warn('⚠️ Variable d\'environnement VITE_SUPABASE_ANON_KEY non définie. Utilisation d\'une valeur par défaut pour le développement.');
}
// --- Configuration de base ---
const config = {
plugins: [react({
jsx: 'transform',
jsxFactory: 'React.createElement',
jsxFragment: 'React.Fragment',
})],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
server: {
port: 3000,
host: 'localhost', // Explicitly bind to localhost
proxy: {
'/api': {
target: 'http://localhost:5000',
changeOrigin: true,
secure: false,
// Configure proxy to handle WebSocket connections if needed
ws: true,
// Configure proxy to handle CORS headers
configure: (proxy, _options) => {
proxy.on('error', (err, _req, _res) => {
console.log('proxy error', err);
});
proxy.on('proxyReq', (proxyReq, req, _res) => {
console.log('Sending Request to the Target:', req.method, req.url);
});
proxy.on('proxyRes', (proxyRes, req, _res) => {
console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
});
},
},
// Proxy for WebSocket connections (if needed for real-time features)
'/ws': {
target: 'http://localhost:5000',
ws: true,
changeOrigin: true,
secure: false,
},
},
},
build: {
outDir: 'dist',
sourcemap: true,
// Configure build for production
rollupOptions: {
output: {
manualChunks: {
// Create separate chunks for vendor libraries
vendor: ['react', 'react-dom', 'react-router-dom', 'react-redux'],
},
},
},
// Ensure JSX is processed during build
commonjsOptions: {
include: [/node_modules/],
},
},
// --- Injection directe des variables dans le code bundle ---
define: {
// Ces variables seront remplacées par leurs valeurs littérales dans le bundle JS
__VITE_SUPABASE_URL__: JSON.stringify(env.VITE_SUPABASE_URL || 'https://your-project.supabase.co'),
__VITE_SUPABASE_ANON_KEY__: JSON.stringify(env.VITE_SUPABASE_ANON_KEY || 'your-anon-key'),
// Conserver l'ancienne définition si elle est utilisée ailleurs
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
},
};
return config;
});