Topic 15 of 56 · Full Stack Advanced

Topic 15 : Deployment

Lesson TL;DRTopic 15: Deployment 📖 6 min read · 🎯 advanced · 🧭 Prerequisites: imageupload, uploadingapptoplaystoreforandroid Why this matters Here's the thing — everything you've built so far lives only on you...
6 min read·advanced·deployment · react · github-pages · netlify

Topic 15: Deployment

📖 6 min read · 🎯 advanced · 🧭 Prerequisites: image-upload, uploading-app-to-playstore-for-android

Why this matters

Here's the thing — everything you've built so far lives only on your computer. Nobody else can see it, use it, or benefit from it. The moment you deploy, that changes. Your app gets a real URL, and anyone in the world can open it. That's a big deal. In this lesson we look at four ways to make that happen — GitHub Pages, Netlify, Vercel, and Heroku — and we'll walk through the trade-offs so you can pick the right one for what you're building.

What You'll Learn

  • Create an optimized production build of a React application using Create React App
  • Deploy a React app to GitHub Pages using the gh-pages package
  • Deploy to Netlify and Vercel via Git-connected continuous deployment
  • Deploy to Heroku using the Heroku CLI and Git push workflow
  • Configure a custom domain on each of the four platforms

The Analogy

Think of your React source code as a bakery's recipe and raw ingredients — essential for the kitchen but not what goes on the shelf. Running npm run build is like baking the final product: flour, sugar, and React components get transformed into compact, optimized files that browsers can actually serve. Deploying is then choosing which store carries your baked goods — a free community board (GitHub Pages), a polished specialty shop (Netlify or Vercel), or a full commercial kitchen with a loading dock (Heroku). Each store has a different check-in process, but the product you hand over is always that same production build.

Chapter 1: Building the React Application

Before any deployment can happen, you need a production build — an optimized, minified version of your application that is stripped of development tooling and ready for a live server.

Create React App ships with a build script that handles this in one command:

npm run build

This generates a build/ directory containing the production-ready output: minified JS bundles, hashed asset filenames for cache-busting, and a root index.html that wires everything together. This build/ directory is the artifact every platform in this lesson expects you to hand over.

Chapter 2: Deploying to GitHub Pages

GitHub Pages hosts static sites directly from a GitHub repository. It is a zero-cost option ideal for front-end-only React apps.

Step 1: Install the gh-pages Package

npm install --save gh-pages

Step 2: Update package.json

Add a homepage field and two new scripts — predeploy and deploy:

{
  "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 the build is always fresh.

Step 3: Deploy

npm run deploy

The application is now accessible at https://username.github.io/my-react-app.

Chapter 3: Deploying to Netlify

Netlify is a platform built around Git-driven continuous deployment. Every push to your connected branch triggers a new build and deploy automatically.

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 your repository.

Step 3: Configure Build Settings

SettingValue
Build Commandnpm run build
Publish Directorybuild

Step 4: Deploy

Click "Deploy site". Netlify builds and deploys the application automatically. The live URL is displayed in the dashboard immediately after deployment completes.

Chapter 4: Deploying to Vercel

Vercel is optimized for modern JavaScript frameworks including Create React App, Next.js, and others. It features automatic framework detection and zero-configuration deploys for most React projects.

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 the appropriate repository.

Step 3: Configure Build Settings

SettingValue
Framework PresetCreate React App

Vercel auto-detects Create React App projects and fills in the build command (npm run build) and output directory (build) automatically. No manual configuration is required for standard CRA projects.

Step 4: Deploy

Click "Deploy". Vercel builds and deploys the application and provides a live URL in the dashboard.

Chapter 5: Deploying to Heroku

Heroku is a cloud platform that supports full-stack web applications and APIs, making it the right choice when your project has a server component alongside the React front end.

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 registers a new app on Heroku and adds a heroku Git remote to your local repository.

Step 4: Deploy

Commit your changes and push to Heroku:

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

The application is now accessible at the Heroku-provided URL (e.g., https://my-react-app.herokuapp.com).

Chapter 6: Configuring a Custom Domain

Every platform supports custom domains. The process has two parts: registering the domain with the platform, then updating your DNS records with your domain registrar.

GitHub Pages

  1. Go to your repository on GitHub → Settings → Pages.
  2. Under "Custom domain", enter your domain and save.
  3. At your domain registrar, add a CNAME record pointing to username.github.io.

Netlify

  1. In the Netlify dashboard, open your site → Site settings → Domain Management.
  2. Click "Add custom domain" and enter your domain.
  3. Update your DNS records as instructed by Netlify (typically a CNAME or A record).

Vercel

  1. In the Vercel dashboard, open your project → Settings → Domains.
  2. Click "Add" and enter your domain.
  3. Update your DNS records as instructed by Vercel.

Heroku

  1. In the Heroku dashboard, open your app → Settings → Domains.
  2. Click "Add domain" and enter your domain.
  3. Update your DNS records as instructed by Heroku (typically a CNAME record pointing to the provided DNS target).

🧪 Try It Yourself

Task: Deploy your React app to GitHub Pages from scratch.

  1. Create a new CRA project (or use an existing one): 
    npx create-react-app my-deploy-test
cd my-deploy-test
  2. Install gh-pages and update package.json with your homepage, predeploy, and deploy scripts as shown in Chapter 2.
  3. Push the project to a new GitHub repository, then run: 
    npm run deploy

Success criterion: Open https://<your-username>.github.io/my-deploy-test in a browser and see the default CRA welcome screen live on the internet.

🔍 Checkpoint Quiz

Q1. Why does Create React App's npm run build command produce a separate build/ directory instead of serving files directly from src/?

A) Because GitHub Pages requires a folder named build B) To create an optimized, minified production artifact separate from development source files C) Because src/ files are too large for the network D) To enable hot module replacement in production

Q2. Given the following package.json excerpt, what happens when you run npm run deploy?

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

A) Only gh-pages -d build runs; predeploy must be called manually B) predeploy runs first (building the app), then gh-pages publishes the build/ directory C) The app is deployed to Heroku D) An error is thrown because predeploy is not a standard npm script

Q3. What is the key difference between deploying to GitHub Pages and deploying to Heroku?

A) GitHub Pages is faster B) Heroku supports server-side code and APIs; GitHub Pages only hosts static files C) Heroku is free and GitHub Pages costs money D) Vercel and Netlify cannot be used alongside Heroku

Q4. You've deployed to Netlify and now want to use your own domain myapp.com. After adding the domain in Netlify's Domain Management panel, what must you do next?

A) Run npm run deploy again B) Reinstall the gh-pages package C) Update the DNS records at your domain registrar to point to Netlify D) Nothing — Netlify automatically updates DNS

A1. B — The build process compiles, bundles, and minifies source files into deployment-ready assets. The src/ directory contains raw, unoptimized development code that browsers cannot efficiently serve.

A2. B — npm automatically runs a pre<script> hook before the named script. So predeploy executes npm run build first, producing a fresh build/ folder, and then deploy publishes that folder to GitHub Pages.

A3. B — GitHub Pages serves only static files (HTML, CSS, JS). Heroku provisions a full server environment, so you can run Node.js backends, Express APIs, databases connections, and any server-side logic alongside your React front end.

A4. C — Netlify handles the platform side, but DNS lives with your registrar (e.g., Namecheap, GoDaddy, Cloudflare). You must add the CNAME or A record Netlify specifies so that myapp.com resolves to Netlify's servers.

🪞 Recap

  • npm run build produces the optimized build/ directory that every deployment platform expects.
  • GitHub Pages is the simplest static hosting option, driven by the gh-pages package and two package.json script entries.
  • Netlify and Vercel both offer Git-connected continuous deployment — push to your branch and they rebuild automatically.
  • Heroku uses a CLI and Git push workflow and supports full-stack apps beyond static files.
  • Custom domains on every platform require two steps: register the domain with the platform, then update DNS at your registrar.

📚 Further Reading

Like this topic? It’s one of 56 in Full Stack Advanced.

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

Course detailsBlock your seat →