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 for the ones 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 the below command to create a 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. Set up a GitHub repository.

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

Image description

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

Image description

Note: Your remote name should be the 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 as follows.

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

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

Add pre-deploy 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 pre-deploy command will create distributed versions of React App.

Image description