How to deploy react app to GitHub pages
Github-pages is very practical to host static websites, not only Jekyll based websites, but also Angular, React based static websites etc.
You don’t need to purchase a space for the websites hosting. It’s totally free! All you need is just a GitHub account. :)
Here are some steps you need to follow:
1. Install Node.js if it’s not already done
2. Create a react app with create-react-app CLI
> npx create-react-app my-app
3. Configure the project’s package.json file.
- Add a homepage url:
"homepage": "https://{github_user_name}.github.io/{repository_name}",
- Add predeploy and deploy steps
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
...
}
4. Create gh-pages branch in GitHub repository
Go to the Settings tab in the repository, and set the gh-pages branch as source.
5. Deploy React App to Github pages
Run npm run deploy to deploy React App to the repository.
PROJECT_PATH>npm run deploy
> demo@0.1.0 predeploy PROJECT_PATH\demo
> npm run build
> demo@0.1.0 build PROJECT_PATH\demo
> craco build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
401.16 KB (+4 B) build\\static\\js\\31.68e127aa.chunk.js
340.96 KB build\static\js\4.6285aef3.chunk.js
273.32 KB build\static\js\2.a666de83.chunk.js
226.17 KB build\static\js\35.aadd7357.chunk.js
...
112.58 KB build\static\js\32.d0cc55a1.chunk.js
52.72 KB build\static\css\31.aef428f6.chunk.css
50 KB build\static\js\34.4e2843ba.chunk.js
The project was built assuming it is hosted at /GITHUB_REPOSITORY_NAME/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
bit.ly/CRA-deploy
> demo@0.1.0 deploy PROJECT_PATH\demo
> gh-pages -d build
Published
Congratulations! You have successfully deployed your React App to GitHub pages!
