Deployment Strategies
Learn different deployment strategies and platforms for React applications. This is a foundational concept in component-based UI development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world React experience. Take your time with each section and practice the examples
Build Process
Before deploying a React application, you need to build it for production. This process optimizes the code, minifies it, and creates static files that can be served by a web server.. This is an essential concept that every React developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
Build Configuration
// package.json scripts
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
// Build for production
npm run build
// This creates a 'build' folder with optimized files:
// - index.html
// - static/js/
// - static/css/
// - static/media/
// Environment variables
// .env.production
REACT_APP_API_URL=https://api.production.com
REACT_APP_ENVIRONMENT=production
// .env.development
REACT_APP_API_URL=http://localhost:3001
REACT_APP_ENVIRONMENT=development
// Using environment variables in code
const apiUrl = process.env.REACT_APP_API_URL;
const environment = process.env.REACT_APP_ENVIRONMENT;Deployment Platforms
// Netlify deployment
// netlify.toml
[build]
command = "npm run build"
publish = "build"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
// Vercel deployment
// vercel.json
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "@vercel/static-build",
"config": { "distDir": "build" }
}
],
"routes": [
{
"src": "/static/(.*)",
"dest": "/static/$1"
},
{
"src": "/favicon.ico",
"dest": "/favicon.ico"
},
{
"src": "/manifest.json",
"dest": "/manifest.json"
},
{
"src": "/(.*)",
"dest": "/index.html"
}
]
}
// GitHub Pages deployment
// package.json
{
"homepage": "https://username.github.io/repository-name",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
}
// Deploy to GitHub Pages
npm run deploy