Deploying the DevTinder Frontend to Vercel or Netlify Static Hosting for React Apps

Deploying the DevTinder Frontend to Vercel or Netlify

The DevTinder frontend is a React app that can be deployed to static hosting platforms like Vercel or Netlify. These platforms are optimized for frontend frameworks and offer free tiers for small projects.

Why Not Deploy Frontend on EC2?

You could serve the frontend build files from EC2 using Nginx, but using a dedicated frontend platform is better because:

1. CDN Global edge network for fast loading worldwide
2. Free SSL Automatic HTTPS certificates
3. Easy deployments Git push to deploy
4. Preview deployments Every PR gets a preview URL
5. Optimized for React Build optimization, caching, compression

Deploying to Vercel

Step 1: Install Vercel CLI

npm install -g vercel

Step 2: Build the Frontend

cd devtinder-frontend
npm run build

This creates a dist/ (Vite) or build/ (CRA) directory.

Step 3: Deploy

vercel

Follow the prompts:

• Set up and deploy: Y
• Project name: devtinder-frontend
• Framework preset: Vite (or Create React App)
• Build command: npm run build
• Output directory: dist (or build)
• Override? N

Step 4: Set Environment Variables

vercel env add VITE_API_URL
# Enter: https://your-backend-domain.com/api

vercel env add VITE_SOCKET_URL
# Enter: https://your-backend-domain.com

Then redeploy:

vercel --prod

Step 5: Connect to Git (Optional)

For automatic deployments on git push:

1. Go to https://vercel.com/dashboard
2. Import your GitHub repository
3. Vercel auto-detects Vite/CRA and configures the build
4. Every push to main deploys to production
5. Every PR gets a preview deployment

Deploying to Netlify

Step 1: Build the Frontend

cd devtinder-frontend
npm run build

Step 2: Install Netlify CLI

npm install -g netlify-cli

Step 3: Deploy

netlify deploy

Follow the prompts:

• Create & configure new site: Y
• Team: Your team
• Site name: devtinder
• Publish directory: dist (or build)

Step 4: Set Environment Variables

Go to Netlify dashboard → Site settings → Environment variables:

• VITE_API_URL = https://your-backend-domain.com/api
• VITE_SOCKET_URL = https://your-backend-domain.com

Then redeploy:

netlify deploy --prod

Step 5: Connect to Git (Optional)

1. Go to Netlify dashboard
2. Add new site → Import from Git
3. Choose your GitHub repository
4. Configure build settings
5. Every push to main deploys automatically

Connecting Frontend to Backend

After deploying both:

1. Frontend URL: https://devtinder-frontend.vercel.app
2. Backend URL: https://api.yourdomain.com (EC2 with Nginx + SSL)

Update frontend environment variables:

VITE_API_URL=https://api.yourdomain.com/api
VITE_SOCKET_URL=https://api.yourdomain.com

Update backend CORS:

app.use(cors({
  origin: "https://devtinder-frontend.vercel.app",
  credentials: true
}));

Custom Domain

Both Vercel and Netlify allow custom domains:

1. Buy a domain (e.g., from Namecheap, GoDaddy)
2. Add a CNAME record pointing to your Vercel/Netlify URL
3. Add the domain in the platform dashboard
4. SSL is automatically provisioned

The Takeaway

Deploying the DevTinder frontend to Vercel or Netlify is straightforward: build the React app, install the CLI, deploy, set environment variables (API URL and Socket URL), and connect to Git for automatic deployments. These platforms provide CDN, free SSL, and preview deployments making them ideal for React apps.