Topic 15 of 15 · React Developer

Topic 15: Deployment

Lesson TL;DRTopic 15: Deployment 📖 6 min read · 🎯 advanced · 🧭 Prerequisites: reactforms, imageupload Why this matters Here's the thing — you've written components, wired up state, maybe even connected to an A...
6 min read·advanced·deployment · github-pages · netlify · vercel

Topic 15: Deployment

📖 6 min read · 🎯 advanced · 🧭 Prerequisites: react-forms, image-upload

Why this matters

Here's the thing — you've written components, wired up state, maybe even connected to an API. But right now, your React app only runs on your own machine. Nobody else can see it. Your friends can't open it, your future employer can't demo it, and users definitely can't use it. Deployment is the step that takes your work off localhost and puts it on the internet, live, for anyone with a link. Today we look at the most beginner-friendly ways to do that — GitHub Pages, Netlify, Vercel, and Heroku — so you can share what you've built with the world.

What You'll Learn

  • Generate an optimized production build with Create React App
  • Deploy a React application to GitHub Pages using the gh-pages package
  • Connect a repository to Netlify and Vercel for automatic CI/CD deploys
  • Push a React app to Heroku via the CLI and Git remote
  • Configure a custom domain across all four deployment platforms

The Analogy

Think of deployment like opening a brick-and-mortar shop after months of building it in your garage. npm run build is the moment you pack everything into polished display cases — all the sawdust swept away, only the finished product remains. GitHub Pages, Netlify, Vercel, and Heroku are four different commercial districts where you can rent a storefront: some are free pop-up markets perfect for static sites, others are full commercial plazas with loading docks for server-side workloads. A custom domain is your shop's street address — no matter which district you choose, customers type the same name into the map and find you.

Chapter 1: Building the React Application

Before any deployment can happen, you need a production build. During development, Create React App runs a dev server with unminified code, source maps, and hot reloading — none of which belong in production. The build script strips all of that and outputs a compact, optimized bundle.

Creating a Production Build

npm run build

This single command compiles your app and writes the result to a build/ directory at the project root. Everything inside build/ is what you ship: minified JS chunks, hashed filenames for cache-busting, a lean index.html, and any static assets you've placed in public/.

What the build/ directory contains:

  • index.html — the entry point your server will serve
  • static/js/ — chunked, minified JavaScript bundles
  • static/css/ — minified stylesheets
  • static/media/ — images and fonts referenced by the app

Never deploy the src/ folder. Only build/ goes to the server.

Chapter 2: Deploying to GitHub Pages

GitHub Pages is a free static hosting service built into every GitHub repository. It is ideal for front-end-only React apps with no server-side logic.

Step 1: Install the gh-pages Package

npm install --save gh-pages

Step 2: Update package.json

Add a homepage field and two deployment scripts:

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://username.github.io/my-react-app",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

Replace username with your GitHub username and my-react-app with your repository name. The predeploy script runs automatically before deploy, so your build is always fresh.

Step 3: Deploy to GitHub Pages

npm run deploy

The gh-pages package pushes the contents of build/ to a special gh-pages branch in your repository. Your application is now live at https://username.github.io/my-react-app.

Chapter 3: Deploying to Netlify

Netlify is a cloud platform purpose-built for modern front-end projects. It watches your Git branch and rebuilds on every push — no manual deploy commands needed after the first setup.

Step 1: Create a Netlify Account

Sign up at https://www.netlify.com/.

Step 2: Connect Your GitHub Repository

From the Netlify dashboard, click New site from Git and select the repository you want to deploy.

Step 3: Configure Build Settings

Netlify will prompt you for build configuration. Set the following:

SettingValue
Build Commandnpm run build
Publish Directorybuild

Step 4: Deploy the Application

Click Deploy site. Netlify runs the build command, takes everything from the build/ directory, and serves it globally via its CDN. Your app is immediately accessible at the Netlify-assigned URL (e.g., https://random-name-12345.netlify.app). Every subsequent push to your connected branch triggers a new automatic deploy.

Chapter 4: Deploying to Vercel

Vercel is the platform behind Next.js, but it handles plain Create React App projects with zero configuration. Like Netlify, it integrates with Git for continuous deployment.

Step 1: Create a Vercel Account

Sign up at https://vercel.com/.

Step 2: Import Your GitHub Repository

From the Vercel dashboard, click Import Project and select your repository.

Step 3: Configure Build Settings

Set the Framework Preset to Create React App. Vercel automatically detects the correct build command and output directory — no manual configuration required.

Step 4: Deploy the Application

Click Deploy. Vercel builds the app and serves it on its global edge network. Your application is accessible at the Vercel-assigned URL (e.g., https://my-react-app.vercel.app). Every push to the main branch triggers a new production deploy; pull requests get preview URLs automatically.

Chapter 5: Deploying to Heroku

Heroku is a cloud platform-as-a-service that supports server-side workloads as well as static front ends. It is the right choice when your React app is paired with a Node.js backend in the same repository.

Step 1: Create a Heroku Account

Sign up at https://www.heroku.com/.

Step 2: Install the Heroku CLI

npm install -g heroku

Step 3: Create a New Heroku Application

heroku create my-react-app

This provisions a new app on Heroku and adds a heroku Git remote to your local repository.

Step 4: Deploy the Application

Commit your changes and push to the Heroku remote:

git init
git add .
git commit -m "Initial commit"
heroku git:remote -a my-react-app
git push heroku master

Heroku detects the Node.js buildpack, runs npm run build, and serves your application. The app is accessible at the Heroku-assigned URL (e.g., https://my-react-app.herokuapp.com).

Chapter 6: Configuring a Custom Domain

Once your app is deployed, you can replace the platform-generated URL with your own domain. The process is the same across all four platforms: add the domain in the platform's dashboard, then update your DNS records with your domain registrar.

GitHub Pages

  1. Go to your repository Settings on GitHub.
  2. Under Pages, add your custom domain in the "Custom domain" field.
  3. At your domain registrar, add a CNAME record pointing your domain to username.github.io.

Netlify

  1. Go to your site's Settings on Netlify.
  2. Under Domain Management, click Add custom domain.
  3. At your domain registrar, update the DNS settings to point to Netlify's nameservers or add a CNAME record as instructed.

Vercel

  1. Go to your project's Settings on Vercel.
  2. Under Domains, add your custom domain.
  3. At your domain registrar, add the A record and CNAME record that Vercel provides.

Heroku

  1. Go to your application's Settings on Heroku.
  2. Under Domains, click Add domain and enter your custom domain.
  3. At your domain registrar, add a CNAME record pointing your domain to the DNS target that Heroku displays.
flowchart LR
    A[Local Dev] -->|npm run build| B[build/ directory]
    B --> C{Choose Platform}
    C -->|npm run deploy| D[GitHub Pages]
    C -->|git push / UI| E[Netlify]
    C -->|git push / UI| F[Vercel]
    C -->|git push heroku master| G[Heroku]
    D --> H[Custom Domain]
    E --> H
    F --> H
    G --> H

🧪 Try It Yourself

Task: Deploy your React app to GitHub Pages end-to-end.

  1. Install the gh-pages package:
npm install --save gh-pages
  1. Add the homepage, predeploy, and deploy fields to your package.json:
{
  "homepage": "https://YOUR_USERNAME.github.io/YOUR_REPO_NAME",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}
  1. Push your code to GitHub, then run:
npm run deploy

Success criterion: Open https://YOUR_USERNAME.github.io/YOUR_REPO_NAME in a browser — your React app should load without a 404. Check the browser's network tab and confirm assets are being served from github.io.

🔍 Checkpoint Quiz

Q1. What does npm run build actually produce, and why is it different from what runs during development?

Q2. Given this package.json snippet, what happens when you run npm run deploy?

{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

A) Only the gh-pages command runs, pushing whatever is already in build/ B) npm run build runs first, then gh-pages pushes the freshly-created build/ directory C) npm run build runs, but gh-pages is ignored because predeploy already handled deployment D) Both scripts run in parallel

Q3. You have a React app with a Node.js API server in the same repository. Which of the four platforms covered in this lesson is the most appropriate choice for deployment, and why?

A) GitHub Pages — it's free and fast B) Netlify — it has the best CDN C) Vercel — it was built by the React team D) Heroku — it supports server-side Node.js workloads alongside the front end

Q4. After deploying to Vercel, a teammate says the app works on the Vercel URL but breaks on the custom domain. What is the most likely cause?

A) Vercel does not support custom domains on the free tier B) The DNS records at the domain registrar have not been updated to point to Vercel C) The build/ directory was not committed to the repository D) The Framework Preset was set incorrectly

A1. npm run build produces a build/ directory containing minified JavaScript chunks, hashed filenames, and a lean index.html. The development server includes source maps, hot-reload code, and unminified bundles — none of which are appropriate for production because they increase file size and expose implementation details.

A2. B — npm's pre<script> hook means predeploy always runs before deploy. So npm run build compiles the app first, then gh-pages -d build pushes the fresh output to the gh-pages branch.

A3. D — Heroku supports server-side Node.js processes. GitHub Pages, Netlify, and Vercel are designed for static or serverless front-end deployments; a traditional API server requires a platform that can run a persistent process, which Heroku provides.

A4. B — The Vercel-assigned URL works because Vercel controls that DNS entry. A custom domain requires you to add an A record and/or CNAME record at your registrar pointing to Vercel's servers. Until those DNS records propagate, the custom domain resolves nowhere or to the wrong server.

🪞 Recap

  • Run npm run build to produce an optimized build/ directory before any deployment.
  • GitHub Pages is a zero-cost option for static React apps; the gh-pages package automates the push to a gh-pages branch.
  • Netlify and Vercel both connect to your Git repository and redeploy automatically on every push, requiring only build command and output directory configuration.
  • Heroku is the right platform when your app includes a Node.js server, deployed via git push heroku master.
  • Custom domains work the same way on every platform: register the domain in the platform's dashboard, then update DNS records at your registrar.

📚 Further Reading

Like this topic? It’s one of 15 in React Developer.

Block your seat for ₹2,500 and join the next cohort.

Course detailsBlock your seat →