Web Development

How to Deploy Your Website to Vercel and Netlify

A beginner-friendly guide to deploying a React, Vite, or static website on Vercel and Netlify, including build settings, domains, redirects, environment variables, and SEO checks.

By Abhijeet Kumar • June 2026 • 8 min read

Building a website is only half of the journey. The real moment comes when your site goes live and people can open it from anywhere in the world. For most modern frontend projects, especially React, Vite, Next.js, and static websites, two of the easiest platforms are Vercel and Netlify.

Both platforms can connect to your GitHub repository, run your build command, publish your production files, give you preview links, and let you connect a custom domain. This guide explains the complete process in a simple way so you can deploy confidently.

Before You Deploy

Before uploading your website to any hosting platform, make sure the project runs locally. A clean local build saves you from confusing deployment errors later.

  • Run npm install to install dependencies.
  • Run npm run dev to test the site locally.
  • Run npm run build to generate the production build.
  • Check the output folder. For most Vite projects, it is dist.
  • Make sure your code is pushed to GitHub, GitLab, or Bitbucket.

For a typical Vite React site, the important deployment settings are:

Build command: npm run build
Output directory: dist
Install command: npm install

How to Deploy Your Site on Vercel

Vercel is popular for frontend apps because it works smoothly with Git and creates automatic preview deployments for commits and pull requests. Vercel also supports file-based project configuration through vercel.json, which is useful for redirects, rewrites, clean URLs, headers, and output settings.

Step 1: Push Your Project to GitHub

Create a GitHub repository and push your project code. Your repository should include the main project files like package.json, src, public, and any configuration files. Do not upload node_modules; the platform installs dependencies during deployment.

Step 2: Import the Repository in Vercel

Open Vercel, sign in, and choose Add New Project. Select your Git provider, choose the repository, and import it. Vercel usually detects popular frameworks automatically, but you should still check the build settings.

Step 3: Set Build Settings

For a Vite React website, use these settings:

  • Framework preset: Vite
  • Build command: npm run build
  • Output directory: dist
  • Install command: npm install

If your site uses environment variables, add them in the Vercel project settings before deploying. For frontend Vite apps, public variables usually start with VITE_.

Step 4: Add SPA Rewrites if Needed

If your React app uses client-side routes such as /blog, /contact, or /dashboard, direct visits to those URLs must still serve your app. You can handle that with a rewrite in vercel.json:

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

This is important for React Router apps. Without it, a route may work when clicked inside the app but return a 404 when opened directly or crawled by Google.

Step 5: Deploy

Click Deploy. Vercel will install dependencies, run the build command, and publish the output directory. After deployment, you will get a live URL. Every future push to the production branch can trigger a new deployment automatically.

How to Deploy Your Site on Netlify

Netlify is another excellent platform for static websites and frontend apps. It offers Git-based deployments, preview deployments, manual drag-and-drop deploys, Netlify CLI, redirects, forms, functions, and custom domains.

Step 1: Connect Your Git Repository

Open Netlify, choose Add new site, then import from Git. Select GitHub, GitLab, or Bitbucket, then choose your website repository.

Step 2: Set Build Settings

For a Vite React site, use:

  • Build command: npm run build
  • Publish directory: dist
  • Base directory: leave empty unless your project is inside a subfolder

After saving these settings, Netlify will run the build and publish the output folder whenever you push changes to your connected Git repository.

Step 3: Add SPA Redirects for React Router

For client-side routing, create a file named _redirects inside your public folder. Add this rule:

/* /index.html 200

When Vite builds the project, the _redirects file is copied into dist. This tells Netlify to serve the React app for all routes instead of returning 404 pages for direct visits.

You can also configure redirects through netlify.toml:

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

Step 4: Deploy

Click Deploy site. Netlify will build and publish your project. You will receive a temporary Netlify subdomain first, and later you can connect your own domain.

Connecting a Custom Domain

After deployment, the next step is connecting a professional domain such as yourbrand.com. Both Vercel and Netlify provide DNS instructions inside the domain settings.

  • Add your domain in the hosting dashboard.
  • Update DNS records at your domain registrar.
  • Choose one preferred version: https://example.com or https://www.example.com.
  • Redirect the non-preferred version to the preferred version.
  • Wait for SSL to become active.

For SEO, do not try to index every version of your website. Google should index one clean canonical version. The other versions should redirect to it.

Important SEO Checks After Deployment

A website can be live but still not ready for search engines. Before submitting your site to Google Search Console, check these basics:

  • Your homepage returns status 200.
  • Your important routes do not return 404 on direct visit.
  • Your sitemap is available at /sitemap.xml.
  • Your robots file is available at /robots.txt.
  • Each important page has a unique title and meta description.
  • Each page has the correct canonical URL.
  • Your site redirects from HTTP to HTTPS.
  • Your preferred domain version is consistent everywhere.

Vercel vs Netlify: Which One Should You Choose?

Both platforms are strong. The right choice depends on your project and workflow.

Choose Vercel if:

  • You are building with Next.js or a React-focused stack.
  • You want fast preview deployments for frontend teams.
  • You prefer simple project configuration through vercel.json.
  • You want a clean developer experience for modern web apps.

Choose Netlify if:

  • You are deploying static sites, Vite apps, or Jamstack projects.
  • You want simple drag-and-drop deployment options.
  • You use Netlify Forms, Functions, or _redirects.
  • You want an easy dashboard for static hosting and site management.

Common Deployment Problems and Fixes

Problem: Site Works Locally but Fails During Build

Run npm run build locally first. If it fails locally, it will usually fail on the hosting platform too. Fix missing imports, TypeScript errors, environment variables, or package issues before deploying.

Problem: Direct Routes Show 404

This is common in React Router apps. Add Vercel rewrites or Netlify redirects so all app routes serve index.html.

Problem: Environment Variables Are Undefined

Add environment variables in the hosting dashboard. For Vite frontend variables, use the VITE_ prefix and rebuild the site after adding them.

Problem: Old Website Still Appears

Clear cache, check your latest deployment, and confirm your domain points to the correct platform. DNS changes can also take time to update globally.

Final Deployment Checklist

  • Push latest code to GitHub.
  • Run npm run build successfully.
  • Set build command to npm run build.
  • Set output or publish directory to dist for Vite.
  • Add redirects or rewrites for client-side routing.
  • Add environment variables.
  • Connect the custom domain.
  • Submit sitemap in Google Search Console.
  • Request indexing for important pages.

Conclusion

Deploying a website to Vercel or Netlify is simple once you understand the core flow: push your code, set the build command, publish the output folder, configure redirects, connect your domain, and check SEO basics. For most Vite React sites, the magic settings are npm run build and dist.

If your goal is a professional business website, deployment should not be treated as the final button click. It is part of the full launch process: performance, routing, domain setup, indexing, analytics, and future updates all matter. A clean deployment gives your website a stronger foundation for users and search engines.

Official References