
Hosting apps/websites on internet is an important part when it comes to show casing your work or may be deploying your app for a small scale work. Github provides hosting for the websites for free using Github pages where anyone can deploy the webpages.
Coming on to the todays topic : Hosting react app on github pages. Assuming that you are ready with the react app which is working fine on the local host. Lets begin this simple process-:
npm install gh-pages --save-dev
Use this command to install and save the dependency of the github pages.- Adding properties to
package.jsonfile.
a. “homepage”: “http://{github-username}.github.io/{repo-name}”
b."scripts": {//..."predeploy": "npm run build","deploy": "gh-pages -d build"}
Adding these lines inside script block.
So, the final outcome should be like:
{
"homepage": "http://djmayank.github.io/wheather-app",
"name": "wheatherapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"cors": "^2.8.5",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-loader-spinner": "^3.1.14",
"react-scripts": "3.0.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts 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"
]
},
"devDependencies": {
"gh-pages": "^3.1.0"
}
}
3. When you are done with this. Push your code in github. How?? Hoping you know how to create new repository on github. After creating one. Run these commands in terminal.git initgit remote add origin https://github.com/djmayank/wheather-app.git git branch -M mastergit push origin master
Now, after the code is pushed in github, this is the time to host on github pages.
On the terminal run command : yarn run deploy
which will deploy app on the url:
http://{github-username}.github.io/{repo-name}

Leave a comment