Building and Deploying React Apps to Netlify

Deploying a React application is the final and one of the most exciting steps in the development process. After designing, coding, and testing your app locally, it’s time to share it with the world. Modern deployment platforms like Netlify, Vercel, and GitHub Pages make this process smooth, fast, and reliable — allowing developers to host React projects directly from repositories with minimal configuration.

In this in-depth post, we’ll explore how to build and deploy React applications using these three popular platforms. You’ll learn how each platform works, how to set up your project for production, and best practices for optimizing builds and ensuring smooth deployment.

Understanding React App Deployment

Before diving into specific platforms, it’s important to understand what deployment means in the context of React.

A React application built with Create React App (CRA), Vite, or Next.js is a collection of HTML, CSS, and JavaScript files. When you run the build command, React compiles and optimizes your code into static assets that can be served by any web server.

Typical Deployment Steps

Build the app – Converts React source code into static files.
Host the files – Uploads files to a server or CDN.
Serve the app – The server delivers the pre-built files to users’ browsers.

Each deployment platform automates these steps, handling the build and hosting for you.

Preparing Your React App for Deployment

Before deploying, make sure your project is production-ready.

1. Build the Application

If your app was created using Create React App, you can build it using:

npm run build

This command creates a /build folder containing optimized files such as:

index.html
Minified JavaScript and CSS files
Static assets like images and fonts

If you’re using Vite, the command is:

npm run build

And your production-ready files will be located in the /dist directory.

2. Test the Build Locally

Before deployment, test the build output:

npx serve -s build

This launches a local web server to preview your React app as it will appear online.

Deploying to Netlify

Introduction to Netlify

Netlify is one of the most popular platforms for deploying static websites and frontend applications. It automates deployment, handles continuous integration (CI/CD), and provides global content delivery (CDN).

It’s ideal for React developers because it supports automatic builds from GitHub, GitLab, and Bitbucket.

Step 1: Create a Netlify Account

Visit https://www.netlify.com/ and sign up using your GitHub account.

Step 2: Connect Your Git Repository

After logging in:

Click “Add new site” → “Import an existing project.”
Choose your Git provider (e.g., GitHub).
Select your React app repository.

Step 3: Configure Build Settings

Netlify automatically detects your React app and suggests build settings:

Build command: npm run build
Publish directory: build

You can adjust these if necessary, then click “Deploy Site.”

Step 4: Automatic Deployment

Netlify will:

Clone your repository.
Run the build process.
Host the /build folder contents.

Once the build is complete, you’ll receive a live URL like:

https://your-app-name.netlify.app

Step 5: Continuous Deployment

Netlify offers automatic redeployment whenever you push updates to your main branch.

Edit your code locally.
Commit and push changes.
Netlify automatically rebuilds and redeploys your site.

Step 6: Custom Domain and HTTPS

You can link a custom domain in Site Settings → Domain management → Add custom domain.

Netlify automatically provides free HTTPS via Let’s Encrypt.

Step 7: Environment Variables

To add environment variables (e.g., API keys):

Go to Site Settings → Environment variables.
Add key-value pairs like:

REACT_APP_API_URL=https://api.example.com

Advantages of Using Netlify

Fast global CDN.
Easy Git-based deployment.
Free SSL and custom domains.
Built-in environment management.
Automated previews for pull requests.

Deploying to Vercel

Introduction to Vercel

Vercel is the official platform built by the creators of Next.js, but it also supports React apps made with Create React App or Vite.

Vercel is optimized for speed, scalability, and simplicity. It’s ideal for developers who want automatic deployment from Git repositories with zero configuration.

Step 1: Sign Up for Vercel

Go to https://vercel.com/ and sign in using your GitHub, GitLab, or Bitbucket account.

Step 2: Import Your Project

Once logged in:

Click “New Project.”
Import your GitHub repository.
Vercel automatically detects your React project.

Step 3: Configure Build Settings

If your project uses Create React App, Vercel will detect it automatically.

Framework preset: Create React App
Build command: npm run build
Output directory: build

Click Deploy to start the process.

Step 4: Access the Live URL

Once the deployment completes, Vercel provides a live link such as:

https://your-app-name.vercel.app

Your React app is now online.

Step 5: Automatic Redeployments

Every time you push changes to the connected Git branch, Vercel rebuilds and redeploys the project automatically.

This continuous deployment ensures that your app is always up to date.

Step 6: Setting Environment Variables

Open your project in Vercel.
Go to Settings → Environment Variables.
Add your variables like:

REACT_APP_API_URL=https://api.example.com

Vercel supports environment variables for production, preview, and development environments separately.

Step 7: Adding a Custom Domain

Go to Domains → Add Domain.
Enter your domain name (e.g., example.com).
Update DNS settings as instructed.

Vercel will automatically issue an SSL certificate for free.

Step 8: Preview Deployments

Vercel automatically creates preview deployments for every pull request or branch. This allows you to test your app before merging changes.

Advantages of Vercel

Automatic deployments from Git.
Free SSL and CDN.
Custom domains with one click.
Built-in analytics.
Zero configuration required.

Deploying to GitHub Pages

Introduction to GitHub Pages

GitHub Pages is a free hosting service from GitHub that allows you to host static websites directly from your repositories. It’s perfect for small projects, portfolios, or documentation sites built with React.

Step 1: Install GitHub Pages Package

If your React app was created using Create React App, install the GitHub Pages package:

npm install gh-pages --save-dev

Step 2: Update package.json

Add the following line near the top:

"homepage": "https://your-username.github.io/your-repo-name"

Then, add deployment scripts:

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

Step 3: Initialize Git and Push to GitHub

If your app isn’t already a Git repository, initialize it:

git init
git remote add origin https://github.com/your-username/your-repo-name.git
git add .
git commit -m "Initial commit"
git push -u origin main

Step 4: Deploy the App

Run the deployment command:

npm run deploy

This command builds the app and pushes the /build folder to a new gh-pages branch in your repository.

Step 5: Enable GitHub Pages

Go to your GitHub repository.
Open Settings → Pages.
Under “Source,” select the gh-pages branch.
Click Save.

Your app will be published at:

https://your-username.github.io/your-repo-name

Step 6: Updating Your App

Whenever you make changes:

git add .
git commit -m "Update"
git push origin main
npm run deploy

GitHub Pages automatically updates your hosted version.

Handling React Router on GitHub Pages

If your React app uses React Router, you might encounter a 404 error when refreshing pages. GitHub Pages doesn’t handle client-side routing natively.

To fix this, add a redirect rule:

Create a file called _redirects in your public folder with the following content:

/*    /index.html   200

This ensures that all routes fallback to index.html.

Advantages of GitHub Pages

Completely free hosting.
Perfect for portfolios and documentation.
Simple deployment using gh-pages package.
HTTPS enabled automatically.

Comparing Netlify, Vercel, and GitHub Pages

Feature	Netlify	Vercel	GitHub Pages
Setup Time	Very easy	Very easy	Moderate
Custom Domains	Yes	Yes	Yes
Automatic Deployments	Yes (from Git)	Yes (from Git)	No (manual)
Continuous Integration	Built-in	Built-in	Manual
Environment Variables	Supported	Supported	Not natively supported
Free SSL	Yes	Yes	Yes
Serverless Functions	Yes	Yes	No
Ideal For	Production-grade apps	Next.js and React apps	Portfolios and small projects

Best Practices for Deploying React Apps

Optimize Your Build
- Use production mode (npm run build).
- Minify images and CSS.
- Remove unused dependencies.
Use Environment Variables
- Avoid hardcoding API URLs or secrets in your code.
Enable HTTPS
- Always use secure connections for data protection.
Test Before Deploying
- Use serve -s build to verify the production build locally.
Monitor Site Performance
- Use tools like Lighthouse or Web Vitals to track page speed.
Automate CI/CD
- Enable automatic deployment for every push.
Cache Assets Efficiently
- Configure caching policies for better performance.

Troubleshooting Common Deployment Issues

1. White Screen After Deployment

Ensure homepage is set correctly in package.json.
For routing issues, use _redirects file (Netlify) or catch-all routes.

2. Environment Variables Not Working

Prefix variables with REACT_APP_.
Rebuild and redeploy after changes.

3. 404 Errors on Refresh

For client-side routing, configure redirects.
In Netlify, add _redirects file with: /* /index.html 200

Advanced Deployment Options

1. Deploying with CI/CD

Integrate GitHub Actions for automated testing and deployment.

Example workflow file .github/workflows/deploy.yml:

name: Deploy React App
on:
  push:
branches:
  - mainjobs:
  build:
runs-on: ubuntu-latest
steps:
  - uses: actions/checkout@v2
  - run: npm install
  - run: npm run build
  - run: npm run deploy

2. Using Docker for Deployment

Containerize your React app for flexible deployment:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npx", "serve", "-s", "build"]

Build and run:

docker build -t react-app .
docker run -p 3000:3000 react-app

Building and Deploying React Apps to Netlify

Understanding React App Deployment

Typical Deployment Steps

Preparing Your React App for Deployment

1. Build the Application

2. Test the Build Locally

Deploying to Netlify

Introduction to Netlify

Step 1: Create a Netlify Account

Step 2: Connect Your Git Repository

Step 3: Configure Build Settings

Step 4: Automatic Deployment

Step 5: Continuous Deployment

Step 6: Custom Domain and HTTPS

Step 7: Environment Variables

Advantages of Using Netlify

Deploying to Vercel

Introduction to Vercel

Step 1: Sign Up for Vercel

Step 2: Import Your Project

Step 3: Configure Build Settings

Step 4: Access the Live URL

Step 5: Automatic Redeployments

Step 6: Setting Environment Variables

Step 7: Adding a Custom Domain

Step 8: Preview Deployments

Advantages of Vercel

Deploying to GitHub Pages

Introduction to GitHub Pages

Step 1: Install GitHub Pages Package

Step 2: Update package.json

Step 3: Initialize Git and Push to GitHub

Step 4: Deploy the App

Step 5: Enable GitHub Pages

Step 6: Updating Your App

Handling React Router on GitHub Pages

Advantages of GitHub Pages

Comparing Netlify, Vercel, and GitHub Pages

Best Practices for Deploying React Apps

Troubleshooting Common Deployment Issues

1. White Screen After Deployment

2. Environment Variables Not Working

3. 404 Errors on Refresh

Advanced Deployment Options

1. Deploying with CI/CD

2. Using Docker for Deployment

Comments

Leave a Reply Cancel reply