Deploying React Applications

Build Process with Vite or Create React App (CRA)

Before deploying your React application, you need to create an optimized production build. Depending on your setup, the build process differs slightly between Vite and CRA.

Create React App

To build your project:

npm run build

This generates a build/ folder containing static assets ready for deployment.

Vite

For Vite-based projects:

npm run build

This generates a dist/ folder with your production-ready files.

Deploying to Vercel, Netlify, or AWS

Deploying to Vercel

  • Go to vercel.com and sign in with GitHub.
  • Import your React project repository.
  • Vercel automatically detects Vite or CRA and configures the build command and output directory.
  • Click "Deploy" and your site will be live in seconds.

Deploying to Netlify

  • Go to netlify.com and log in.
  • Click “Add new site” → “Import from Git”.
  • Select your repository and configure build settings:
    • Build Command: npm run build
    • Publish Directory: build (CRA) or dist (Vite)
  • Click “Deploy site”.

Deploying to AWS (S3 + CloudFront)

  1. Build your project with npm run build or npm run build (Vite).
  2. Upload the contents of the build/ or dist/ folder to an S3 bucket.
  3. Enable static website hosting on the S3 bucket.
  4. Set up a CloudFront distribution to serve the content globally.
  5. Optional: Use Route 53 to map a custom domain.

Best Practices for Production Readiness

  • Environment Variables: Use .env.production for secure production config.
  • Minification: Ensure your code is minified and optimized during the build step.
  • Source Maps: Disable source maps in production to avoid exposing code.
  • HTTPS: Use HTTPS (Vercel/Netlify handle this automatically).
  • Error Boundaries: Wrap critical components to gracefully handle rendering errors.
  • Performance Monitoring: Integrate tools like Sentry or LogRocket to monitor user errors and performance issues.

Conclusion

Deploying a React app is straightforward with modern tools like Vercel, Netlify, and AWS. Make sure your app is optimized for production, properly configured, and monitored. In the final post of this series, we’ll explore some advanced patterns and architectural tips for scaling React applications.

Post a Comment

0 Comments