React is a an open source JS library that developers prefer to use to build highly responsive UI applications by adopting the use of components. Hosting a React application isn’t as easy as deploying a simple HTML or JS program. This is why I have put up this article to guide developers in every step as they deploy their react app. There quite a number of free hosting services that can be used for this, few of them are heroku, vercel, netlify, ghpages, etc. However, this article would only be explaining how to deploy using gh pages by giving detailed steps.

GitHub Pages is the most popular platform used for deploying React App and hosting web services. It is either used individually or in conjunction with other services to generate high quality, dynamic, and customizable tools. It offers an open-source library to its users that can help them in developing their webpages or adding features that can make them more useful.

STEPS

• Install the gh-pages npm package and designate it as a development dependency using

    npm install gh-pages --save-dev
  

• Go to your package.json file and add a homepage property:

    "homepage": "https://{username}.github.io/{react-gh-pages}"
  

  Remember to replace username with your github username and react-gh-pages with the name of your project or repository.

• Add the following deployment scripts to the package.json file:

    "predeploy": "npm run build",
    "deploy": "gh-pages -d build" 
  

• Add a "remote" that points to the GitHub repository

    git remote add origin https://github.com/{username}/{repo-name}.git
  

• Deploy the React app to GitHub Pages using:

    npm run deploy
  

Voila!! Your page should be hosted with thiss...😊😍

This is very concise and easy to understand. Don't hesitate to like, share and drop your comments .... 😊 😊 You can reach out to me on twitter @princessmaggy7. 😊