Deploying React Applications

Building a React application is just the first step. To share your work with the world, you need to deploy it. In this tutorial, we will cover the most popular hosting platforms for React apps.

1. Preparing for Deployment

Before deploying, you must create a production-ready build of your app. This command optimizes your code, minifies assets, and prepares everything for the browser.

Bash

npm run build          

2. Deploying to Vercel

Vercel is the creator of Next.js and provides an incredibly smooth deployment experience for React.

• Push your code to GitHub, GitLab, or Bitbucket.
• Log in to Vercel and click "Add New Project".
• Import your repository and click "Deploy".

3. Deploying to Netlify

Netlify is another popular choice for static sites and React apps.

• Connect your Git provider to Netlify.
• Select your repository.
• Ensure the build command is npm run build and the publish directory is dist or build.
• Click "Deploy site".

4. Deploying to GitHub Pages

GitHub Pages is a great free option for hosting simple React projects directly from your GitHub repository.

Bash

npm install gh-pages --save-dev          

Add the following to your package.json:

JSON

"homepage": "http://username.github.io/repo-name",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}          

Note: When deploying to a subdirectory (like GitHub Pages), make sure your React Router is configured with the correct `basename`.