How to Deploy Projects on Vercel with a Custom Domain.

You just finished building your web app on your local machine. It runs smoothly on localhost:3000 or localhost:5173, and now you want to take it live on the real internet with your own branded custom domain (like myproject.com or app.yourdomain.com).

Vercel is easily the best hosting platform for modern web applications. Bina kisi server setup ya DevOps ke jhanjhat ke, it gives you automated CI/CD on every git push, instant global Edge CDN routing, and free auto-renewing SSL certificates.

In this guide, I will walk you step-by-step through deploying your project and pointing your custom domain from any registrar (Namecheap, GoDaddy, Cloudflare, Hostinger) with zero downtime.

1 Push Your Code to GitHub

First things first: make sure your codebase is pushed to a remote GitHub repository.

Dhyan rakhna ki aapka .gitignore properly configured ho containing node_modules, .env.local, and build folders (dist/ or .next/).

2 Import the Project to Vercel

1. Head over to vercel.com and log in with your GitHub account.
2. Click the "Add New..." button on your dashboard and select Project.
3. Find your repository from the list and click Import.
4. Configure Project Settings:
   • Framework Preset: Vercel automatically detects Next.js, Vite, React, Astro, or static HTML.
   • Root Directory: Keep it as ./ unless your code lives inside a monorepo subfolder.
   • Environment Variables: Add your Supabase URLs, secret keys, or database URIs under the Environment Variables section.
5. Click Deploy.

In about 30 to 60 seconds, your site will be live on an official preview URL (e.g. your-project.vercel.app).

3 Add Your Custom Domain in Vercel

Now let's replace the default .vercel.app URL with your custom domain name:

1. Open your deployed project dashboard on Vercel.
2. Go to Settings → Domains.
3. Enter your domain name (e.g., yourdomain.com) and click Add.
4. Vercel will prompt you to configure www vs non-www redirects. Select the recommended option: "Add yourdomain.com and redirect www.yourdomain.com to it".

4 Configure DNS Records at Your Registrar

Now open your domain provider's DNS management panel (Namecheap, GoDaddy, Hostinger, or Cloudflare) and add the two standard Vercel DNS records:

5 Verification & SSL Certificate

Once you save the DNS records:

• Go back to the Vercel Domains tab.
• Click Refresh.
• Once DNS is detected, Vercel will show a green checkmark and automatically issue a valid HTTPS certificate.

6 Troubleshooting Common Issues

1. "Invalid Configuration" Conflict

Ye tab hota hai jab registrar pe purane default A records bache reh jaate hain (like GoDaddy or Namecheap parking page IPs). Delete any old duplicate A records for @ and keep only 76.76.21.21.

2. "SSL Generating / Pending"

DNS propagation usually takes 2 to 15 minutes. Thoda patience rakhna, click refresh after a few minutes, and avoid repeatedly deleting and re-adding the domain.

Conclusion

That's all it takes! Your web application is now live on your custom domain with zero-maintenance hosting and automated CI/CD deployments. Every time you push code to GitHub, your production website updates automatically.