ReactJs Tutorial | How to Deploy A React App To A Shared Hosting (CPanel) in Less Than 4 Mins
Vložit
- čas přidán 14. 06. 2021
- #React #ReactJS #JavaScript #100daysofcode #webhosting
How to Deploy A React App To A Web Hosting (CPanel) -
New Version with Explanations - • How to Deploy A React ...
For deploying a react app on a shared hosting you need to create a production build. Production build is a pack of all your react code and its dependencies. in most shared hosting we put our site/app inside a public_html directory so if we hit www.yourdomain.com it serves the code from public_html directory. Follow along with this short video to get your react project up and running in less than 4 minutes.
- Run React App Build command: npm run build
- Remember to zip the build folder in order to successfully upload the project to any hosting platform.
- Congratulations, your is now up and running.
Learn HTML By Building Real Projects - Beginners - • Modern HTML & CSS3 Tut...
Learn CSS By Building Real Projects - Projects: • How to Create a Profes...
Learn ReactJS - czcams.com/play/PLS.html...
Follow and Reach me at:
Website:
Github: github.com/mkasulecoder
Instagram: / elitebytecode
Twitter: / elitebytecode
Dev Community: dev.to/casulemarc - Věda a technologie
thank you so much
How to Deploy A React App To A Web Hosting (CPanel) -
New Version with Explanations - czcams.com/video/Rm-FVCGoqo0/video.html
Thankyou man. I knew it was easy but I didn't find anyone who made it easy like you did!
Thank you, Michael. I'm glad I was able to help!
Great video man, appreciate it! Finally digging into the world of React and expressive JS frameworks, needed to launch a project in it and thinking of doing my website in it so this was needed. :)
Hi Soul, glad the video was helpful. All the best in your Reactjs journey, Share with me your project once it's up. I'd love to see it.
Thanks to you me and some friends have got our website online, we were strugling.
Thank you again, continue like this!!!!
glad the video was straightforward and helped you show your site to the rest of the world
🚨I redesigned the McDonald's online ordering website in my newly released CSS Crash course. Check it out here - czcams.com/video/ZOs9IJ8TdnE/video.html
Spot on, this was so helpful. I watched the explained version too. Thank you for answering my concern.
thank you!
Amazing video, it's just what I needed, straight to the point! 🔥🔥🔥🔥🔥🔥
glad that was helpful. thank you for you support
Saved my day thank you so much!
So well explained and concise!! This is a true gem! TY!
Thank you Daniela
Great job!!!
Duuuuude i love you man , i've been searching for solution for days and now you made my day ♥️🙏
I'm so glad this video was helpful to you. 😍
Exactly what I was looking for, perfectly explained in less than minutes. Thank you
Thank you! Glad the video was helpful
Glad it helped!
You are amazing thank you so much it helped me to deploy on hostinger liked and subscribed!
Thank you for the feedback. Glad the step by step helped out easy the process. Happy coding!
This video literally saved my day, thank you very much
Glad it was helpful, now go ahead and show off your brilliant project to the world! 😃
Excellent! Thank you very much; it was very helpful.
Glad it was helpful!
Very very helpful. Thank you!
Glad it was helpful! Thank you!
Many Many thanks bro... u've cleared my mind..
You are most welcome Josh
thank you ma man. you are a life saver
Thank you, Khalid, glad I was able to help!
Awesome!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Glad to hear
thank yoouu
You're welcome 😊
Awsome. its work for me.
Glad it works for you!
You are a beauty!
Thank you! Glad to hear that this video was helpful
excellent
Thank you!
you are welcome!
Thanks bro ❤
No problem! 😊
thankyou 😇
Thanks Man
Thank you Segun
Thank you👍
You’re welcome Noodledealer! By the way that’s a nice name 😃🍝
Thanks for the video, it really helped me. I was trying to use Vite and the build didn't run at all, it just returned a 404 error. But using the React's create-react-app tool and uploading that build worked as expected.
Glad you resolved this. Please share your project if you don’t mind so I can take a look. I love seeing other people projects .
Happy coding
Did you have problem with routes? I'm trying to set up with vite here too
@@matheusdamiao7902 hey man I had the same issue and I solved it checking vite.config.js:
export default defineConfig({
base: '/react_app/dist/', // Configura la ruta base de tu aplicación
plugins: [react()],
});
Very precise information.
I want to ask, if you added a new react component for instance then, would have to build the project all over and upload once again?
Yes, you have to rebuild the project that way all the files needed are recompiled together before to upload to the host
@@elitebytecode Thanks. Okay, I see it now
Thank you, thank you thank you.....
No problem, happy coding
thank you very much
No problem, thanks for the feedback!
Thanks a lot
Most welcome
Congratis for job. Very easy,
Thank you, Claudia
Thanks for this video. My shared hosting has cpanel and I have followed your steps here carefully, but it seems that when I browse to the page, it simply displays the text of the page and does not seem to run. Is there a specific configuration you need to do before the steps in this video on the shared hosting? What are the pre-requisites before you expect this can work?
Hi Sorich, I am yet to re-upload another video explaining the same issue. Hope it will be more helpful.
HI Sorich, would you mind sharing a screenshot of the error you are getting.
Here is a video to kick start you with the basics before hosting the app: czcams.com/video/i3aUvAXAQY0/video.html
Hi @Sorich, I think you would need to name your home page index.html. search engines look for this file to display its contents. Hope this helps.
If I changed the code on the local, how to deploy the changes, without build locally and upload the build files. Are there any way to run the build on the server terminal ?
Hey Muaza, you can run npm run build in the terminal to recreate the new updates then do this same process again to upload the build files to the Cpanel.
Hope that helps.
Hello Uganda :D
Thanks for the helps! Im also wondering what if i have the script needed to be run ?
Are you working on a full stack app?
nice video! what's the name of the program you use to manage your clipboard? thanks
I use Clippy - here is the URL link to install it. clipy-app.com/
Hi. I wonder if this is applicable to full stack react. I mean, if I have a full stack react (frontend and backend) projects can I deploy on it?
Hi Moctar, Here is a resource that could be helpful to you. Please let me know if this answers your question. czcams.com/video/Z_D4w6HmT8k/video.html
Hello Sir, let's assume I have the project on github, how do I pull it directly from github to the cPanel and also configure it to auto fetch from github anytime I push from my local computer?
If the host allows connecting to GitHub as a third party, then they would take you through the process but for the most case scenario, you would resort to using a service like FileZilla (FTP transfer) to directly push your rebuild updates to the host without the trouble of logging in.
Hello! Thank you for the tutorial! I followed it, but am having an issue: I built a react website for a family member's small business, and followed this tutorial, but even though I replaced the contents of public_html with the extracted build, when I go to the website it shows the old half filled out wordpress site they had as a placeholder, and I don't know why it won't update. Has anyone experienced this? Or does anyone know how to reset the hosting folders?
Sorry to hear that you have having the problem. You may need to make sure you are uploading the build files to the right root public_html. At times it’s probably a reset site cache that may fix the issue. Can you please reach out via Twitter @elitebytecode so we can look at the issue with screenshots?
@@elitebytecode Sure!
@@elitebytecode Thanks so much, I sent a dm!
Thank you
Your welcome Tousif
thank you
You’re welcome!
Thanks
Glad this was helpful. Thanks for the feedback
Except for homepage, All other pages reload problems. How to solve this???
there must be a broken URL path. Do you want to check for this in your nav menu?
When trying this method showing only white blank page with react favicon.. how to fixed this issue.
Hi Krishna, are you able to share some screenshots of what’s happening via Twitter @elitebytecode?
Or try watching this updates video with explanations- How to Deploy A React App To A Shared Web Hosting (CPanel) - Explained
czcams.com/video/Rm-FVCGoqo0/video.html
i used vite, it made a dist not a build. are there any differences. also using react-router-dom.
vite runs on node 18, namecheap server only 14. i think
same, any suggestion?
Idk why when i put my domain inside homepage appears me like a link insted of a string and then when i build it with npm run build , the homepage is just "/" , anyone can help me?
Hi Devie, yes it should appear as a link when you add it into your package.json. Quick question does the app display when you host the build zipped file in public.html? Please assist me in understanding your question better.
@@elitebytecode I can't put my domain as a homepage inside the package.json because he reads it like a link and don't catch the value, just after i deploy it with npm run build , the root from homepage set as "/" , that's the reason why i guess my website don't appear to everybody but i can see it on the pc where i develop the website....
@@elitebytecode Thanks bro, I solve the issue , it was happening because of redux dev extension hahahaha thanks.
@@davon_news I'm glad you were able to resolve the issue. 👏
Does that works with database driven nextjs sites also??
Apparently, you will need to host your database or JSON files somewhere.
thxs
No problem!
Happy coding
song?
hi bob, here are free resources to get free audio for your content. Goodluck: studio.czcams.com/channels/3cQi5gvNeiPiPXTrMhZJMg.htmlmusic
Would this work with an app created via vite?
hi daniel, Here is an article to assist in deploying a vite application. Goodluck vitejs.dev/guide/static-deploy.html
How to build the react code
Here is the full playlist from Beginner to Pro ReactJs - czcams.com/play/PLSRfCvCBQPT_qh0hPZJEyp-ACsUe1wfPG.html
where is env file?
For this tutorial, there was no .env file.
it doesn't work for me :(
Hello @gianlucabredice8652, could you share what errors you are getting? I look forward to hearing from you. Thanks!
Imgs nhi a rahi
could you please paste the code snippet you used to fetch images?
salvou
obrigada!
Not working
please let me know where you got stuck
somebody help :c
Please share what could be the problem
Nice video, irritating music
Hello YellowAnt, thank you for your feedback. I’ll work on that!
@@elitebytecode nice music, song name please