DEV Community

Cover image for Deploy your React App on GitHub
Payalsasmal
Payalsasmal

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

Here I give the project name emoji-search.

  • Now navigate to the created project folder
cd emoji-search
Enter fullscreen mode Exit fullscreen mode

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.

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 **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)`
Enter fullscreen mode Exit fullscreen mode

3. Deploy your React app to GitHub Repo.

npm install gh-pages --save-dev
Enter fullscreen mode Exit fullscreen mode
  • Open the package.json file

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

"https://{username}.github.io/{repo-name}"
Enter fullscreen mode Exit fullscreen mode
{ "homepage": "https://PayalSasmal10.github.com/emoji-search",
  "name": "emoji-search",
  "version": "0.1.0",
  "private": true,

Enter fullscreen mode Exit fullscreen mode
  • 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"
  },
Enter fullscreen mode Exit fullscreen mode
  • And finally, publish your website.
npm run deploy
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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

That's how your pages look like now.
Image description

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

Image description

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.

Image description

Top comments (0)