How to create-react-app with GitHub pages deploy (the easiest way in 9 steps)
I’m going to the point: we need to create fastest and easiest as possible a react web app with a deploy, I prefer with GitHub Pages just because I got my repositories there. So, let’s go to code!
1. Make sure you got, at least, this libraries versions in your console:
a) Node.js:
b) npm:
c) create-react-app*:
- If you haven’t this, you can install it globally ($ npm install -g create-react-app) or locally ($ npm install create-react-app). I recommend using the global installation to make easy your next projects.
2. Make sure you have your GitHub account and a command-line Git client* configured.
- If you haven’t this configurations, please follow to Set up git.
3. Create a repository on GitHub named as you need.
For this examples, I’m going to use the name: { myRepository }. So, go to GitHub and create yours, empty for sure, I mean without README.md, .gitignore, LICENSE, or any other files. You could unmark this options when you create it.
4. Create a React App from your computer
Write on your console: the command line to create a react app + {the name of your App, wa} I used to use the same name I choose for my repository on GitHub but without capital letters, but you can name it differently if you wish. It could take a few minutes.
$ npx create-react-app my-repository
5. Prove your react-app!
a ) Enter in your project folder:
$ cd my-repository
b) Initialize it to prove it! :
$ npm start
6. Install gh-pages as a developer dependency on your project
Inside your folder’s project:
$ npm install gh-pages — save-dev
Wait until this process has ended to continue with the next step, could take a few minutes.
7. Add to your project’s package.json file:
a) In the first level of the .json, where the “name” and “version” properties are, the property of
“homepage”: http://{gitusername}.github.io/{myRepository}
Git username is, for sure, your own user, and myRepository is the same name the empty repository you’ve created.
b) Inside the property of scripts, predeploy and deploy:
“scripts”: {
“predeploy” : “npm run build”,
“deploy” : “gh-pages -d build”
}
8. Initialize Git and add your remote repository to your project
In your repository folder, copy your link from your GitHub repository and paste it on to add as remote:
$ git init
$ git remote add origin https://github.com/{gitname}/{repositoryname}
9. Deploy!
Simply run the next command (on your projects folder, as when you run npm start):
$ npm run deploy
You will notice this command creates a new branch on your repository called “gh-pages”, with the new content of deployment, it will make this working, so don’t merge this content into your master, it’s not necessary.
10. Update your changes in GitHub* (optional)
$ git add .
$ git commit -m “Create a react project with deploy on GitHub Pages”
$ git push origin master
It will save your changes on a branch master, now, a master branch appears on your repository. That’s all, now to write your own code!