Deploying React Applications on Platforms like Vercel, Netlify, and AWS

Deploying a React application has never been easier, thanks to modern platforms like Vercel, Netlify, and AWS Amplify. These services offer continuous deployment (CI/CD), edge caching, custom domain management, HTTPS, and serverless functions — all out of the box.

This article explores how to deploy React apps on each of these platforms, with code examples, setup steps, and key features to consider.

Preparing Your React App for Deployment

Before deploying, ensure your React app is production-ready.

Deployment on Vercel

Vercel is the platform behind Next.js but works seamlessly with Create React App (CRA) and other frameworks.

Steps

1. Push your code to GitHub, GitLab, or Bitbucket.
2. Login to Vercel and import your repo.
3. Set Build and Output Settings (Vercel auto-detects React apps):
   • Framework preset: Create React App
   • Build command: npm run build
   • Output directory: build
4. Add any required environment variables.
5. Click Deploy.

Features

• Instant rollback
• Edge functions (deployed globally)
• Serverless API support (aka Vercel Functions, deployed into specific regions)
• Custom domains with HTTPS
• Git-based deployments

Example

After deployment, you'll get a live preview URL like:

https://react-breadcrumb.vercel.app/

Vercel also provides preview deployments on every pull request.

Deployment on Netlify

Netlify is a powerful JAMstack platform with built-in CI/CD and form handling features.

Steps

1. Push your app to a Git repo.
2. Login to Netlify and click "Add new project > Import an existing project".
3. Choose your repository.
4. Set these build options:
   • Branch to deploy: main
   • Build command: npm run build
   • Publish directory: dist
5. Add any required environment variables.
6. Click Deploy {Project name}.

CLI Option

You can also deploy directly using the Netlify CLI:

npm install -g netlify-cli
netlify login
netlify init
netlify deploy --prod

Features

• Branch-based deploys
• Edge functions & serverless functions
• Built-in form and auth handling
• Global CDN and atomic deploys

After deployment:

https://reactbreadcrumb.netlify.app/

Deployment on AWS Amplify

AWS Amplify is a full-stack platform backed by AWS services.

Steps

1. Push your code to GitHub.
2. Login to the AWS Amplify Console.
3. Click Deploy an app
4. Connect your GitHub repo and branch.
5. Amplify auto-detects React and sets:
   • Build command: npm run build
   • Output directory: dist
6. Click Next.
7. Click Save and Deploy.

Features

• Built-in auth (Cognito), GraphQL (AppSync), and storage (S3)
• CI/CD for frontend and backend
• Custom domains with Route53
• Environment-specific deployments
• Server-side rendering (SSR) for Next.js

Example

After deployment:

https://main.d3non2510mgjty.amplifyapp.com/

You can also configure backend services (auth, DB, APIs) via Amplify CLI or Admin UI.

Comparison Table

Tips for Production-Ready Deployments

• Use .env.production for secrets and config.
• Enable gzip compression (done automatically by most platforms).
• Avoid committing build artifacts (/build).
• Monitor performance via tools like Lighthouse.
• Use source maps carefully.

Resources

• Vercel Docs – React
• Netlify Docs – React
• AWS Amplify Docs
• React Deployment Guide (CRA)
• Lighthouse
• dotenv – Env Variable Management