How can I host my React application using GitHub?

Question

I have created my React project and pushed the complete repo to GitHub using Visual Studio Code. How can I make my React project live on server with the help of GitHub?

Answer 1

You need to install GitHub Pages package as a dev-dependency.

cd ./into/your-app-folder
npm install gh-pages --save-dev

Add properties to package.json file.

The first property you need to add at the top level homepage, second you must define this as a string and the value will be "https://{your-username}.github.io/{repo-name}" , {repo-name} is the name of the GitHub repository you created it will look like this :

"homepage": "http://joedoe.github.io/your-app"

Second in the existing scripts property you need to add predeploy and deploy.

"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}

If you pushed everything already to Github, the last step is deploying. One liner:

npm run deploy

With this Github will create a new branch called gh-pages, and will be available online. Hope I could help and will work accordingly.

If you stuck, you can look it up on the official docs of React. Deployment Documentation of React

Once on a deployment I had some issues with the official documentation, and I had to delete my username from the "homepage" property in order to make it work. Although I suggest you first do by the docs, and if you encounter problems, you might can give a try.