Host React.js App for FREE in 5 mins with GitHub Pages
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- In this short video, we will use the awesome GitHub Pages feature to deploy our React.js app for free. You can even add a custom domain later! This technique would also work for other static websites too. Hope you enjoy the video and find it useful!
----------------------------------------------------------
⌨️ Commands Used
----------------------------------------------------------
Step 1
▶️ git remote add origin [YOUR REPO LINK]
▶️ git add -A
▶️ git commit -m "Initial commit"
▶️ git push -u origin main
Step 2
"homepage": "[USERNAME].github.io/[YOUR REPO NAME]",
Step 3
▶️ npm install gh-pages --save-dev
Step 4
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
▶️ npm run deploy
----------------------------------------------------------
⏰ Timestamps
----------------------------------------------------------
0:00 Introduction
0:25 Step 1 (Get your React app on GitHub)
2:11 Step 2 (Add final URL to package.json)
3:33 Step 3 (Add gh-pages npm package)
4:06 Step 4 (Create deploy scripts and deploy!)
----------------------------------------------------------
📚 Resources
----------------------------------------------------------
Editor (Visual Studio Code): code.visualstudio.com/
Web Browser (Firefox Developer Edition): www.mozilla.org/en-GB/firefox...
Terminal (iTerm, Mac only): iterm2.com/
MDN (where I reference JavaScript documentation): developer.mozilla.org/en-US/d...
----------------------------------------------------------
🔗 My Links
----------------------------------------------------------
GitHub: github.com/jrgrimshaw/
Instagram: / jrgrimshaw
LinkedIn: / jrgrimshaw
Personal site: jgrimshaw.com
#jamesgrimshaw #react
![CAMPปลิ้น | EP.79[1/2] แก๊งไทบ้านพาบุกเมืองบั้งไฟโก้ ยโสธรรรร!!!](http://i.ytimg.com/vi/Ldr3_fvTEXk/mqdefault.jpg)
![[LIVE] : ONE ลุมพินี 73 วันนี้!! คู่เอก "วรพล vs พันฤทธิ์"](http://i.ytimg.com/vi/rrOljlqse3A/mqdefault.jpg)
You're awesome man! you explained everything in such a simple manner!
Very helpful vid James!
Appreciate the simplicity and easy to follow steps.
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 TH-cam.
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! 😄
Thank you so much, deployed my app without any problem. That was smooth 😃
This channel deserves a million subscribers
Wonderful 5 mins
Brilliantly explained
Well ...perfect !! ..and straight to point !! Thank you very for sharing it !! 😁👍
Excellent tutorial. Short and to the point! 💥💥
Don't Quit Your channel, Your content are fantastic❤, please create regular content🙏
Thank you for the video. You deserve more subscribers
Thanks a lot for this clear explanation. You saved my day!
Very straightforward and easy to follow tutorial. 👍
Just Subscribed.
Thanks that worked for me. After many tries finally I hosted my react app.
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!
Awesome, thanks for the tips, you were answering questions that I didn't know how to ask 😅 Thanks again and God bless
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)
Excellent video helped me deploy my first react app ❤
Superb presentation. quick and easy . very usefull
Thanks you James, you help me a lot with this github pages!!
This is a fantastic video!!
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
Man, you are amazing! Thanks a lot :)
That helped a looot. Massive thanks.
Nice tutorial. Thank you!
תודה רבה 1000 פעם! תבורך מפי עליון!!!
Good job, thank you for clean explanation and help.
Thank you. That is what exactly I needed
ty for the concise guide!
Excellent DUDE!
Awesome bro!! 💥💥
Thank you! This video was extremely helpful.
Your video is really helpful 🙌🙌
wow this video saved me from constant head ache, thanks bruv
Great video, thanks!
Great content!
thank you so much :) you got new sub and new github follower ;)
thanks a lot man, this was really helpful
Awsome 🔥
thanks a lot to put a sense of humor around it
Thanks a lot sir, after watching more than 10 videos i got the right solution.
Thanks for the excellent video it helped me & I deploy my first react app.
Thanx for such useful content :)
its really awesome....thanks James
Thank you. If everything is fine please if possible upload some other project videos. You were great at making us understand.
great video!
Thanks man, it works!
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
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?
ohh man !! Thanks a million. You saved my life.
Thanks for the video man
Subscribed in less than 10 secs :)
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
So nice you saved me!
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?
Thank you bro, really help me 👏
Hey! my react app is inside frontend folder of my repo.. What additional steps do i need to perform?
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?
clear and neat
You are insane. Thanks so much brooooo
That helped Thank you :)
Thanks a lot. ❤❤ I finally deployed my frist react app.
your'e a life saver bro... thanks so much...
I love free content. Nice video love it
great video
Thank you!
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
You're a hero
I thought ctrl C was to copy? why would I copy the url then go to the cmd line and hit ctrl C again?
Wooww you make it so simple
Thank you! Great explanations and easy to understand.
BEST VIDEO
Thanks!
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??
Thank you brother
That was awesome !!!
I'm glad you think so! :)
@@jamesgrimshaw it returns error page. any way thanks for this video
Very easy tutorial..aaaaaa it helps me a lot to deploy my react project. I can go to sleep now 😂
my application is pubished yet directly it displays my 404 pages configured by the route /* what to do ?
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?
thank you !!
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"
thanks a lot man
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.
Thanks Bro, It Worked
Can You Please Tell Us The Name Of Your VS Code Theme And The Folder Icons Theme Name?
EZPZ thank you for this. Just deployed a soundboard on git
So happy to hear you found it useful!
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 for tutorial
thanks man
thank you very much
how do you fix a "ENOENT: no such file or directory, stat" error?
Thanks.
Thank you
thanks a lot
I have done all thing similar like in this video but still my site is live showing 404 error?
How to commit in the gh-pages
bro. how do you host react js frontend with backend. my backend login is not working. how do you do it??
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