Deploying a React 19 & Serverless Portfolio on Vercel: A Complete Configuration Guide

Deploying a modern Single Page Application (SPA) with serverless capabilities requires more than just pushing code to GitHub and hitting "deploy." To ensure a production-grade portfolio, you need to handle client-side routing fallback, map serverless endpoints correctly, protect administrative environments, and properly configure a branded custom domain.

In this guide, I’ll walk you through the exact production configurations I implemented to deploy my professional portfolio on Vercel, ensuring zero-maintenance infrastructure, pristine SEO, and zero 404 errors.

---

🛠️ The Core Deployment Challenge: Hybrid Routing

Because this portfolio combines a React 19 SPA (using react-router-dom 7) with Vercel Serverless Functions (for the dynamic PostgreSQL blog engine), default deployment settings will break things.

If a user navigates to /blog or /projects and hits refresh, Vercel will look for a static file at that path and return a 404 error. To fix this while keeping our backend API functioning, we must declare custom routing rules using a vercel.json file at the root of the project.

The vercel.json Setup

Here is the exact production layout needed to handle rewrites:

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

Why this specific Regex matters:

• /(.*) (The standard approach): Overwrites everything. If you use this, any request to your backend endpoints (like /api/posts) gets swallowed and redirected to your React frontend, breaking your database communication.
• /((?!api/.*).*) (The professional approach): This uses a negative lookahead. It tells Vercel: "If the incoming request starts with /api/, leave it alone and pass it to our Serverless Functions. For every other route, rewrite it to index.html so React Router can take over on the client-side."

---

🔒 Environment Variables & Environment Parity

Our portfolio communicates with Neon PostgreSQL via serverless endpoints and utilizes a basic administrative check to create and edit articles. To ensure security, sensitive tokens are kept out of the repository.

Development vs. Production Parity

During local development, Vite handles backend requests via internal proxies mapped out in vite.config.js. However, once deployed, Vercel automatically maps files inside the /api directory into live serverless infrastructure.

To connect everything securely, you must navigate to Project Settings > Environment Variables in the Vercel Dashboard and define:

Variable Name	Purpose	Example / Source
DATABASE_URL	Non-pooling connection string	Provided by your Neon Console
BLOG_ADMIN_USERNAME	Admin panel login credential	Your unique username
BLOG_ADMIN_PASSWORD	Admin panel secure password	A high-entropy hash or string

---

🌐 Custom Domain Architecture & Brand Redirection

For a professional portfolio, using a default *.vercel.app subdomain looks amateur. Mapping a branded custom domain requires precise DNS manipulation to ensure maximum availability and prevent duplicate content penalties from search engine crawlers.

Step 1: Mapping the Custom Subdomain or Apex Domain

Inside the Vercel Dashboard under Settings > Domains, you add your professional domain name. Depending on your choice, Vercel maps out the necessary global records:

• For Subdomains (e.g., portfolio.yourname.dev): You must log into your domain registrar (Namecheap, Cloudflare, GoDaddy) and add a CNAME record pointing your subdomain directly to Vercel's global DNS mesh:

• Type: CNAME

• Name: portfolio (or your specific subdomain)

• Value: cname.vercel-dns-0.com

• For Apex Domains (e.g., yourname.dev): If you are routing your primary root domain, you configure an A Record pointing directly to Vercel's Anycast IP address:

• Type: A

• Name: @

• Value: 76.76.21.21

Step 2: Canonical Subdomain Redirection

If you map an apex domain, users will inevitably type both yourname.dev and www.yourname.dev. To prevent search engines from indexing these as two separate websites (which severely damages your SEO score), you must explicitly add both domains in Vercel's domain manager.

Select one as your Canonical Domain (e.g., yourname.dev) and configure the secondary domain to Redirect directly into it. Vercel handles this at the edge network layer, triggering a structural 301 Moved Permanently redirect automatically.

Once the DNS records propagate (which usually takes less than 10 minutes), Vercel automatically provisions a wildcard SSL/TLS Certificate via Let's Encrypt, securing all traffic over HTTPS.

---

📈 Post-Deployment: Search Engine Indexing

Our project includes an automated pipeline that builds a structured mapping of our site. Every time the production deployment runs, our script generate-sitemap.js runs automatically, compiling a clean, timestamped sitemap.xml file.

To finalize your professional setup:

1. Log into Google Search Console.
2. Add your new custom domain property.
3. Submit your automated sitemap endpoint: https://your-custom-domain.dev/sitemap.xml.

This notifies indexing crawlers instantly of your portfolio pages, projects, and new blog posts, ensuring your professional work is discoverable online within hours.

---

Are you setting up your own deployment pipeline on Vercel, or having trouble configuring the router rewrites for your favorite framework? Leave a comment or drop a message on my contact page, and let’s debug it together!