Skip to main content
Deployment 5 min read Beginner

Deploy a React App to Vercel with Custom Domain

Step-by-step guide to deploying your React application to Vercel, connecting a free is-pro.dev subdomain, and configuring environment variables for production.

Written by Mayank Baswal

Founder of is-cool-me · DNS & Platform Infrastructure

Mayank Baswal maintains the is-cool-me platform and writes technical guides focused on DNS configuration, subdomain infrastructure, SSL troubleshooting, deployment workflows, and platform reliability.

GitHub Profile Contact
Reviewed by is-cool-me Technical Review

Introduction

Vercel is a premier deployment platform for frontend applications, offering seamless Git integration, automatic SSL, and a global edge network. When you pair it with a free is-pro.dev subdomain, you get a production-grade React app deployment with zero infrastructure management. This guide covers the complete workflow from a local React project to a live, HTTPS-enabled site on your custom subdomain.

Prerequisites

  • A React application built with Create React App, Vite, or any React framework
  • A GitHub, GitLab, or Bitbucket account for repository hosting
  • A Vercel account (free tier, connect with your Git provider)
  • An is-pro.dev subdomain registered at dash.is-pro.dev

Step 1: Push Your React App to Git

Initialize a Git repository in your React project root if you have not already: git init. Add all files with git add . and commit with git commit -m "Initial commit". Create a repository on GitHub, GitLab, or Bitbucket, then link your local repository: git remote add origin https://github.com/username/repository.git. Push your code with git push -u origin main. Before pushing, verify your app builds successfully by running npm run build or yarn build locally — this catches any compilation errors early.

Step 2: Import Your Repository into Vercel

Log into your Vercel dashboard at vercel.com. Click "Add New → Project". Select your Git provider and authorize Vercel to access your repositories. Find and select the repository containing your React app. Vercel automatically detects the framework (Create React App, Next.js, Vite, etc.) and pre-fills the build command and output directory. For a Create React App project, the build command is npm run build and the output directory is build. For Vite, the output directory is dist. Click "Deploy" and wait for the initial build to finish — typically 1-3 minutes. Vercel assigns a random .vercel.app domain where your app is immediately accessible.

Step 3: Add Your is-pro.dev Subdomain in Vercel

In your Vercel project dashboard, navigate to "Settings → Domains". Enter your is-pro.dev subdomain (e.g., myapp.is-pro.dev) and click "Add". Vercel will validate ownership by checking for a specific DNS record. It displays the required DNS target — usually a CNAME pointing to cname.vercel-dns.com or an A record pointing to Vercel's IP addresses. Copy this target value exactly as shown; you will need it in the next step.

Step 4: Configure DNS in the is-pro.dev Dashboard

Open the is-pro.dev DNS dashboard for your subdomain. Click "Add Record". Select CNAME as the record type. In the name field, enter your subdomain prefix (e.g., myapp). In the target field, paste the CNAME target from Vercel (e.g., cname.vercel-dns.com). Save the record. For the root domain (is-pro.dev), Vercel requires A records pointing to specific IPs — but since is-pro.dev manages the root zone, you only need to configure your subdomain. Cloudflare proxies the traffic by default (orange cloud), which provides DDoS protection and SSL termination. If your Vercel deployment involves WebSockets or serverless functions that need direct connections, switch to DNS-only (gray cloud).

Step 5: Configure Environment Variables and Production Settings

In your Vercel project settings, go to "Environment Variables". Add any variables your React app needs in production, such as API endpoints or feature flags. You can set different values for Preview, Production, and Development environments. Vercel injects these at build time, so you must redeploy after adding or changing environment variables. If your app uses client-side routing (React Router, etc.), add a vercel.json file in your repository root with rewrites to handle client-side routes: {"rewrites": [{"source": "/(.*)", "destination": "/index.html"}]}.

Step 6: Verify the Live Deployment

Visit your is-pro.dev subdomain in a browser. Your React app should load over HTTPS with a valid certificate issued by Let's Encrypt or Cloudflare. Test all routes, API calls, and interactive features. Open the browser's developer tools and check the Console and Network tabs for errors. Run Vercel's deployment checks by going to your project dashboard and selecting "Checks" — this validates DNS resolution, SSL, and performance. If you see a Vercel-branded 404 page, the CNAME record may point to the wrong target.

Best Practices

  • Configure automatic deployments: Vercel deploys every push to the production branch. Set up preview deployments for staging branches to test before merging
  • Use Vercel's Analytics to monitor real-user performance metrics like LCP, CLS, and FID for your React app
  • Set Cache-Control headers via vercel.json or your hosting configuration to optimize asset delivery
  • Keep your package.json lockfile in version control for reproducible builds across deployments

Conclusion

Vercel and is-pro.dev form a powerful combination for deploying React applications. Vercel handles the build pipeline, global CDN, and automatic HTTPS, while your free subdomain provides a clean, branded URL. The entire setup takes under 15 minutes and costs nothing.

FAQ

Does Vercel's free tier support custom domains?

Yes, the free Hobby tier supports custom domains with automatic SSL. There are no additional charges for using your own domain.

Why is my React app showing a blank page after deployment?

This often happens when client-side routing is not configured. Add a vercel.json with rewrite rules, or check the browser console for JavaScript errors. Also verify that your homepage field in package.json does not interfere with asset paths.

Can I use a custom domain with Vercel's free tier?

Yes, Vercel's Hobby tier includes custom domain support with automatic SSL.

How do I migrate from Vercel's .vercel.app domain to my custom subdomain?

Simply add your subdomain in Vercel's Domains settings and configure the DNS CNAME record. Vercel will serve your app from both domains until you remove the default one.

FAQ

Is Deployment setup free on is-pro.dev?

Yes, all subdomains on is-pro.dev include free DNS management and SSL certificates.

How long does DNS take to propagate?

Cloudflare typically propagates DNS changes within seconds to a few minutes globally.

Can I use this for commercial projects?

Yes, is-pro.dev subdomains can be used for personal and commercial projects within our fair use policy.

Explore More

Deployment Guides

DNS & Security

Platform Resources