Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/aluxey/E-Commerce/llms.txt

Use this file to discover all available pages before exploring further.

The React client is built with Vite 7 and React 19, and can be deployed to Netlify with automatic builds and deployments.

​
Prerequisites

  • Netlify account
  • GitHub repository connected to Netlify
  • Environment variables configured in Netlify dashboard

​
Deployment Steps

1

Configure Environment Variables

Navigate to your Netlify site settings and add the following environment variables:
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
VITE_SUPABASE_KEY=your-anon-key
VITE_STRIPE_PUBLISHABLE_KEY=pk_live_...
VITE_API_URL=https://your-api.com
VITE_API_URL_PROD=https://your-api.com
All Vite environment variables must be prefixed with VITE_ to be accessible in the browser.
2

Review Build Configuration

The project includes a netlify.toml file that configures the build settings:
netlify.toml
[build]
  base = "client"
  command = "npm install && npm run build"
  publish = "dist"

[context.production.environment]
  SECRETS_SCAN_OMIT_KEYS = "VITE_SUPABASE_URL,VITE_SUPABASE_KEY,VITE_SUPABASE_ANON_KEY,VITE_STRIPE_PUBLISHABLE_KEY,VITE_API_URL,VITE_API_URL_LOCAL,VITE_API_URL_PROD"
This configuration:
  • Sets the base directory to client/
  • Runs npm install && npm run build for builds
  • Publishes the dist/ directory
  • Allows Vite environment variables in secrets scanning
3

Deploy via Git Push

Netlify automatically deploys when you push to your connected branch:
git add .
git commit -m "Update frontend"
git push origin main
Netlify will:
  1. Detect the push
  2. Run the build command
  3. Deploy the dist/ folder
  4. Provide a preview URL and production URL
4

Verify Deployment

Check the Netlify deploy logs for:
✓ Build succeeded
✓ Deploying to production
✓ Site is live
Visit your site URL to verify the deployment.

​
Manual Deployment

# Install Netlify CLI
npm install -g netlify-cli

# Login to Netlify
netlify login

# Deploy from client directory
cd client
npm install
npm run build
netlify deploy --prod

​
Build Scripts

The client/package.json includes these build-related scripts:
package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint ."
  }
}
ScriptPurpose
devRun development server on port 5173
buildCreate production build in dist/
previewPreview production build locally
lintRun ESLint for code quality

​
Vite Configuration

The Vite configuration at client/vite.config.js includes:
vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { fileURLToPath, URL } from 'node:url';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

​
Troubleshooting

Solution: Ensure all VITE_* variables are set in Netlify’s environment variables section, not in a .env file.Navigate to: Site settings → Environment variables → Add a variable
Possible causes:
  1. Check browser console for API connection errors
  2. Verify VITE_API_URL points to the correct backend
  3. Ensure Supabase credentials are correct
Debug: Check Netlify function logs and browser DevTools console.
Solution: Verify the publish directory in netlify.toml is set to dist (not build or public).The Vite default output directory is dist/.

​
Production Checklist

  • All environment variables configured in Netlify
  • API URL points to production backend
  • Stripe publishable key is for live mode
  • Supabase project is in production mode
  • Custom domain configured (optional)
  • HTTPS enabled (automatic on Netlify)
  • Build logs show no errors
  • Test user flows: catalog, cart, checkout

​
Next Steps

Deploy Backend

Set up the Express API server for production

Database Migrations

Run database migrations on Supabase

Build docs developers (and LLMs) love

Get started for freeTalk to us