Connecting Frontend to Backend: The Right Way to Handle CORS and Deployment

When building modern web applications, connecting your frontend to the backend often presents challenges, especially with CORS (Cross-Origin Resource Sharing) issues. Let me share some practical insights on handling these connections properly and why certain deployment practices should be avoided.

Understanding CORS and Why Proxies Help

CORS errors occur when your frontend (running on one port) tries to communicate with your backend (running on another port). Browsers block these requests by default for security reasons. While you could configure CORS headers on your backend, using a proxy during development is often the cleaner solution.

Setting Up Proxies in Modern Frameworks

Vite Configuration

In your vite.config.js, add a proxy configuration:

javascriptexport default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

This routes all /api requests from your frontend to your backend server, eliminating CORS issues during development.

Next.js Configuration

For Next.js, configure the proxy in next.config.js:

javascriptmodule.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:3000/:path*'
      }
    ]
  }
}

The Problem with Common Deployment Practices

Many companies follow this problematic workflow:

1. Run npm run build to create a dist folder

2. Drag and drop the dist folder into the backend directory

3. Use app.use(express.static("dist")) middleware

4. Deploy everything to platforms like DigitalOcean

Why This Approach Is Flawed

This practice creates several maintenance nightmares:

• Manual repetition: Every frontend change requires rebuilding and manually moving files

• Version control mess: Your backend repository gets cluttered with frontend build artifacts

• Deployment coupling: Frontend and backend become unnecessarily dependent

• Rollback complications: Harder to revert changes when frontend and backend are bundled together

Better Deployment Strategies

Instead of the drag-and-drop approach, consider:

Separate Deployments

• Deploy frontend to Vercel, Netlify, or similar platforms

• Deploy backend to Heroku, Railway, or containerized solutions

• Configure proper CORS headers in production

Automated CI/CD

• Use GitHub Actions or similar to automatically build and deploy

• Keep frontend and backend repositories separate

• Implement proper environment variable management

Key Takeaways

The proxy approach works excellently for development, solving CORS issues without backend modifications. However, avoid the temptation of manually copying build files to your backend for production.

Embrace separation of concerns: let your frontend and backend live independently, use proper deployment pipelines, and maintain clean, scalable architecture. Your future self (and your team) will thank you for the reduced complexity and improved maintainability.

Modern development is about automation and best practices – not manual file shuffling. Choose tools and workflows that scale with your project's growth.