如何使用 GitHub 托管我的 React 应用程序？

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/his-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.

Answer 2

There are several options. Depends on what you want to do, do you want to deploy for production or just to test your development ?

You have several options to deploy such as Heroku, Netlify, Github pages.

I can help you with the process of deploying, in addition you can have a look on the different documentations for the solutions listed above.

I personnaly suggest using Netlify, in my opinion realy easy to use.

Depends on what you want to achieve.