CODEWITHSUNDEEP
reactjsgithub
Cherry
Cherry

Reputation: 91

How can I host my React application using GitHub?

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?

Upvotes: 7

Views: 8296

Answers (3)

Benji
Benji

Reputation: 430

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.

Upvotes: 7

mohammadhossein taeizadeh
mohammadhossein taeizadeh

Reputation: 1

You have to do the following things:

  1. Push your project to GitHub

    git add .
git commit -m "Your message"
git push

  2. To create a page on GitHub, you should:

    1. Add this to your package.json: "homepage": "https://myusername.github.io/my-app",

    2. npm install --save gh-pages

    3. Add the following scripts in your package.json

      "scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  "start": "react-scripts start",
  "build": "react-scripts build",
}

  3. Run npm run deploy

Now you'll have a new branch and your page in GitHub will be creating from this new branch.

Upvotes: 0

game.changer
game.changer

Reputation: 67

with the latest version of create-react-app you can use empty homepage parameter in package.json

{... "homepage" = "", ...}

Upvotes: 0

Related Questions