Deployment & Production Builds
5 questions foundWhat is a production build in React and how do you create one?
Beginner A production build is the final, optimized version of your app, created by running a build command like npm run build. It produces smaller, faster files with helpful development warnings removed, ready to be uploaded to a real web server for actual visitors to use.
npm run build
// creates a build folder containing optimized HTML, CSS, and JavaScript files
// ready to be uploaded to a hosting service
Real-world example A small business finishes testing their new website locally, runs npm run build, and uploads the resulting files to their hosting provider so real customers can visit the live site.
Common follow-ups: Why should you never upload the development version of your app to a real server?;What is inside the build folder after running this command?
Build Tools & Bundlers (Vite Webpack & CRA);Testing
What are some popular hosting platforms for deploying a React app, and how do they differ?
Intermediate Vercel and Netlify are very popular for React apps because they connect directly to your code repository and automatically build and deploy your site every time you push new changes. Traditional hosting, like a plain server or cloud storage bucket, requires you to manually upload the build folder yourself each time.
// A typical Netlify or Vercel setup, mostly automatic
// 1. Connect your GitHub repository
// 2. Set the build command to: npm run build
// 3. Set the output folder to: build or dist
// Every push to the main branch now deploys automatically
Real-world example A freelance developer connects their client's React project to Vercel, so every time they push a code update, the live website updates automatically within a minute, without any manual upload steps.
Common follow-ups: What is the difference between a preview deployment and a production deployment?;How do you set environment variables safely for a deployed app?
Build Tools & Bundlers (Vite Webpack & CRA);Server-Side Rendering (SSR) & Next.js
How do environment variables work in a React app during deployment?
Intermediate Environment variables let you keep configuration values, like an API address, separate from your code, so the same codebase can behave differently in development versus production. In most React setups, these variables must start with a specific prefix, such as VITE underscore or REACT underscore APP underscore, and they get baked into the build at build time.
// .env.production file
VITE_API_URL=https://api.myrealsite.com
// Used inside your code
const apiUrl = import.meta.env.VITE_API_URL;
fetch(`${apiUrl}/products`);
Real-world example A team uses one API address while developing locally and a different, real API address in production, simply by setting different environment variable files for each environment without changing any actual code.
Common follow-ups: Why do these variables need a special prefix before they can be used in the browser?;Is it safe to put secret keys, like a database password, into a frontend environment variable?
Environment Variables & Configuration;Build Tools & Bundlers (Vite Webpack & CRA)
What is a continuous deployment pipeline, and how does it apply to a React project?
Advanced A continuous deployment pipeline automatically runs your tests, builds your app, and deploys it to a live server every time new code is pushed to your repository, without anyone needing to do it manually. This catches mistakes early through automated tests and makes shipping new features fast and reliable.
# A simplified GitHub Actions workflow for a React app
name: Deploy
on: [push]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm install
- run: npm test
- run: npm run build
- run: npm run deploy
Real-world example A team sets up a pipeline so that every time a developer merges new code, the tests run automatically, and if everything passes, the site deploys to production within a few minutes without anyone touching a keyboard.
Common follow-ups: What should happen automatically if the tests fail during this pipeline?;How would you add a manual approval step before deploying to production?
Testing;CI/CD Publishing & Deployment
Why is it important to test your React app one more time after building it for production?
Beginner The production build removes helpful development warnings and changes how the code is packaged, so a bug that never showed up during development can sometimes appear only in the production build. Testing the actual production build locally before deploying it helps catch these differences early.
npm run build
npm install -g serve
serve -s build
// now visit the local address shown to test the real production build
Real-world example A developer catches a broken image path that only appeared in the production build, not during development, by testing the built version locally with the serve tool before deploying it to real users.
Common follow-ups: What specific things commonly behave differently between development and production builds?;How would you automate this final check as part of your deployment pipeline?
Testing;Build Tools & Bundlers (Vite Webpack & CRA)