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.

Solution 1

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

npm install -g gh-pages --save-dev

and then

npm run deploy

Docs: https://devdocs.io/npm/getting-started/installing-npm-packages-globally

Solution 2

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

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

Solution 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"

Solution 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.

View more solutions

Comments

[Carlo]

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

[xiaodeaux]

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. 😭

[Alexey Nikonov]

page not found in your link

[Eric Haynes]

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.