Table of Contents
In this article, we will see how to deploy a react application GitHub pages.
This article assumes that you have a GitHub account, if not, create one here.
Creating the React App
Create a react app using the following command:
1npx create-react-app deploy-github-pages
Now install the gh-pages
package as a development dependency.
This helps in deploying the React app to GitHub pages.
1npm install gh-pages -D
Updating package.json
Open package.json
and add the following line:
1"homepage": "https://<your_username>.github.io/<repo_name>"
Example:
1"homepage": "https://collegewap.github.io/deploy-github-pages"
This will be the URL of your application when you deploy it.
Now add the following scripts to package.json
:
1"predeploy": "npm run build",2"deploy": "gh-pages -d build",
Here we have added 2 scripts, one is to build the project locally and another to upload the build files to GitHub pages.
This is how the package.json
would look now:
1{2 "name": "deploy-github-pages",3 "version": "0.1.0",4 "homepage": "https://collegewap.github.io/deploy-github-pages",5 "private": true,6 "dependencies": {7 "@testing-library/jest-dom": "^5.16.5",8 "@testing-library/react": "^13.4.0",9 "@testing-library/user-event": "^13.5.0",10 "react": "^18.2.0",11 "react-dom": "^18.2.0",12 "react-scripts": "5.0.1",13 "web-vitals": "^2.1.4"14 },15 "scripts": {16 "predeploy": "npm run build",17 "deploy": "gh-pages -d build",18 "start": "react-scripts start",19 "build": "react-scripts build",20 "test": "react-scripts test",21 "eject": "react-scripts eject"22 },23 "eslintConfig": {24 "extends": ["react-app", "react-app/jest"]25 },26 "browserslist": {27 "production": [">0.2%", "not dead", "not op_mini all"],28 "development": [29 "last 1 chrome version",30 "last 1 firefox version",31 "last 1 safari version"32 ]33 },34 "devDependencies": {35 "gh-pages": "^4.0.0"36 }37}
Pushing the code to GitHub
Create a public repository named deploy-github-pages
in GitHub.
If you want to deploy a private GitHub repository to GitHub pages, then you will have to upgrade your account.
Now add the files and commit the changes in your project:
1git add *2git commit -m "Adding GitHub Pages"
Now add and push the code to the remote repository:
1git remote add origin https://github.com/<username>/<repo_name>.git2# git remote add origin https://github.com/collegewap/deploy-github-pages.git3git push -u origin master # or main
Deploying to GitHub pages
Run the following command inside the project:
1npm run deploy
Now it will create a branch called gh-pages
and push it to the remote repository.
Now open your GitHub repository and click on Settings:
In Settings, choose Pages
.
In the Build and deployment section,
- Choose source as Deploy from branch.
- Branch as
gh-pages
. - Folder as
/(root)
. -
Click on Save.
Again run the deploy command inside your project:
1npm run deploy
Now your React application will be deployed to GitHub pages.
If you have liked article, stay in touch with me by following me on twitter.
Leave a Comment