How to deploy a React.js app to GitHub pages

 

To deploy a React.js app to GitHub Pages, you can follow these steps:

1. Create a new GitHub repository: Create a new repository on GitHub where you'll host your React.js app. Make sure it's initialized as an empty repository.

2. Install the `gh-pages` package: In your React.js project folder, open a terminal and run the following command to install the `gh-pages` package as a development dependency:

npm install gh-pages --save-dev

3. Update the `package.json` file: Open the `package.json` file in your project and add the following properties at the top-level:

"homepage": "https://<your-github-username>.github.io/<your-repository-name>",

"scripts": {

  "predeploy": "npm run build",

  "deploy": "gh-pages -d build"

}

Replace `<your-github-username>` with your GitHub username and `<your-repository-name>` with the name of your GitHub repository.

4. Build your React app: In the terminal, run the following command to build your React app:

npm run build

5. Deploy to GitHub Pages: After the build process completes, run the following command to deploy your app to GitHub Pages:

npm run deploy

6. Verify the deployment: Visit `https://<your-github-username>.github.io/<your-repository-name>` (the URL you specified in the `homepage` property) to see your React app live on GitHub Pages.

Make sure you commit and push your changes to the repository before running the `npm run deploy` command.

That's it! Your React.js app should now be deployed to GitHub Pages.