Done making your React app and want to deploy it for the world to see?
Learn how to deploy your app to GitHub instantly in just 3 simple steps!
Step 1: Installing gh-pages
gh-pages is the npm library that will let us deploy our app to GitHub pages.
Install it using the following command
$ npm install gh-pages
Step 2: Making changes to package.json
We will need to add a homepage
field in the format https://{github_username}.github.io/{repository_name}
and under scripts
we'll add scripts for deploy
and predeploy
as follows:
"predeploy": "yarn run build"
"deploy": "gh-pages -d build"
The package.json
should look something like this after this step:
{
"name": "portfolio",
"version": "1.0.0",
"private": true,
"homepage": "https://volt9801.github.io/portfolio/",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"gh-pages": "^2.2.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "yarn run build",
"deploy": "gh-pages -d build",
"test": "react-scripts test",
"eject": "react-scripts eject"},
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Step 3: ๐ Deploy your app!
Now, you just need to run $ npm run deploy
to deploy our chat app to GitHub pages. You can now view your app at https://{github_username}.github.io/{repository_name}
If you made it so far, kudos to you! Feel free to leave down your thoughts below in the comments. Happy Hacking!