Host React.js App for FREE in 5 mins with GitHub Pages

[@DevinDT99]

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"

[@Tracer73866]

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

[@einnorw]

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!!!!

[@jamesgrimshaw]

Glad you found it useful! 😄

[@gabrielossamumaeda2091]

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.

[@ernestosrf]

Thank you so much! I was looking for a solution for this

[@SaroshAbdullah]

You're awesome man! you explained everything in such a simple manner!

[@nidhishettigar6981]

Thanks that worked for me. After many tries finally I hosted my react app.

[@dewann99]

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.

[@delighteke9948]

wow this video saved me from constant head ache, thanks bruv

[@ameybairolu3688]

Thanks a lot for this video lol. Crisp explanation and hence an absolute time saver. Couldnt ask for anything more! 😀

[@pickitupgolf276]

Very helpful vid James! Appreciate the simplicity and easy to follow steps.

[@flux2956]

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)

[@ShravanKumar147]

Wonderful 5 mins Brilliantly explained

[@27isagamer98]

Thanks a lot for this clear explanation. You saved my day!

[@md.dilshadulislam9113]

thanks a lot to put a sense of humor around it

[@brandongibson7050]

I thought ctrl C was to copy? why would I copy the url then go to the cmd line and hit ctrl C again?

[@sahinurislam7247]

Thanks a lot sir, after watching more than 10 videos i got the right solution.

[@RohanPaul-AI]

This was tremendously helpful. Wish you all the growth in KZbin.

[@tamimdewan1847]

This channel deserves a million subscribers

[@Febiuzz]

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

[@nirajraut1511]

Hey, I am facing same issue, so how did you solve this problem

[@sanish_49]

Thank you so much, deployed my app without any problem. That was smooth 😃

[@rkscp7711]

Your video is really helpful 🙌🙌

[@aryanaryamusic]

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)

[@shahidlandge9876]

I m getting the same error . Did you find the solution?

[@47joshua]

Don't Quit Your channel, Your content are fantastic❤, please create regular content🙏

[@SarathChandran96]

Superb presentation. quick and easy . very usefull

[@sebastianelustondo]

Thanks you James, you help me a lot with this github pages!!

[@roodyg5352]

Thank you! This video was extremely helpful.

[@YannCedrick]

Thank you for the video. You deserve more subscribers

[@Lokoislive]

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?

[@jamesgrimshaw]

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

[@Lokoislive]

@@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

[@Lokoislive]

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

[@jamesgrimshaw]

@@Lokoislive great, glad to hear you figured it out. Just visited your website and it looks great!

[@Lokoislive]

@@jamesgrimshaw thanks its still a working progress but ill get there

[@minhazrabbi531]

Thanks a lot. ❤❤ I finally deployed my frist react app.

[@nathancwatkins]

ty for the concise guide!

[@blackchristiangeek]

Awesome, thanks for the tips, you were answering questions that I didn't know how to ask 😅 Thanks again and God bless

[@soumyadeepchatterjee2189]

Thank you. If everything is fine please if possible upload some other project videos. You were great at making us understand.

[@romimaximus]

Well ...perfect !! ..and straight to point !! Thank you very for sharing it !! 😁👍

[@aviroxi]

thank you so much :) you got new sub and new github follower ;)

[@Msterken1]

Good job, thank you for clean explanation and help.

[@thomasmeta2711]

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?

[@אילןלוי-ק9ד]

תודה רבה 1000 פעם! תבורך מפי עליון!!!

[@tobiastejeda4694]

Excellent video helped me deploy my first react app ❤

[@ash__borne]

Subscribed in less than 10 secs :)

[@fredrick2017]

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.

[@teenaja3340]

same

[@rizkialimaulana6193]

Yeah me too. But in my case, the website turns into readme

[@JacobAuthier]

@@rizkialimaulana6193 Same :(

[@chandangr9033]

@@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

[@jessehuang4955]

@@chandangr9033 so you mean even though your user name has uppercase you just type lower case?

[@lgon9977]

Man, you are amazing! Thanks a lot :)

[@aris13pat1]

Nice tutorial. Thank you!

[@dominiclapitan8466]

You are insane. Thanks so much brooooo

[@ratansen4542]

Hey! my react app is inside frontend folder of my repo.. What additional steps do i need to perform?

[@_.Mustafa._]

ohh man !! Thanks a million. You saved my life.

[@CompoFriend]

Thanks for the excellent video it helped me & I deploy my first react app.

[@CSEngineerInsider]

I love free content. Nice video love it

[@VishalPatel007]

Awesome bro!! 💥💥

[@tan5771]

Very easy tutorial..aaaaaa it helps me a lot to deploy my react project. I can go to sleep now 😂

[@shaokhan-i8k]

your'e a life saver bro... thanks so much...

[@adamdurrant]

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.

[@aietal.1596]

That helped a looot. Massive thanks.

[@yatut4467]

Thanx for such useful content :)

[@notyourtypicalteenager4651]

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

[@jprescottirl]

I uploaded it up GH pages but now my images arent showing. Any idea why? thanks !

[@shaneharris8363]

I use process.env.PUBLIC_URL + "/assets/image.png" and also set the variable to match the homepage used in package.json.

[@s7s_space]

I can't see the images in my project why ? after publish and what the benefit from predeploy?

[@shaneharris8363]

Try setting the PUBLIC_URL to your GitHub page URL then use process.env.PUBLIC_URL + "/..." to reference your images.

[@ts8960]

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

[@mikkys5374]

how do you fix a "ENOENT: no such file or directory, stat" error?

[@enigma9445]

Thank you bro, really help me 👏

[@kenzafilali9115]

my application is pubished yet directly it displays my 404 pages configured by the route /* what to do ?

[@yashaskirito]

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??

[@sfafsashfdh6589]

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?

[@shourovfoisal]

Excellent tutorial. Short and to the point! 💥💥

[@punitdixit861]

its really awesome....thanks James

[@mohitnamdev3622]

thanks a lot man, this was really helpful

[@johnconnor9787]

Thank you. That is what exactly I needed

[@harshkureel3829]

It's showing blank page

[@nfireOSX]

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?

[@steffqing]

I couldn't get my React website setup I followed through the instructions but it renders the site without the content

[@Felix-dh9tl]

use hashrouter instead of router

[@thevipinmishra]

Very straightforward and easy to follow tutorial. 👍 Just Subscribed.

[@shanmukh5590]

Only readme file is showing 😭😭😭😭😭😭😭😭.. pls help 🙏🙏🙏🙏

[@zenragez]

That was beautifully scripted! Very thorough and quickly explained

[@jamesgrimshaw]

Man like Zenny 😍 nothing makes me happier than seeing you here

[@zenragez]

@@jamesgrimshaw I will be coming to you a lot for your KZbin when I need information! Maybe I could make some requests?

[@jamesgrimshaw]

@@zenragez of course! DM me I’m always looking for new video ideas :)

[@Felix-dh9tl]

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

[@harshitchandel2880]

ENOENT: no such file or directory, stat 'F: ew downloads\stuti\cMWpK8hk\build' i am getting this error please help

[@harshitchandel2880]

after npm run deploy

[@jeffersonfernandes6520]

me too

[@jeffersonfernandes6520]

Did you fix it?

[@harshitchandel2880]

@@jeffersonfernandes6520 not yet

[@Swagmaster4000]

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]

push your entire codebase to GitHub using the normal git commands, in addition to using the deploy commands

[@Swagmaster4000]

@@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?

[@jamesgrimshaw]

@@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 :)

[@Swagmaster4000]

@@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

[@jakubkurdziel2407]

Great video, thanks!

[@andriikniaziev9242]

Thanks man, it works!

[@andrewkorsten2423]

great video!

[@siruxsolutions]

Great content!

[@nunez.rv3]

Wooww you make it so simple

[@investandcyclecheap4890]

anyone getting a 404, make sure to push up the new code and it should work :)

[@kirstengrimshaw563]

This is a fantastic video!!

[@ANKITKUMAR-ih3yk]

I have done all thing similar like in this video but still my site is live showing 404 error?

[@druashley]

EZPZ thank you for this. Just deployed a soundboard on git

[@jamesgrimshaw]

So happy to hear you found it useful!

[@TheLongAndNarrowPath]

Excellent DUDE!

[@ralphkapgang3687]

Awesome tutorial but it doesn't work for me, my main file is in a sub folder, please ca you help me?

[@528nandini9]

After npm run deploy..I'm getting error..please help me out

[@fatesteyneit2990]

can we use a domain bought somewhere else? If so, care to do a little tutorial XD

[@awesomedragon6367]

bro. how do you host react js frontend with backend. my backend login is not working. how do you do it??

[@jonathanadel3831]

Thanks Bro, It Worked Can You Please Tell Us The Name Of Your VS Code Theme And The Folder Icons Theme Name?

[@felixriddle]

Make a tutorial to get your terminal design

[@aidanwalker3058]

all my images didnt show in the browser when i added the homepage script and url

[@jamesgrimshaw]

Where are the images stored? Make sure they are located in the folder that was uploaded to GitHub, otherwise they won't show.

[@aidanwalker3058]

@@jamesgrimshaw when i add the homepage script the images break, looks like it doesnt like my images being in the public folder. Not sure how to ammend this as i dont really want to import all my images manually in my comonents

[@jamesgrimshaw]

@@aidanwalker3058 I see, that is strange. If you share the link to the GitHub repo here (or to my email [e-mail]) I will look at it and see if I can find the problem.

[@aidanwalker3058]

@@jamesgrimshaw I finally got it to work :) not sure why it doesnt accept images from the public file, i copied the folder in to src and imported all the images so atleast i got it!

[@jamesgrimshaw]

@@aidanwalker3058 Yes very strange! Glad that you got it working though!

[@RiteshNEVERUNIFORM]

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

[@jamesgrimshaw]

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.

[@RiteshNEVERUNIFORM]

@@jamesgrimshaw okay, Thanks!. I think deploying on netlify is good Idea for my project. And the public fikes can be shared on github

[@jamesgrimshaw]

@@RiteshNEVERUNIFORM Sounds great 😄

[@JulietteReacts]

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?

[@Saad1379]

0:01 "World's greatest react app" 😀😀😀

[@Ноунейм-п5я3и]

Did everything according to the guide, displays the start window from the readme / Sat for an hour and a half, I can not understand what is the matter i.imgur.com/yK95dDQ.png

[@jamesgrimshaw]

If you can see the README on the live site, that means you have deployed the root folder. On the Github repository you made, it has created a new branch called "gh-pages", so whatever is in there is what you deployed live. Therefore, it is likely an issue with your "deploy" script. The command is "gh-pages -d build", with the -d part being very important as it means "directory". When you run "npm run build" in the "predeploy", it creates a "build" folder in your project, and "-d build" means upload the build folder to my live URL. If you made a single typo, it likely did not work. Hope this helps! If you are still having troubles, link me to your GitHub repo and I will be able to confirm the issue!

[@nazmulhossainananto7788]

@@jamesgrimshaw When I enter "npm run deploy", fetch an error which says no "build" folder found. What to do?

[@artenisalija]

How many projects can we publish using this method?

[@dewasembiring7286]

is this work when the code in github are private?

[@manjicoder3049]

How to commit in the gh-pages

[@InternetMadeCoder]

This does not work