Deployment

Vercel Configuration (vercel.json)

This project includes a vercel.json file in the root directory. This configuration is essential for a Single Page Application (SPA).

The Problem: By default, if a user navigates directly to https://epiform.vercel.app/procedures/bank, the Vercel server looks for a file named bank.html. Since this file does not exist (everything is rendered by React inside index.html), the server would return a 404 Error.

The Solution: Our configuration tells Vercel to rewrite all incoming requests to /index.html, allowing React Router to handle the URL interpretation on the client side.

File Content:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

Deployment Pipeline (CI/CD)

We use Vercel's automatic Git integration for Continuous Deployment.

1. Trigger: Whenever code is pushed to the main branch on GitHub.
2. Build: Vercel detects the commit and runs the build command.
3. Deploy: The resulting dist/ folder is published to the edge network.
4. Live: The changes are live globally within seconds.

Project Settings

If you are setting this up on a new Vercel account, ensure these settings are configured in the Project Dashboard:

Environment Variables

Since this is a client-side application without a backend, we generally do not use secret keys.

However, if you add integrations later (e.g., Analytics), add them in the Vercel Dashboard under Settings > Environment Variables.

Warning

Do not commit .env files to GitHub.

Manual Deployment (CLI)

You can also deploy directly from your terminal using the Vercel CLI (useful for testing local branches).

# 1. Install CLI
npm i -g vercel

# 2. Login
vercel login

# 3. Deploy Preview
vercel

# 4. Deploy to Production
vercel --prod