Deploy a React site to Vercel from GitHub.

What you need before you start

Check these three things first. Most failed first deployments come from skipping one of them.

• The project builds locally: running npm run build finishes without errors and produces a dist folder.
• The code is in a GitHub repository you can admin, private or public.
• A Vercel account signed in with GitHub, so Vercel can see your repositories.
• Access to the DNS settings for your domain, if you want it on a custom domain.

Import the repository

Importing takes a few minutes. Work through it in this order so the build settings are right the first time.

1. In Vercel, choose Add New, then Project, and pick the repository. If it isn't listed, adjust the Vercel GitHub app's repository access.
2. Check the framework preset. For Vite it should detect Vite, with a build command of npm run build and an output directory of dist.
3. Add any environment variables the build needs. In a Vite app, only variables prefixed with VITE_ are exposed to browser code, and anything exposed to the browser is public.
4. Deploy. The first build gives you a .vercel.app URL to check before touching DNS.

Make the settings explicit with vercel.json

The dashboard settings work, but a vercel.json file in the repository makes the build reproducible and reviewable in pull requests. This is the file we use for a single-page React app.

{
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }],
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
    }
  ]
}

The rewrite sends every unknown path to the app shell so client-side routes resolve, and the header caches the hashed build files for a year. Vercel serves real files before applying rewrites, so the sitemap, robots.txt and images are unaffected.

How deployments work from here

Once the project is connected, every push to GitHub triggers a deployment. Which kind depends on the branch.

• Pushing to the production branch, usually main, deploys to production.
• Pushing any other branch or opening a pull request creates a preview deployment with its own URL.
• Each deployment is immutable, so rolling back is a matter of promoting an earlier one.

Connect your domain

Add the domain in Vercel first, then point your DNS at it. Both versions of the address should end up on one canonical URL.

1. In the project, open Settings, then Domains, and add both the bare domain and the www version.
2. Choose which one is primary. The other redirects to it.
3. Add the DNS records Vercel shows you at your registrar. Use the exact values from the dashboard rather than copying them from an article.
4. Wait for the records to verify. Vercel issues the SSL certificate automatically.

Check the live result

curl -sI https://www.example.com/
curl -sI https://www.example.com/some/inner/page

Both should return 200. If inner pages return 404, read the next guide in this series.