React on Github Pages: gh-pages package not working

Question

Problem

I am trying to put my React app on github pages. However, I can't even deploy the app to GitHub pages.

My Setup

I am using Visual Studio Code on my Windows 10 machine. I created my React app with create-react-app. I followed this tutorial to set up my app for Github Pages. This is my package.json:

{
  "homepage": "https://MisturDust319.github.io/ign_code_foo",
  "name": "ign_code_foo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.0",
    "gh-pages": "^1.1.0",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-scripts": "1.1.4",
    "reactstrap": "^5.0.0-beta.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy:": "gh-pages -d build"
  },
  "devDependencies": {}
}

The full source is available here

What I've Done

To deploy, you are supposed to just run

npm run deploy

However, when I enter that command, from Windows PowerShell, Git Bash, and the Command Prompt, I just get several variations of "command not found".

In response, I uninstalled gh-pages from dev-dependencies and reinstalled it as a normal dependency. No change. At this point, I've exhausted all solutions I can think of, and Google has only pulled up people who didn't include the deploy command in package.json.

Marillin

What does it say exactly? When you run the command. – Talia

bash: gh-pages: command not found – Marillin

Are you sure gh-pages is actually installed or it only is on your package.json? Try npm install first – Methylene

I had the same problem and found running npm install gh-pages --save-dev again fixed it – Lilithe

I'm getting this error as well. I've installed gh-pages multiple times with the --save-dev flag and I've restarted my terminal but it is still not recognizing this command. 😭 – Chariness

Answer 1

You need to install gh-pages globally by adding "-g":

npm install -g gh-pages

and then

npm run deploy

Docs: https://docs.npmjs.com/downloading-and-installing-packages-globally

Brush

page not found in your link – Panfish

You should never globally install things that are referenced within a project. It's the root of all "works on my machine" issues, as anyone else who checks out the repo doesn't have all of the necessary dependencies to use it. – Breault

Answer 2

You need install gh-pages before running deploy, run:

npm install --save-dev gh-pages then npm run deploy

Charolettecharon

He has it in package.json – Jerky

Answer 3

I cannot add a comment to this post, because I don't have enough score. But there is an error in the your package.json code:

 "deploy:": "gh-pages -d build"

Because, there is an extra semicolon :. It should be:

"deploy": "gh-pages -d build"

Mulligatawny

Answer 4

Little explanation about why this issue is happening ,followed by the fix of this issue

In package.json file

"devDependencies": {  
    "gh": "^2.8.6",  
    "pages": "0.0.16"  
  }    

gets created when we run npm install gh pages —save-dev
but to deploy our project when we run npm run deploy that time it checks in package.json file against deploy which script is mentioned

Since in package.json

"scripts": {  
    "deploy": "gh-pages -d build",  
....}

gh-pages -d build script is mentioned.
It will try to perform this operation but the reason its throwing error like this( if you are mac user) on npm run deploy

sh: gh-pages: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] deploy: `gh-pages -d build`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] deploy script.

is because gh-pages also need to be installed globally as well. So if you run npm install -g gh-pages --save-dev
Issue which you're getting related to gh-pages installation will get resolved.

Giulio

Answer 5

Might be a path problem, it's a usual case for Windows users that try to use cmd instead of *nix terminal. Try to exit and enter cmd if you didn't yet. After that you should ensure that it can access gh-pages package.

Also you might look on answers to a similar question. And ensure that your git version is >= 1.9 as it's told in requirements.

Jerky

Answer 6

I had copied items into the wrong section. In my case my dependencies are above the scripts and I had put two scripts in the dependencies section like a money. Moving them into the right place resolved the issue for me.

Tip: make sure your script are not placed in the wrong section.

Bornu

Answer 7

Very, very likely you don't have git added to your Path variable

If running git in your CMD results in an error - this is the issue.

Add git.exe and other binaries to your path, usually it C:\Program Files\Git\bin and try again running gh-pages -d build

Afterthought

Answer 8

i had to set private to false at package.json

Clarke