Nice video man!! If someone is running into the problem where the site displays some React Learn page or whatever, make sure you marked "gh-pages" on the page setup of GitHub pages settings.
For those using Vite, npm run build will by default use a "dist" folder rather than a build folder, so deploy won't recognize it. You can instead add the following to your package.json scripts! "predeploy": "npm run build", "build": "vite build", "deploy": "gh-pages -d dist"
DUDE!!! I am a beginner and this stressed me out for days!! Glad I bump into your video!! The other ones are super hard to follow but yours is AWESOME!! I LOVE YOU MAN!!!(No homo)
Thank you so much, I was really hoping that I don't run into issues the night before the big career fair day at my university, so I can show them my react-app portfolio.
Thats very cool! My question: how to deploy an app with a database and link it? Can I do it in github pages or should I just rent a server with mysql installed or something?
Hey! I followed everything in the tutorial minus creating a repo (my repo was already set up). Everything ran successfully with no errors but I'm getting a 404 error on the page. Any ideas? I'm not using routing or anything like that.
Doesn't work to me, when i write npm run deploy it's starts building but in the end it gives me this error: ENOENT: no such file or directory, stat 'C:\Users\fabio\Desktop\fabio-psd\build'. Idk how to fix it and when i open the web page it gives me site not found. Help
I'm getting this error Error: spawn git ENOENT at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19) at onErrorNT (node:internal/child_process:477:16) at processTicksAndRejections (node:internal/process/task_queues:83:21) Emitted 'error' event on ChildProcess instance at: at Process.ChildProcess._handle.onexit (node:internal/child_process:288:12) at onErrorNT (node:internal/child_process:477:16) at processTicksAndRejections (node:internal/process/task_queues:83:21)
This was super helpful and I love your style of teaching (and it's always nice to hear another Northern accent) ...but I'm having an issue. My gh-pages is just displaying my README. :( I'm guessing that has to do with it not finding my homepage?
I might be just missing something here but it's bugging me so I'll ask anyway.. when you are CLEARLY running the deploy script.. how is npm also running the predeploy script??
I have a problem with this. I did all the steps but I only get a blank screen, and when I inspect the console it tells me for the scripts enable javascript to run app, and I've done this several times and also for the website do I need to be in branch gh-pages or in master branch to make the website?? bc when I go masters i get the instructions file if I go to gh-pages branch I get the white page with enable js, nvm it worked idk how but at least it works so another question if I make some changes to my app all I need is to just do the same as before add the changes commit to it and then push it , but do I push it to my masters branch or gh-pages branch?
When you want to push changes, all you need to do is commit all your files like you did in the first step (except add origin, you only need to do that once), and then run “npm run deploy” as you did in the video. It is the exact same process, you don’t push to the gh-pages branch directly :) Hope this helps
@@jamesgrimshaw ok that worked but when I modified some more now I'm getting the blank page again with saying enable js, when I first made a push it did change what I pushed but when I pushed some files and deployed it that when it went to the blank screen. here's my github if you want to see it github.com/pablovisual/pabloarmandosandoval
nvm i found the problem, so with the route path I set to empty my website couldn't configure where the homepage was so it didn't show anything. but when i changed the route path to the actually path itself it was able to find it
Sad to see such less subs :( I have a doubt though, I made a login page using firebase authentication. now i want to deploy that app on github but the problem is i don't want the apikey to be exposed what do i do
This is only for static frontend apps, all code will be exposed. If you need something on the server side, this is not the solution for you I'm afraid. Try something like AWS, they have a free tier so it will likely cost you nothing for the first year.
hey! when I upload my website it only shows some part of it, like for example I am deploying the whole thingbut when I click the link it only shows the navbar part and none of the links work on the navbar
@@jamesgrimshaw How do I choose my home tab, to load it when I click the link? Now it sends me to a blank page, I can only see my navbar and footer atm, but when I click home tab etc, it works properly...
Didn't get it to work - probably something I did wrong. But I want to say that the video was spot on. No bullshit, just straight to the point and very clear. Subscribed!
When I do this, it uploads my build folder to the github repo. Is there any way for it to also push the src and public folders/files? Basically I want to still upload everything, not just the build folder.
@@jamesgrimshaw So on my page, I have two branches: one is the master branch with my entire codebase and one for the gh-pages. After force pushing my main codebase to github using normal commands, I then ran the deploy commands to see if anything changes, but my website instead now shows the readme page again. Am I supposed to do anything with the two branches?
@@Swagmaster4000 the master branch is where your entire code base lives, that’s where you push to, and the gh-pages branch is for the hosted website, you don’t have to manage that branch. The predeploy script will create a build folder, and the deploy script sends that to the gh-pages branch which is where the hosted website gets its data from. Hope this makes sense :)
@@jamesgrimshaw Makes a lot of sense. Another thing I learned is that sometimes you might need to go into github pages settings in the repo and toggle the right branch to make everything work out
A tutorial that is less than an hour, what?! 😂 Going to be experimenting with various formats and lengths (as an excuse to play around in my video editing software), so would love any suggestions you have!
@@jamesgrimshaw Your video is well edited and got the point across nicely! Only advice I got is to upload consistently and pray to the RUclips algorithm 🙏
![[4K] Watch SpaceX Catch A Starship Rocket From Space!!! #IFT5](http://i.ytimg.com/vi/pIKI7y3DTXk/mqdefault.jpg)
Every time I redo my portfolio website it's such a pain to get it deployed again. This video was so helpful. thank you so much!!!!
Glad you found it useful! 😄
Nice video man!!
If someone is running into the problem where the site displays some React Learn page or whatever, make sure you marked "gh-pages" on the page setup of GitHub pages settings.
Thank you so much! I was looking for a solution for this
For those using Vite, npm run build will by default use a "dist" folder rather than a build folder, so deploy won't recognize it. You can instead add the following to your package.json scripts!
"predeploy": "npm run build",
"build": "vite build",
"deploy": "gh-pages -d dist"
You're awesome man! you explained everything in such a simple manner!
1:58 before pushing you need to create "main" branch by typing "git branch -M main". I received an error until i wrote that command
Thanks a lot for this video lol. Crisp explanation and hence an absolute time saver. Couldnt ask for anything more! 😀
This was tremendously helpful. Wish you all the growth in RUclips.
DUDE!!! I am a beginner and this stressed me out for days!! Glad I bump into your video!! The other ones are super hard to follow but yours is AWESOME!! I LOVE YOU MAN!!!(No homo)
Very helpful vid James!
Appreciate the simplicity and easy to follow steps.
Thanks that worked for me. After many tries finally I hosted my react app.
I thought ctrl C was to copy? why would I copy the url then go to the cmd line and hit ctrl C again?
Don't Quit Your channel, Your content are fantastic❤, please create regular content🙏
Thank you so much, I was really hoping that I don't run into issues the night before the big career fair day at my university, so I can show them my react-app portfolio.
wow this video saved me from constant head ache, thanks bruv
Thanks a lot for this clear explanation. You saved my day!
Thats very cool! My question: how to deploy an app with a database and link it? Can I do it in github pages or should I just rent a server with mysql installed or something?
Hey! I followed everything in the tutorial minus creating a repo (my repo was already set up). Everything ran successfully with no errors but I'm getting a 404 error on the page. Any ideas? I'm not using routing or anything like that.
same
Yeah me too. But in my case, the website turns into readme
@@rizkialimaulana6193 Same :(
@@JacobAuthier Make sure ur username doesnt have any space or capital letters. If it has capital letters or space, then it will cause that issue
@@chandangr9033 so you mean even though your user name has uppercase you just type lower case?
This channel deserves a million subscribers
Thank you so much, deployed my app without any problem. That was smooth 😃
Doesn't work to me, when i write npm run deploy it's starts building but in the end it gives me this error: ENOENT: no such file or directory, stat 'C:\Users\fabio\Desktop\fabio-psd\build'. Idk how to fix it and when i open the web page it gives me site not found. Help
Hey, I am facing same issue, so how did you solve this problem
Wonderful 5 mins
Brilliantly explained
Thank you for the video. You deserve more subscribers
Thank you! This video was extremely helpful.
I'm getting this error
Error: spawn git ENOENT
at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
at onErrorNT (node:internal/child_process:477:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (node:internal/child_process:288:12)
at onErrorNT (node:internal/child_process:477:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21)
I m getting the same error . Did you find the solution?
Hey thanks for the video but I can't see the entirity of the website that I see locally on github pages. Do you know why?
This was super helpful and I love your style of teaching (and it's always nice to hear another Northern accent) ...but I'm having an issue. My gh-pages is just displaying my README. :( I'm guessing that has to do with it not finding my homepage?
I might be just missing something here but it's bugging me so I'll ask anyway.. when you are CLEARLY running the deploy script.. how is npm also running the predeploy script??
I have a problem with this. I did all the steps but I only get a blank screen, and when I inspect the console it tells me for the scripts enable javascript to run app, and I've done this several times and also for the website do I need to be in branch gh-pages or in master branch to make the website?? bc when I go masters i get the instructions file if I go to gh-pages branch I get the white page with enable js, nvm it worked idk how but at least it works so another question if I make some changes to my app all I need is to just do the same as before add the changes commit to it and then push it , but do I push it to my masters branch or gh-pages branch?
When you want to push changes, all you need to do is commit all your files like you did in the first step (except add origin, you only need to do that once), and then run “npm run deploy” as you did in the video. It is the exact same process, you don’t push to the gh-pages branch directly :) Hope this helps
@@jamesgrimshaw ok that worked but when I modified some more now I'm getting the blank page again with saying enable js, when I first made a push it did change what I pushed but when I pushed some files and deployed it that when it went to the blank screen. here's my github if you want to see it github.com/pablovisual/pabloarmandosandoval
nvm i found the problem, so with the route path I set to empty my website couldn't configure where the homepage was so it didn't show anything. but when i changed the route path to the actually path itself it was able to find it
@@Lokoislive great, glad to hear you figured it out. Just visited your website and it looks great!
@@jamesgrimshaw thanks its still a working progress but ill get there
thanks a lot to put a sense of humor around it
Thanks you James, you help me a lot with this github pages!!
Your video is really helpful 🙌🙌
Thanks a lot sir, after watching more than 10 videos i got the right solution.
Sad to see such less subs :(
I have a doubt though, I made a login page using firebase authentication. now i want to deploy that app on github but the problem is i don't want the apikey to be exposed what do i do
This is only for static frontend apps, all code will be exposed. If you need something on the server side, this is not the solution for you I'm afraid. Try something like AWS, they have a free tier so it will likely cost you nothing for the first year.
@@jamesgrimshaw okay, Thanks!. I think deploying on netlify is good Idea for my project. And the public fikes can be shared on github
@@RiteshNEVERUNIFORM Sounds great 😄
Thanks Bro, It Worked
Can You Please Tell Us The Name Of Your VS Code Theme And The Folder Icons Theme Name?
when I run npm run deploy , will it remove files from github too if I remove them in my project? or do I have to do everything manually
This didn't work for me. How does an app in a fresh repo get added to a separate gh pages repo? I already have a gh pages repo with stuff inside it.
Awesome, thanks for the tips, you were answering questions that I didn't know how to ask 😅 Thanks again and God bless
Superb presentation. quick and easy . very usefull
can we use a domain bought somewhere else? If so, care to do a little tutorial XD
hey! when I upload my website it only shows some part of it, like for example I am deploying the whole thingbut when I click the link it only shows the navbar part and none of the links work on the navbar
That was beautifully scripted! Very thorough and quickly explained
Man like Zenny 😍 nothing makes me happier than seeing you here
@@jamesgrimshaw I will be coming to you a lot for your RUclips when I need information! Maybe I could make some requests?
@@zenragez of course! DM me I’m always looking for new video ideas :)
@@jamesgrimshaw How do I choose my home tab, to load it when I click the link? Now it sends me to a blank page, I can only see my navbar and footer atm, but when I click home tab etc, it works properly...
Didn't get it to work - probably something I did wrong. But I want to say that the video was spot on. No bullshit, just straight to the point and very clear. Subscribed!
Hey! my react app is inside frontend folder of my repo.. What additional steps do i need to perform?
Excellent tutorial. Short and to the point! 💥💥
Thank you. If everything is fine please if possible upload some other project videos. You were great at making us understand.
Well ...perfect !! ..and straight to point !! Thank you very for sharing it !! 😁👍
How can I do this if I used some sort of API, and in JS file there is my private API key, shouldn't API key be private?
Excellent video helped me deploy my first react app ❤
Thanks a lot. ❤❤ I finally deployed my frist react app.
Awesome bro!! 💥💥
Man, you are amazing! Thanks a lot :)
Very easy tutorial..aaaaaa it helps me a lot to deploy my react project. I can go to sleep now 😂
Good job, thank you for clean explanation and help.
Awesome tutorial but it doesn't work for me, my main file is in a sub folder, please ca you help me?
ty for the concise guide!
Thanks for the excellent video it helped me & I deploy my first react app.
It's showing blank page
thank you so much :) you got new sub and new github follower ;)
my application is pubished yet directly it displays my 404 pages configured by the route /* what to do ?
How many projects can we publish using this method?
Thanks man, it works!
Excellent DUDE!
how do you fix a "ENOENT: no such file or directory, stat" error?
your'e a life saver bro... thanks so much...
That helped a looot. Massive thanks.
Nice tutorial. Thank you!
If your page works but if you try to refresh it and says 404 error, change your:
ReactDOM.render(
,
document.getElementById('root')
);
to this one below
ReactDOM.render(
,
document.getElementById('root')
);
Thank you. That is what exactly I needed
ohh man !! Thanks a million. You saved my life.
Subscribed in less than 10 secs :)
I uploaded it up GH pages but now my images arent showing. Any idea why? thanks !
I use process.env.PUBLIC_URL + "/assets/image.png" and also set the variable to match the homepage used in package.json.
thanks a lot man, this was really helpful
You are insane. Thanks so much brooooo
When I do this, it uploads my build folder to the github repo. Is there any way for it to also push the src and public folders/files? Basically I want to still upload everything, not just the build folder.
push your entire codebase to GitHub using the normal git commands, in addition to using the deploy commands
@@jamesgrimshaw So on my page, I have two branches: one is the master branch with my entire codebase and one for the gh-pages. After force pushing my main codebase to github using normal commands, I then ran the deploy commands to see if anything changes, but my website instead now shows the readme page again. Am I supposed to do anything with the two branches?
@@Swagmaster4000 the master branch is where your entire code base lives, that’s where you push to, and the gh-pages branch is for the hosted website, you don’t have to manage that branch. The predeploy script will create a build folder, and the deploy script sends that to the gh-pages branch which is where the hosted website gets its data from. Hope this makes sense :)
@@jamesgrimshaw Makes a lot of sense. Another thing I learned is that sometimes you might need to go into github pages settings in the repo and toggle the right branch to make everything work out
I have done all thing similar like in this video but still my site is live showing 404 error?
I couldn't get my React website setup
I followed through the instructions but it renders the site without the content
use hashrouter instead of router
תודה רבה 1000 פעם! תבורך מפי עליון!!!
bro. how do you host react js frontend with backend. my backend login is not working. how do you do it??
Only readme file is showing 😭😭😭😭😭😭😭😭.. pls help 🙏🙏🙏🙏
I love free content. Nice video love it
Awsome 🔥
I can't see the images in my project why ? after publish and what the benefit from predeploy?
Try setting the PUBLIC_URL to your GitHub page URL then use process.env.PUBLIC_URL + "/..." to reference your images.
its really awesome....thanks James
Very straightforward and easy to follow tutorial. 👍
Just Subscribed.
Thanx for such useful content :)
Great content!
Thank you bro, really help me 👏
This does not work
This is a fantastic video!!
0:01 "World's greatest react app" 😀😀😀
After npm run deploy..I'm getting error..please help me out
Great video, thanks!
is this work when the code in github are private?
Make a tutorial to get your terminal design
great video!
What?!
James Grimshaw is evolving!?
A tutorial that is less than an hour, what?! 😂 Going to be experimenting with various formats and lengths (as an excuse to play around in my video editing software), so would love any suggestions you have!
@@jamesgrimshaw Your video is well edited and got the point across nicely! Only advice I got is to upload consistently and pray to the RUclips algorithm 🙏
Wooww you make it so simple
EZPZ thank you for this. Just deployed a soundboard on git
So happy to hear you found it useful!
When I tried I'm just getting the read me file displayed.