DEV Community

loading...
Cover image for How to deploy React App to GitHub Pages

How to deploy React App to GitHub Pages

Ibrahim Ragab
null
Updated on ・2 min read

Did you build React app and want to deploy it, following these simple steps you able to deploy and showing the world your amazing app.

I will show how to create and deploy React App using create-react-app and GitHub Pages

Prerequisites :

Make sure you have Node.js and Npm installed in your machine.

Notice You’ll need to have Node 8.10.0 or later on your local machine.

Procedure :

1- First create a repository named my-app using create-react-app.

npm init react-app my-app

2- We need to install GitHub Pages package as a dev-dependency.

cd my-app
npm install gh-pages --save-dev

3- Add properties to package.json file.

The first property we need to add at the top level homepage second we will define this as a string and the value will be "http://{username}.github.io/{repo-name}" {username} is your GitHub username, and {repo-name} is the name of the GitHub repository you created it will look like this :

"homepage": "http://yuribenjamin.github.io/my-app"

Second in the existing scripts property we to need to add predeploy and deploy.

"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}

package.json example

4- Create a Github repository and initialize it and add it as a remote in your local git repository.

Now, create a remote GitHub repository with your app name and go back initialize this
git init
add it as remote
git remote add origin git@github.com:Yuribenjamin/my-app.git

5- Now deploy it to GitHub Pages.

just run the following command :

npm run deploy

successful build

this command will create a branch named gh-pages this branch host your app, and homepage property you created in package.json file hold your link for a live preview, or you can open the branch setting scroll down to GitHub Pages section you will find this:
Your site is puplished

Visit deployed app

6- commit and push your commit to GitHub. Optionally

git add .
git commit -m "Your awesome message"
git push origin master

Recap

We created React App using create-react-app
then we installed gh-pages as a dev-dependency
and in package.json file we added some properties homepage also in existing scripts property we added predeploy and deploy
and created a remote repository and initialize it
and run npm run deploy to generate a production build and deploy it to GitHub Pages.

if you have any questions, please don't hesitate to ask.
Always happy to hear from you

Discussion (228)

Collapse
trishabernice profile image
trishabernice

Hi! Thanks for the tutorial!

I accidentally copy pasted this on my terminal : git remote add origin git@github.com:Yuribenjamin/my-app.git

and now i keep getting this:
Cloning into 'node_modules/gh-pages/.cache/git@github.com!Yuribenjamin!my-app.git'...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/TrishaBernice/.npm/_logs/2020-06-15T16_41_28_880Z-debug.log

I tried git remote rm origin and it still won't work. can you please advice me on what i should do here? I will really appreciate it!

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

No problem
git remote - v
Will display origin and the wrong remote url
To delete it
git remote rm origin
Then check again
git remote - v
Will display nothing time to add the right one
Happy Hacking

Collapse
trishabernice profile image
trishabernice

Hi Ibrahim, Thanks for the fast reply!

I did this:
Trishas-MBP-2:src TrishaBernice$ git remote rm origin
Trishas-MBP-2:src TrishaBernice$ git remote -v
Trishas-MBP-2:src TrishaBernice$ git remote add origin git@github.com:trishabernice/portfolio.git
Trishas-MBP-2:src TrishaBernice$ npm run deploy

and I still got this...
Cloning into 'node_modules/gh-pages/.cache/git@github.com!Yuribenjamin!my-app.git'...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/TrishaBernice/.npm/_logs/2020-06-15T17_01_16_913Z-debug.log

Is there anything else I can try to fix the issue?

Thread Thread
yuribenjamin profile image
Ibrahim Ragab Author

Use http or ssh

Thread Thread
trishabernice profile image
trishabernice

Earlier I did this:
Trishas-MBP-2:src TrishaBernice$ git remote add origin github.com/trishabernice/portfolio...
and i did git remote rm origin and then added the one for ssh and I still got the same error.

Thread Thread
trishabernice profile image
trishabernice

Do you have any suggestions for what I can do? I'll really appreciate it!

Thread Thread
mejimaru profile image
mejimaru • Edited
  1. go to github.com and create Repositories => your-app
  2. create your personal access token github.com/settings/tokens
  3. git remote set-url origin username:yourtoken@github.com/user...
  4. npm run deploy

or

  1. yarn add gh-pages
  2. yarn deploy
Thread Thread
sherazzie profile image
Sherazzie

mejimaru's solution worked if anyone ran into the error that @trishabernicer faced.

Thanks @mejimaru

Collapse
lathryx profile image
Lathryx

In response to @trishabernice 's problem with node_modules/.cache/gh-pages, a fix with this for me was to simply remove/delete node_modules/.cache/gh-pages, then execute npm run deploy once more.

This issue I'm referring to (and its answer) can be found on StackOverflow here: stackoverflow.com/questions/639645...

Collapse
chuchhin profile image
Jesús Sánchez • Edited

I'd the same problem and then read a lot of blogs/articles I find the solution. I'd changed the git in my PATH in this question you can find the solution then open the a new terminal and run the command npm run deploy I hope this help you.

Regards.

Collapse
vicentgn profile image
Vicent García • Edited

Very interesting tutorial Ibrahim!
I have a question: how do you update the production build?
I mean: after deploying the app on GitHub, I realized that I need to change some stuffs. So I have generated new commits. If my app points to the master branch, how can I reflect that new changes on the production build then?

Thanks

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

Make changes commit then deploy again, that's it

Collapse
vicentgn profile image
Vicent García

Ok! Thanks!

Thread Thread
yuribenjamin profile image
Ibrahim Ragab Author

If you want to updating the release check
create-react-app.dev/docs/updating...

Thread Thread
vicentgn profile image
Vicent García

Perfect!
Thanks!

Collapse
firzatullahd profile image
Firzatullah Dwiko Ramadhan

so i commit and push to my origin/github master, then i run "npm run deploy" again?

Thread Thread
mdgolammostafa profile image
Curious React Web Developer

yes

Collapse
mdgolammostafa profile image
Curious React Web Developer

just write a command like below -
npm run deploy

Collapse
idongessien profile image
Idong Essien

Hello ! This was a big help ! However, at step 5, I received this error:

"Cloning into 'node_modules/gh-pages/.cache/git@github.com!idongessien!idngessnio.git'...
Warning: Permanently added the RSA host key for IP address '140.82.114.4' to the list of known hosts.
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! idngessnio@0.1.0 deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the idngessnio@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/idongessien/.npm/_logs/2020-05-17T18_23_28_805Z-debug.log"

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

Setup ssh key bro

Collapse
idongessien profile image
Idong Essien

Forgive me but how do I do that ? I am a newbie here

Thread Thread
yuribenjamin profile image
Ibrahim Ragab Author
Collapse
kokilgupta profile image
Kokil Gupta

Hey I'm getting the same error. Did you resolve it?

Collapse
seamanb2k profile image
DigitalEmma

found this post useful, thank you...I have a question, after i have pushed my react app to github page, when i visit the url it displays blank with no error message shown, any pointers why i'm seeing this happen/
plus this is my first project in react.
Thank you

Collapse
piruthuvi22 profile image
Piruthuvi

I got this same problem in the beginning. If you follow this tutorial correctly,then try this one.

Your home page route should be like this





<Route exact path="/your github repo name">



instead for

and in your rendered component change the




<Link to="/your github repo name">



instead for




<Link to="/">



And another important point you should consider. your github repo name must be valid name for example dots or space should not be in your repo name because that things conflict with URL.
Collapse
learndeepak profile image
Learn-Deepak

Thanks a lot @Piruthuvi.

Collapse
ultrax007 profile image
Rajat Sawarkar

this should be mentioned in the create-react-app docs, was so frustrated because of this simple code change, thanks alot mate @Piruthuvi

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

Thanks, double check your process, if the same error occurred please share with me your github repo and I will help immediately

Collapse
pitysek16 profile image
Katerina Pidan

Hello, Ibrahim.
I have such problem:
fatal: A branch named 'gh-pages' already exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! movie@0.1.0 deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the movie@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Can you help me? Here is my repo github.com/pitysek16/Movies-React-app

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

hii katerina check last commit in this repo
github.com/Yuribenjamin/Movies-Rea...
and already your app running
yuribenjamin.github.io/Movies-Reac...

if you fix this tell me to delete repo above.

Collapse
pitysek16 profile image
Katerina Pidan

Thank you! It is work

Collapse
sirbukti profile image
Bukti Siregar

hi sir, i am experiencing the same error. can you please show me how to fix it?
thank you in advance

Collapse
esobeisaac profile image
EsobeIsaac

Please how where you able to fix that, I'm having same issue here

Collapse
solicks profile image
solicks

Please what did you do to resolve it. I'm having the same issue.

Thread Thread
siminmaleki profile image
Simin Maleki

when you receive error " A branch named 'gh-pages' already exists.", you have to delete the .config sub-folder in gh-pages folder in node_module.

Collapse
zacastaylor profile image
Zac Taylor

Hey Ibrahim, my app won't deploy. I went over your instruction twice but am still having issues. Would you mind taking a look at my repo, it's github.com/ZacASTaylor/zacastaylor.... Thanks!

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

Hello Zac

you did well but you need to make some changes to make your project run online kindly follow this process carefully:

1 - you need to change repo name because of dots in repo name conflict with URL, zacastaylor it's good enough and works with me.

2- in package.json change homepage with new value should be "zacastaylor.github.io/zacastaylor"

2.1- change predeploy to the new value "npm run build", yarn is fine but it's not tested.

3- in App.js change line 25 to be <Route exact path='/zacastaylor'

4- in component => layout => Header.js line 37 to be <Link to="/zacastaylor"

download the project and change the repo name, after that remove the old connection you can check git remote -v you will see this connected with old repo remove connection by git remote rm this command will take one parameter the full command will be git remote rm origin.

if you check again git remote -v will display nothing to your terminal after that do the change above and make a commit with new changes then push and run npm run deploy.

happy to hear from you Zac, kindly update me if this process success or fail

Collapse
zacastaylor profile image
Zac Taylor

Thanks so much for you help Ibrahim, but the issue was that I needed slightly different instructions because I am trying to have my React app hosted on my GitHub user page and not a project page. I followed the instructions here: dev.to/javascripterika/deploy-a-re...

Thanks again!

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
pak11273 profile image
Isaac Pak

video is private...

Collapse
kimberlybone profile image
Kimberly Bone

How would I add changes (such as changing the header, font, color, etc) to the page after deploying? I committed and pushed and it successfully shows on my github repo but when I go to my live link none of my changes show.

My repo: github.com/kimberlybone/my-portfol...
My live site: kimberlybone.github.io/my-portfoli...

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

did you try to delete GH-page branch && build directory, and deploying the app again? if not try this

Collapse
legyta profile image
Ligita Montvilaite

Hey - does this mean, everytime you update something on the page, we need to Delete Gh-page branch && delete build directory folder, and basically deploy again?

Is there no automatic update happening? (i.e. like, when deployed on netlify or smhtg.) ? Thanks!

Thread Thread
yuribenjamin profile image
Ibrahim Ragab Author

to update run npm run deploy after each update

Thread Thread
omerhamid profile image
Omer

as you said committing and deploying works fine but you have to wait for the change to take an effect on the live link ( and sometimes the repo itself)

Collapse
helenemartin profile image
Hélène Martin

Hello Ibrahim, thanks for the tutorial.. a question.. I pushed my commit to a master branch before pushing to a remote.. How do I get on further? Do I have to do git checkout -b gh-pages? please let me know. Thanks in advance.. warm regards :)

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

Just git push

Collapse
helenemartin profile image
Hélène Martin

thanks but when ? I created a main page before a gh-pages what do I do? Do I create a gh-page on command line? sorry if it is a stupid question

Thread Thread
yuribenjamin profile image
Ibrahim Ragab Author

I don't get it!
But delete all branches remote and local
You now has a master branch commit your work and deploy it again

Thread Thread
helenemartin profile image
Hélène Martin

Sorry forget about it

Collapse
mirelescloud profile image
Alex

Great article. I got it to work publishing the react app. Note that for the homepage I used "https" rather than "http". Also since I used yarn for my packages I tried to use it for the deploy as well, but it didn't work. I got it to work with npm however. Thanks again.

Collapse
springdot profile image
Akanksha priya

Hi! At step 5, I added SSH keys however I received such error:
Cloning into 'node_modules/gh-pages/.cache/git@github.com!Spring-dot!face-detector.git'...
ERROR: Repository not found.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! face-detector@0.1.0 deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the face-detector@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/akanksha/.npm/_logs/2020-05-21T06_16_57_148Z-debug.log
Please help!! I am a beginner!

Collapse
strel9 profile image
Collapse
tianyiz8 profile image
tianyiz8 • Edited

Hello, i am doing the routing for my website, but only the landing page shows up. Could you have a look? I think the problem should be in index.js, main.js, App.js. Thanks!!
tianyiz8.github.io/personal-website/
github.com/tianyiz8/personal-website

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

Hey thanks for your comment, handling route in react can easly done by using react router package, not by default way as i saw in your app, also read about Single Page App, and declaritive programming
github.com/ReactTraining/react-router
Happy Hacking!

Collapse
tianyiz8 profile image
tianyiz8

Hello! Could you be more specific? I did use react-router-dom, and where are declaritive programming and Single Page App? I still have no idea how to make it work.
Thanks!

Thread Thread
yuribenjamin profile image
Ibrahim Ragab Author

if so then why you declare a tag to route
check
reacttraining.com/react-router/web...

Collapse
jaykeeshow profile image
jaykeeshow

Very nice post Ibrahim. Really helped me.
I was able to deploy my page to gh pages. The only thing is that my background image is not loading.
I have the image in my src folder. While running the app on my local server, The site was displaying my image perfectly. While i deploy on gh pages, image disappears.
I have tried adding the image using jsx, but to no avail. Previously i imported the image to my scss. Thought that was the problem.
Can someone tell me what's going on?
app is deployed here- jaykeeshow.github.io/simple-app/

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

Thanks buddy, I see your image doesn't load i saw the build file in yout code, try to build and run build locally before you deployed it and check why the image didn't appear

Collapse
jaykeeshow profile image
jaykeeshow

dear ibrahim, i dont know how to run build locally. when i run- npm install -g serve,
I get an error.

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR! stack: "Error: EACCES: permission denied, access '/usr/local/lib/node_modules'",
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jrajkumar/.npm/_logs/2021-02-23T10_56_22_458Z-debug.log
jays-Air:simple-app jrajkumar$

Collapse
itsgiovanni profile image
ItsGiovanni • Edited

Lovely. Thank you for this.

If you're having the following error:
Host key verification failed.
fatal: Could not read from remote repository.

Remove your remote:
git remote remove origin

Then create a new remote. no marks:
git remote add ht tps://github.com/username/repo-name.git

Using the git@github.com:... syntax ends up using SSH to clone, and inside the container, your private key is not available.

Collapse
17radf profile image
Raihan

Created this account just for thanking you, mine says invalid url all the time. Tried changing the homepage, reinstalling the package, removing the ssh remote, and even switching the node version lol. Thanks, your solution works.

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

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

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
bhargav_25 profile image
Bhargav Gohil • Edited

hey, Ibrahim I don't know where I am going wrong can you please check where is the issue

github.com/Bhargav252000/fakegram

the error I am getting

Cloning into 'C:\Users\BHARGAV\Desktop\React-Apps\fake-gram\node_modules\.cache\gh-pages\github.com!Bhargav252000!fake-gram.git'...
fatal: invalid branch name: init.defaultBranch =

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fake-gram@0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fake-gram@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\BHARGAV\AppData\Roaming\npm-cache\_logs\2020-10-09T13_30_51_074Z-debug.log
Collapse
pniebrzydowski profile image
pniebrzydowski

In case anyone else runs into the same issue that I had. When running the build command for the first time, I got error:

fatal: ambiguous argument 'HEAD': unknown revision or path not in the working tree.

Creating a new branch gh-pages manually before running the deploy fixed this.

Collapse
pauluzo profile image
pauluzo

Hello Ibrahim. I followed your tutorial and I am trying to deploy my first app to github pages. I keep getting this error when I run "npm run deploy".

gh-pages -d build

Host key verification failed.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Any help please?

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

make sure that you provide the right credentials

Collapse
mjach2 profile image
mjach

I deployed my react app to GitHub and its working but not what I expected. When I run the app on the localhost its works perfectly and I can see all the pictures and all the navigation works. After deploy on Github, I can not see anymore the images which were a relative path link to my app and also navigation back button seems not working. Any hints on how to overcome these issues. Here is react app Github deployed Link- Your site is published at mjachowdhury.github.io/mjacportfolio/

would you please look into this

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

hey mjach your problem-specifically in routing there's a difference between routing on dev server and the production double-check this point I know you can do it, and if not sadly contact me and I will fix this for you

Collapse
devchrisdev profile image
Chris Joshua

What is wrong with mine, i do set up the ssh key. but i still got this error.

Cloning into 'node_modules\gh-pages.cache\git@github.com!DevChrisDev!ChrisJoshuaManuel.git'...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chris-resume@0.1.0 deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the chris-resume@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Client\AppData\Roaming\npm-cache_logs\2020-06-20T00_08_24_598Z-debug.log

all help would be much appreciated.

Collapse
kriviears profile image
Kriviears • Edited

I followed the instructions and got the same messages from the terminal up to right under the "gh-pages -d build" and then I get these lines

gh-pages -d build

bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'github.com': Invalid argument

my repo is github.com/Kriviears/React-Portfolio

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

hey Kriviears, first you should fix all bugs before deploy, second check this repo this is your app running successfully, and double-check the fix commit after you fix this problem notify me to delete you repo = >
yuribenjamin.github.io/React-Portf...
github.com/Yuribenjamin/React-Port...

Collapse
christopherdent profile image
Christopher James Dent

Just wanted to add my thanks for this guide, it's the best one I've seen and I reference it whenever I'm deploying a React app! Plus your follow up to people's questions below have gotten me out of a few sticky situations. Thank you very much!

Collapse
andrii profile image
Andrii

Hi, I have this error:
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

can you provide your github repo

Collapse
andrii profile image
Andrii

Sure: github.com/andrii1
I'm trying github pages here: github.com/andrii1/andrii1.github.io

Thread Thread
yuribenjamin profile image
Ibrahim Ragab Author

in this tutorial, I introduced deploying react App to Github pages, I see your app didn't consume react packages, so you can deploy your app using the normal process by open settings navigate to GitHub Pages then in Source choose the master branch if you want run your app from the master branch.
happy hacking!

Thread Thread
andrii profile image
Andrii

Sorry, can you specify a bit? I need to push it in separate repository inside /andrii1.github.io?

Thread Thread
yuribenjamin profile image
Ibrahim Ragab Author

what I need to say your app not a react app so you don't need this tutorial to deploy it to gihtub you can deploy it from the setting

Thread Thread
andrii profile image
Andrii • Edited

So, I have my React app in separate folder my-app, when I'm trying to upload it to GitHub, I see this:
dev-to-uploads.s3.amazonaws.com/i/...

Thread Thread
andrii profile image
Andrii

Update: issue was solved with:
git push -f origin master

But, still andrii1.github.io/my-app is not live..
github.com/andrii1/my-app

Collapse
ian1202 profile image
ian1202

Hi Ibrahim, I have recently built my first react project. Despite having followed all your instructions on the thread, my app won't deploy. Would appreciate it if you could take a look at it for me:

ian1202.github.io/react-project/

Thank you!

Collapse
yuribenjamin profile image
Ibrahim Ragab Author • Edited

Not all the instruction I think, do this changes to package dot json, change home to homepage and add the right value "http://{username}.github.io/{repo-name}" . Solved

Collapse
ian1202 profile image
ian1202

It worked! Sorry for having missed that detail. Thank you!

Thread Thread
yuribenjamin profile image
Ibrahim Ragab Author

Your are welcome, Alawys happy to help 🙂

Collapse
shvmsrma profile image
Shivam Sharma

Hi Ibrahim, First Thank you for a such a wonderful and helping blog.I have one doubt that i was able to succesfully deploy my react app but when i make changes locally i am unable to get those changes on my react app. Can you please guide how to do that in a proper way?

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

Yeah make changes commit and run the deploy again to generate fresh build your terminal will tell you the rest,
Another way delete build delete gh branch make changes rub deploy
Happy Hacking

Collapse
lakinduk profile image
Lakindu Kariyawasam • Edited

Really important tutorial. Thank you!

There's an error when I try to install react-bootstrap to my app.

react-bootstrap error

any suggestions on that?
Im very new to react.

Collapse
marissa profile image
Marissa • Edited

Hello, Ibrahim! Thank you for your tutorial. I was just wondering what changes would be necessary if I wanted to deploy the react app directly to the homepage (eg.: username.github.io), if that's even possible.

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

Hey Marissa, yea check this dev.to/javascripterika/deploy-a-re...
Happy hacking!

Collapse
irenkaaa profile image
Irena Mishonova

Helloooo :)
So, I am begginer... and I did what you "said"...and it worked... although I have two issues that I dont understand.

  • that is supposed to be my project page - irenkaaa.github.io/sweet-shop-proj... ... when u go is showing my 'not found page'... but when u click on the header parts, it is working - but with changed address - irenkaaa.github.io/{home?store?login ..etc.}..and it is only working the views... my node.js server is not exactly on there..
  • also the other thing... after the deploying , i got that build folder.. and basically...all my files changed and i caouldnt working on the project..Idk how but I managed to return them and now I can work, but I am totally lost...
Collapse
yuribenjamin profile image
Ibrahim Ragab Author

first issue check routing, second cuz you watch gh-branch change to master
happy hacking!

Collapse
irenkaaa profile image
Irena Mishonova

Thanks a lot! On my way to check the stuff!!!

Keep safe from Covid!

Collapse
eaindrawp profile image
Eaindra Wun Pyae

Hello Ibrahim, my app deploys now, but it is showing only HTML plain webpage. Would you mind looking at my Github repo, and guide me any necessary changes to my project? github.com/eaindra-wp/portfolio

Collapse
yuribenjamin profile image
Ibrahim Ragab Author

hey Eaindra can you make master is the default, not Github pages to be able to clone your repo.
and put "homepage": "xyz....", at the top of your module
and check console errors, make sure console is free!

Collapse
eaindrawp profile image
Eaindra Wun Pyae

Hello Ibrahim, I have updated the steps that you suggested, but it seems like my react-app cannot find the CSS files yet.

Collapse
mathcodes profile image
Jonathan P Christie