A React + Vite e-commerce application.
- Allez sur vercel.com et connectez-vous avec votre compte GitHub.
- Cliquez sur "Add New Project".
- Importez le dépôt
Safinpaydepuis GitHub. - Vercel détecte automatiquement Vite. Laissez les paramètres par défaut :
- Framework Preset :
Vite - Build Command :
npm run build - Output Directory :
dist
- Framework Preset :
- Cliquez sur "Deploy".
Vercel redéploiera automatiquement à chaque push sur la branche main.
Un workflow CI/CD est inclus dans .github/workflows/deploy.yml.
Il se déclenche à chaque push ou pull_request sur main.
Dans votre dépôt GitHub, allez dans Settings → Secrets and variables → Actions et ajoutez :
| Secret | Description |
|---|---|
VERCEL_TOKEN |
Token d'API Vercel (créer ici) |
VERCEL_ORG_ID |
ID de votre organisation Vercel (trouvé dans .vercel/project.json après vercel link) |
VERCEL_PROJECT_ID |
ID du projet Vercel (trouvé dans .vercel/project.json après vercel link) |
# Installer la CLI Vercel
npm install -g vercel
# Lier le projet local au projet Vercel
vercel link
# Les valeurs VERCEL_ORG_ID et VERCEL_PROJECT_ID se trouvent dans :
cat .vercel/project.jsonnpm install
npm run devnpm run build
npm run previewThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
The React Compiler is enabled on this template. See this documentation for more information.
Note: This will impact Vite dev & build performances.
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.