DEV Community

Discussion on: How to deploy React App to GitHub Pages

Collapse
lkian profile image
Leah

Hi. I am having issues deploying my React app to github pages. Could you take a look?
github.com/LKian/ToDoList

I added homepage to package.json, along with
"predeploy": "npm run build",
"deploy": "gh-pages -d build"

I added the gh-pages as a dev dependency

The error seems to occur when I run "npm run deploy"

todolist@0.1.0 build /mnt/c/Users/Admin/Desktop/Code/todolist
react-scripts build

internal/modules/cjs/loader.js:638
throw err;
^

Error: Cannot find module 'react-dev-utils/crossSpawn'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
.
.
.
.

Thank you!

Collapse
yuribenjamin profile image
Ibrahim Ragab Author • Edited on

hello Leah
give it try again I cloned your repo and walked through my tutorial,
and everything working fine with me check ...
dev-to-uploads.s3.amazonaws.com/i/...
dev-to-uploads.s3.amazonaws.com/i/...
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
lkian profile image
Leah • Edited on

Oh thanks for the screenshots. The only difference I noticed was that for some reason even though I installed "gh-pages" yesterday, it wasn't there. I re-installed and gh-pages now appears in package.json.

I then tried to npm run deploy and am still getting an error. Any other thoughts as to what is wrong?

Creating an optimized production build...
Failed to compile.

./src/index.js
Error: [BABEL] /mnt/c/Users/Admin/Desktop/Code/todolist/src/index.js: Cannot find module '@babel/core' (While processing: "/mnt/c/Users/Admin/Desktop/Code/todolist/node_modules/babel-preset-react-app/index.js")

I read that the gh-pages is supposed to create a new branch but that is not happening. I'm going to try to delete the repo and start from scratch. After I make a new repo, should I still be running the following setup commands?
git init
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:LKian/ToDoList.git
git push -u origin master

and THEN running npm run deploy? Still getting an error

Update: I deleted node_modules and package-lock.json and npm installed again. And it says published!!!!!!!!!! Still not showing up on the live page but I know sometimes it takes a while. Will keep you updated :-)

lkian.github.io/ToDoList/index.html

Got it. Apparently you have to add "/index.html" to the path

Thread Thread
yuribenjamin profile image
Ibrahim Ragab Author

no, just the URL that equal to the home page key in the package.json
lkian.github.io/ToDoList
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
milanzmitrovic profile image
Milan Mitrovic • Edited on

I have same issue. How did you solve at the end?

Actually, issue is with path of files that should be included i.e. imported from index.html file.

milanzmitrovic.github.io/milanzmit... should be milanzmitrovic.github.io/my-app/fa... . I do not know why it is written two times milanzmitrovic/ ???