Deploy your React App on GitHub

Hey Everyone!...
I know that you came here when you are really tired from deploying your React App on Netlify or Heroku etc. which makes the process little complex.
But are you aware that you can deploy your React application for free on GitHub?

How?

I'm going to show you how my Emoji Search App website is online using GitHub Page.

Here it comes....

How to deploy React applications on GitHub
The following steps are required.

1. Create your react application
I know you did that step, which is why you're here. But the one who didn't, that's for them. But don't worry about it, you can skip it.

• Open the terminal from which you wish to create the project.

• You can create the project however you prefer. I am using below command to create project.
  

npx react-create-project <Project Name>

Here I give the project name emoji-search.

• Now navigate to the created project folder

cd emoji-search

2. Setup a GitHub repository.

• You can create the repository by clicking the New button, or you can push your codes if the repository already exists.

• You can either create a remote repository or, if you already have one, proceed as described for an existing repository.

Note: Your remote name should be **origin and nothing else. Otherwise, you could be left with an error below...**

Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option)`

3. Deploy your React app to GitHub Repo.

• Install GitHub pages npm package.

npm install gh-pages --save-dev

• Open the package.json file

• Add the home,page property to the package.json file inas follows.
  

"https://{username}.github.io/{repo-name}"

{ "homepage": "https://PayalSasmal10.github.com/emoji-search",
  "name": "emoji-search",
  "version": "0.1.0",
  "private": true,

• Add predeploy and deploy properties into the package.json file to the script object.

"scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

• And finally, publish your website.

npm run deploy

Once it is completed, you might see the published message at last and one build folder will be created in your react app project. As predeploy command will create distributed versions of React App.

• Now to go your repo -> settings -> pages

That's how your pages look like now.

After your successful deployment, you GitHub page will be look like below.

You can see that my site name is the same as the one I provided as my homepage in package.json.

And That's all. You have successfully deployed your React Application free of charge.

If you notice an error during your deployment, please let me know in the feedback section.

Thank you for reading the blog. If you like it, please do share.