Deploy to Netlify

Deploy the Módulo de Registro de Vacaciones frontend to Netlify in a few steps.

The backend API server must be publicly accessible on the internet before you deploy the frontend. The deployed app will make requests to the URL you set in VITE_API_URL — if the backend is unreachable, all data operations will fail.

Prerequisites

• A Netlify account
• The project repository hosted on GitHub, GitLab, or Bitbucket
• A running, publicly accessible backend API

Deploy steps

1. Connect your repository

   1. Log in to Netlify and click Add new site → Import an existing project.
   2. Choose your Git provider and authorize Netlify to access your repositories.
   3. Select the Vacaciones-front repository.
2. Configure build settings

   Netlify reads netlify.toml from the repository root and pre-fills the build settings automatically. Confirm the following values are set:

   Setting	Value
   Build command	npm run build
   Publish directory	dist

   npm run build runs vite build, which compiles the app into the dist folder.

3. Set environment variables

   Before deploying, add your production environment variables so Vite can embed them in the build.

   1. In the Netlify site settings, go to Site configuration → Environment variables.
   2. Click Add a variable and add the following:

   Key	Value
   VITE_API_URL	Your production backend URL, e.g. https://api.yourapp.com

   Environment variables must be set before triggering a build. Vite reads them at build time, not at runtime. If you change a variable, you must redeploy.

4. Deploy the site

   Click Deploy site. Netlify will clone the repository, install dependencies, run npm run build, and publish the dist folder.

   You can monitor build progress in the Deploys tab of your site dashboard.

SPA redirect rule

React Router handles navigation on the client side. Without a redirect rule, navigating directly to a URL such as /vacaciones/list returns a 404 from Netlify’s CDN because no file exists at that path.

The netlify.toml in the repository root includes the required redirect rule:

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

The status = 200 (rewrite) means Netlify serves index.html for every route while keeping the original URL in the browser. React Router then renders the correct page. No manual configuration is needed — the file is committed to the repository and Netlify picks it up automatically.

Subsequent deploys

Every push to the branch you connected will trigger a new build and deploy automatically. To change the branch or add a deploy preview for pull requests, go to Site configuration → Build & deploy → Continuous deployment.