A Deployment Checklist for Shipping a React Project
A checklist for the final steps of shipping a React project, so nothing is missed.
A Deployment Checklist for Shipping a React Project
Before you ship a React project, run through this deployment checklist so nothing is missed.
The Production Build
The production build succeeds with no errors. The output is in the build or dist folder, ready to deploy.
Environment Variables
All config and secrets are in environment variables, set in the hosting dashboard for production. No secrets in code.
SPA Routing
The host is configured to redirect all routes to index.html, so deep links work and React Router does not 404.
Auth Domains
Your deployed domain is added to authorized domains in the auth provider, so auth redirects work in production.
Error Boundaries
Error boundaries wrap the app so an unhandled error shows a fallback instead of a blank screen.
Loading and Error States
Every fetch shows a loading state and handles errors. No blank screens anywhere in the app.
Responsive and Accessible
The app works on mobile and desktop. Buttons have accessible names, modals trap focus, images have alt text, and color contrast is sufficient.
Test the Deployed App
After deploy, click through the live app and test auth, forms, API calls, and deep links. Catch issues that only appear in production.
The Takeaway
Run through this checklist before and after deploy: production build, env vars, SPA routing, auth domains, error boundaries, loading and error states, responsiveness, accessibility, and testing the deployed app.
Production build succeeds, environment variables are set, SPA routing is configured, auth domains are authorized, error boundaries wrap the app, loading and error states are everywhere, and the app is responsive and accessible. Then test the deployed app.
Because some issues only appear in production, like wrong environment variables, unauthorized auth domains, or broken deep links. Testing the deployed app catches these before users do, which is the whole point of a checklist.
Because the host serves 404 for routes that are not files, since routing is client-side. Configuring the host to redirect all routes to index.html means React Router handles them and deep links work.
Because an unhandled error in production shows a blank screen, which is a terrible experience. Error boundaries wrap the app so an error shows a fallback instead, letting users recover or report the issue.
Because auth providers only allow redirects from authorized domains. Without adding your deployed domain, auth redirects fail in production even though they work on localhost.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.