When we build a React app then we eagerly want to deploy it and want to show our amazing app to the world.
And here, are the simple steps to deploy React app on GitHub Pages.
- You should have a GitHub account (If you don't have GitHub account then go in to GitHub and create a new account.)
- Make sure Node and npm are installed in your system.
- And you should have one React project.
What is GitHub Pages?
Step 1: Create a GitHub repository on GitHub Account.
- Go in to your GitHub account, and click on the + icon in the top right corner and then click on the New repository for creating a new repository.
- Now give a name for your project in Repository name field as I give it a name "First-react-app" you can give any name.
- Then click on create repository button, it will create your repository.
- After your repository is created, you can see this page on your screen
After creating a GitHub repository, Go in to your terminal and open your react project directory in your terminal.
here react_app is my folder name where i have created react app.
Run the following command in your terminal:
for installing GitHub Pages package as a dev dependency via npm.
npm install gh-pages --save-dev
Now, Go into your package.json file in your react app folder and add the following homepage.
Note: In place of "myusername" put the user name of your GitHub account and in place of "my-app" put the repository name which you have created earlier then save the package.json file.
As my repository name is "First-react-app".
Now, scroll down in your package.json file and in scripts section put the following scripts:
"predeploy": "npm run build", "deploy": "gh-pages -d build",
git add -A
git commit -m "First commit"
(In place of First commit you can write any message)
git branch -M main
git remote add origin https://github.com/your_username/your_repository_name.git
(Here, in place of your_username put your username of GitHub account and in place of your_repository_name put your repository name)
npm run deploy
Go into your GitHub repository and refresh that page until you don't get a tick mark as shown in this picture: