Deploying a react app to github pages
Did you build React app and want to deploy it, following these simple steps you able to deploy and showing the world your amazing app.
I will show how to create and deploy React App using create-react-app and GitHub Pages
Prerequisites :
GitHub Account.
Install Git in your machine and Set up Git.
Make sure you have Node.js and Npm installed in your machine.
Install Node.js
Install Npm
Install Github desktop app to easen working with git
Notice You’ll need to have Node 8.10.0 or later on your local machine.
Procedure :
1- Clone this repo to follow along.
2- We need to install GitHub Pages package as a dev-dependency.
cd ReactPortfolio
run npm install to install node modules
npm install gh-pages --save-dev
3- Add properties to package.json file.
The first property we need to add at the top level homepage
second we will define this as a string and the value will be
"http://{username}.github.io/{repo-name}" {username} is your GitHub username,
and {repo-name} is the name of the GitHub repository you created it
will look like this :
"homepage": "http://paulodhiambo.github.io/ReactPortfolio"
Second in the existing scripts property we to need to add predeploy and deploy.
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
{
"homepage": "https://paulodhiambo.github.io/ReactPortfolio", #New
"name": "tuto",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "yarn run build", #New
"deploy": "gh-pages -d build" #New
},
"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": "^2.1.1"
}
}
```
`
4- Add the repository to the github desktop app as a local repository.
5- Publish the repository to github
6- Now deploy it to GitHub Pages.
just run the following command :
*yarn run deploy* or <br/>
*npm run deploy*
This command will create a branch named gh-pages this branch
host your app, and homepage property you created in package.json
file hold your link for a live preview, or you can open the branch
setting scroll down to GitHub Pages section you will find this:
[Visit deployed app](https://paulodhiambo.github.io/ReactApp)
7- Boom!! you site is live on github pages.
Top comments (0)