Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ProyectoFerretek/FerreMarket/llms.txt

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

FerreMarket is a Vite-powered Single Page Application (SPA) that compiles down to a folder of static assets — HTML, JavaScript bundles, and CSS — that can be served from any static hosting provider. The repository includes a vercel.json at the project root that enables zero-configuration deployment to Vercel, the recommended host for this project. This page covers the full production deployment workflow from running the build command to configuring environment variables on the host.

Building for Production

The production build is handled entirely by Vite. Run the following command from the project root:
npm run build
Vite compiles and tree-shakes the application, outputs minified JavaScript chunks, hashes asset filenames for long-term caching, and writes everything to the dist/ directory. A successful build prints a summary of each emitted chunk and its gzipped size. Before pushing dist/ to a host you can verify the build locally using Vite’s built-in static preview server:
npm run preview
This serves the contents of dist/ on http://localhost:4173 using the same routing rules that the production host applies. Use this step to catch runtime errors that only appear in the optimised bundle before going live.
The production build will fail immediately if VITE_SUPABASE_URL or VITE_SUPABASE_ANON_KEY are missing or empty. Vite inlines all import.meta.env.VITE_* values at compile time — a missing variable resolves to undefined, causing the Supabase client initialisation to throw before the app can render.

Vercel Deployment

The repository includes a vercel.json that configures SPA routing so that Vercel serves index.html for every incoming URL path, allowing React Router to handle navigation entirely on the client side.
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}
With this file present, deploying to Vercel requires no additional configuration. The simplest approach is to connect your Git repository directly from the Vercel dashboard:
1

Import the repository

Go to vercel.com/new, click Import Git Repository, and select the FerreMarket repo.
2

Configure the project

Vercel detects Vite automatically. Confirm the following settings:
  • Framework Preset: Vite
  • Build Command: npm run build
  • Output Directory: dist
  • Install Command: npm install
3

Add environment variables

Before clicking Deploy, add all required environment variables (see the next section).
4

Deploy

Click Deploy. Vercel runs the build and publishes the dist/ output to a global CDN. Every subsequent push to the production branch triggers a new deployment automatically.
Enable Vercel’s Preview Deployments to get a unique URL for every pull request. This gives you a fully isolated staging environment — with its own Supabase project or a dedicated staging schema — where you can review changes before merging to production without any extra infrastructure cost.

Setting Environment Variables on Vercel

Never commit your .env file to source control. Instead, add each variable through the Vercel dashboard:
  1. Open your project on vercel.com.
  2. Navigate to Settings → Environment Variables.
  3. Add each of the following variables, selecting the target environments (Production, Preview, Development) as appropriate.
VariableRequired
VITE_SUPABASE_URL✅ Required
VITE_SUPABASE_ANON_KEY✅ Required
VITE_CLOUDFLARE_CDN_URL✅ Required for image display
VITE_CLOUDFLARE_WORKERS_URL✅ Required for image uploads
VITE_CLOUDFLARE_WORKERS_API_KEY✅ Required for image uploads
VITE_AUTH0_DOMAIN_NAMEOptional (legacy)
VITE_AUTH0_CLIENT_IDOptional (legacy)
After adding or updating any variable, trigger a fresh deployment from Deployments → Redeploy so the new values are inlined into the bundle.

SPA Routing

React Router operates entirely in the browser — it intercepts link clicks and the browser History API to transition between pages without making a request to the server. This works seamlessly while navigating within the app, but breaks when a user lands directly on a deep link (e.g. https://your-store.vercel.app/admin/ventas) or refreshes a page that isn’t the root. Without any server configuration, the host looks for a file at /admin/ventas/index.html, finds nothing, and returns a 404. The vercel.json rewrite rule prevents this by instructing Vercel to return index.html (mapped to /) for every request path, regardless of whether a matching file exists in dist/. React Router then reads the URL and renders the correct component.

Other Static Hosts

If you deploy to a different host, you must configure the equivalent SPA fallback behaviour. Netlify — add a _redirects file to the public/ directory (so Vite copies it to dist/):
/* /index.html 200
Cloudflare Pages — add a _redirects file to public/ with the same content as Netlify above. Cloudflare Pages processes it identically. Apache — add or update .htaccess in the document root:
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
Nginx — update the location / block in your server configuration:
location / {
  root /var/www/ferremarket/dist;
  index index.html;
  try_files $uri $uri/ /index.html;
}

Supabase Edge Functions

FerreMarket relies on three Supabase Edge Functions for user management operations that require admin-level privileges — actions that cannot be performed safely from the client using the anon key. These functions must be deployed to your Supabase project before the admin user management features will work in production.
FunctionPurpose
create-userCreates new authentication users with admin privileges via the Supabase Admin API, bypassing the public signup flow.
delete-userPermanently deletes an authentication user and all associated data using the Admin API.
send-password-recovery-emailTriggers a password recovery email for a given user account via the Supabase Auth admin endpoint.
Deploy each function using the Supabase CLI:
supabase functions deploy create-user
supabase functions deploy delete-user
supabase functions deploy send-password-recovery-email
Make sure you are logged in (supabase login) and have linked your local project to the remote Supabase project (supabase link --project-ref <project-ref>) before running the deploy commands.

Build docs developers (and LLMs) love