> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/CKoldo/Vacaciones-front/llms.txt
> Use this file to discover all available pages before exploring further.

# Deploy to Netlify

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

<Note>
  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.
</Note>

## Prerequisites

* A [Netlify](https://netlify.com) account
* The project repository hosted on GitHub, GitLab, or Bitbucket
* A running, publicly accessible backend API

## Deploy steps

<Steps>
  <Step title="Connect your repository">
    1. Log in to [Netlify](https://app.netlify.com) 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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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` |

    <Warning>
      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.
    </Warning>
  </Step>

  <Step title="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.
  </Step>
</Steps>

## 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:

```toml theme={null}
[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**.