Build and deploy Next js app on cpanel | Host react js, node js, next js website on cpanel
Vložit
- čas přidán 7. 02. 2022
- In this video, I'm going to show you step by step tutorial on how to build and deploy your react next js application on cpanel using namcheap shared shared hosting package. Technologies used include; react js, next js, javascript, cpane, vscode, node js Stay tuned
Want to buy me coffee?
www.buymeacoffee.com/techfort... - Věda a technologie
This is an underated channel.
Clean clear explaination
This is the most clear and precise step on subject. Thank you.
A one month problem get solved by watching your video. We are launching tomorrow and you just saved me. Thanks.
Welcome. Don't forget to subscribe for more awesome videos like this. Also share the video with your friends. Thanks
I found you here. Fantabulous 😅
@@luckypius132 Very very fantabulous 😂
Hey dude! You are a problem solver. Kudos! 👍👍
Excellent tutorial. Thanks.
You have done very good job. Thanks a lot!
Such a lifesaver! Thank you for your detailed documentation
I'm you found it helpful... All the best
Great tutorial! Thank you so much
I love the video you explained everything well
I'm thrilled! Thanks for your support!!
Thank you too!
Very helpful!
Keep it up brother
Thank you very much Sir!!! Incredibly helpful tutorial. Thanks again and Happy holidays!!!
Same to you... Enjoy
@@codesermon Thank you 😊😊😊
Thank you for this!
Thank you sir, you saved my day
Not sure if it helps, but the "RUNJS" button to do run the build script throws a wasm error as well as Cpanel's web console does. You can overcome this, however, by logging into your hosting cpanel server through ssh.
thanks, works execellent
You are my Savior !!! Thank you so much for making our life easy.
You're welcome Sir. Do me, a favour and subscribe to my channel for more awesome tutorial
Super great!!! Kudos!
Thank you! Cheers!
Great tutorial! thanks
Welcome
my backend is on digital ocean can i run my frontend on blue ocean cpanel?
Works with nextjs12, Seems not to work with nextjs 13 says some stream module is missing or something?
could you make an updated version of this using next.js 14+?
I'm getting "Too many redirects" error. I have hosted the Next.js app on a sub directory. Please advise.
How do I bring up the Node.js software on cPanel?
Thanks bro... This saved me today
Welcome. Don't forget to subscribe to my channel. :)
Thankyou for the detail information
followed all the steps but showing internal server error message from server.js
thanks a lot for this video!
welcome
please help me this error :
Build error : The global thread pool has not been initialized.: ThreadPoolBuildError { kind: GlobalPoolAlreadyInitialized } next js error
i get error 500, internal server error. can you help sir?
I haver Error 503. Service Unavailable. Can you help me?
will API work there?
Hello does this work with Mongo Db atlas, and is there any additional configurations for Api endpoints
Yes. You can use any database or service. It doesn't change anything.
Would this work with Server side rendered pages also ? say.. i was pulling information from a database or some api
Yes it works
muchas gracias, pude resolver
Thanks a lot. Your tutorial is straight to the point. However, can you make another tutorial that explains how I can host a dynamic Next js Application with API (need node js) on cpanel. Thanks.
Alright
@@codesermon bro how to host dynamic next js application
@@codingjunk you can watch this one czcams.com/video/KUBADQ3qhmE/video.html
Does it load fast with pre rendering as with vercel? Not sure if it is because of your bandwidth but seemed to me that it's loading to long on first render. Great video btw.
It loads faster. It was my laptop that was lagging.
will it work if we used server side rendering for data fetching?
Yes it will work perfectly.
Checkout this blog post to learn more dev.to/techfortified/how-to-host-nextjs-website-on-cpanel-2dij
is there any way to view the nodejs app's terminal and see if i have errors or info similar to a local run dev
Yes. Check this path var/log/apache2/error_log in your file manager or ask the support of your hosting company
Hello, I reproduced every step but when I try I get a 500 internal server error or sometimes I also got a "We're sorry, but something went wrong." message. Only differences are that I am trying to host it on a subdomain and I have SSR, don't know if it can be related. If someone had this issue, please let me know how you solved it.
Check the solution proposed by Felipe R in the comment section below and follow his solution. It's should work for you. If it doesn't, try it on a subdomain and see
Estou com o mesmo problema, como solucionou ?
does this method of deployment have optimization advantages from next js?
Yes Sir. Nothing changes
Thanks for the video, bro. Can I follow the same process on centos 7 on CWP?
Provided it supports node js. It will work
@@codesermon Thanks for your response
i want to use ISR inside my namcheap shared hosting. can i do that?
Nope
hello, do you know how to deploy this with tailwind CSS? I just followed your tutorial and it worked, but the CSS didn't working. Could you help me, please?
The error shows Refused to apply style from '/_next/static/css/d6c9c8bf75352fff.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I will make a demo version and see if I can find a solution for you. That would be during the weekend.
Did you later get it to work with Tailwind CSS?
@@GeniusHawlah Yeah, I did. I also used Tailwind CSS at this project. Do you have any solution?
@@codesermon g
I will release a video on it this week. Stay tuned.
i dont have the Setup Node.js App, how can i find or install?
Buy namecheap business shared hosting plan or ask your hosting provider support for how to upgrade
Hello, I don't seem to have the "Setup Node.js App" Option in my Softwares
Sorry, if you don't have it, it means you need to upgrade your hosting package to higher version. Shared hosting business package can do the magic for you.
@@codesermon So i tried purchasing a higher package version and sitll dont have the option for node js. Can you guide me where to find the right package? I am using hostgator.
@@williambenarto6212 www.namecheap.com/hosting/shared/?gclid=Cj0KCQjwyOuYBhCGARIsAIdGQROMuXeRUOthRUk6fLzpBhrxujU3K2gcLTUoTvZ-bGiSqDYsoNbh49IaAou7EALw_wcB
Use stellar business plan
I was following the tutorial but I couldn't see the Set Up Nodejs app in my cPanel under software. Any help?
Yes.. The reason is the hosting package you're using doesn't have that feature and you will have to upgrade to shared hosting package or higher package. Not all hosting packages that support Nodejs apps
Thanks for the prompt response
I have not index.js file and my page start on localhost:3000/webapp then how can i deploy in cpanel using server.js file ? and also can we deploy using terminal because in my cpanel Setup node.js app Software not available ?
Upload files to domain directory with a subdirectory webapp. When you go the Nodejs homepage to create your node app on cpanel, specify the directory as my.domain.com/webapp as the app directory. This will configure the app in the subdirectory for you.
@@codesermon I can build with npm run build command. then there is .next folder create. am i right ? after i have to add .next folder in cPanel in my root file. then how can i deploy with terminal ? bcz i have not setUp Node.js App software in Software Section. please reply i am stuck last 2 weeks.
@@codesermon Thank for your reply
where did you get the server.js code
Rewatch the video again. I explained everything there
For my part, I had an error and it loaded a long time before getting an error message: We're sorry, but something went wrong. By paying attention to the step in the video I realized that I had selected the wrong version of nodejs, be careful with the version selected by default (10.24.1 in my case) it did not work. You have to use version 14.18.3 as in the video. I hope this will unlock some. Thanks for the video !
Glad you found this video helpful and kudos for proffering solution to your problem.
can you do a video on how to host react js app this same way
Here's the link czcams.com/video/F0ORxJWZ_D8/video.html
thanks
Welcome
hello, i followed you exact the same things, but i get 503 error. know how to solve this?
Are u using a domain or a subdomain?
@@codesermon I have same problem. I got 503 Service Unavailable. I am using domain and NPM run NPM Install successfully. any idea for this issue ?
@@WEBDEVIndo try it on a subdomain and see.
Also, try adding "homepage": "your domain" in the package.json file and see.
@@codesermon it's working on sub domain
@@WEBDEVIndo glad it worked.
Hello, I followed the tutorial but I got error 503 service unavailable. I am using a sub-domain so I don't know where the problem is. the application is working on my local
Change the "basePath" in next.config.js to point to the folder of your application. Ex: "/folder/myapp".
Try this and see
@@supakonnectinc I tried it but it didn't work
@@supakonnectinc it does give 500 internal server error
Edit your package.json and add homepage key and value as the the URL of your site e.g
"homepage": "yourdomain". And see
hope your issue was resolved
I followed all these steps but I obtain error 503...Please help me...
Check your Nodejs version and ensure it matches the production version
my page still show under construction.. after start the app
Check this comment section to find possible solution
navigate to you public_html folder and delete the index.html folder there and reload it should work
I cannot found build folder after npm run build and files are not zipping
watch this czcams.com/video/KUBADQ3qhmE/video.html
@@codesermon thanks I have done it
@@codesermon bro I am using WordPress as a headless CMS but the content is not showing on my website when I add new posts
@@codingjunk check your API configuration. What errors are you receiveing? have your enabled cors?
@@codesermon working fine on a localhost, but when I build it and upload on cpanel posts are not updating
After following this I get "example.net" redirected you too many times error. Does anybody know why?
Did you host the site on your main domain?
me too
Create a subdomain and try again
I changed the "basePath" in next.config.js to pointer to the folder of my application and worked. Ex: "/folder/myapp".
And Thanks for the video.
Font: nextjs.org/docs/api-reference/next.config.js/basepath
Someone gets a 503 error on the server.How do I solve this?
Ensure both your Dev node version is the same with the remote(server) node version.... Also check if the libraries used in the projects are compatible with the node versions
@@codesermonI read that on stackoverflow, but on my notebook I work with node version 20.9.0 and the version of node on the server that I chose was the same, 20.9.0. .If I find the solution I will tell you about it here, if you can think of something that could be, I would appreciate any comment or idea of what it could be. Thanks for your quick response.
@@lebaf8661 It seems version 20 doesn't work well. Either upgrade to 21 or 18
@@codesermon What would be the requirements of a server to run a project in nextjs?. First of all, Thanks
@@lebaf8661 it depends on the nextjs version that you're using... if you're using next 14 app router, nodejs version 21 is recommended.
where is buid folder. For me is not in public. I have .next???
just copy everything in your project directory excluding node_modules
@@codesermon ок I got it.
I don't know why need to delete .next everytime from GitHub and from cpanel. Otherwise it will not commit to cpanel.
Can you show how to automatic with yaml?
@@MilanDrazic do not push .next to GitHub. Exclude it by specifying it in gitignore file. With this it will always be updated.
@@codesermon then how to build app?
@@MilanDrazic just deploy it and ensure you install the packages and everything will still work. You don't need to run npm run build
Hi i have error 503
Check comment section and you will see the suggested solution
We're sorry, but something went wrong.
The issue has been logged for investigation. Please try again later.
error
Where in the app state have you encountered that??
@@codesermon start app node js cpanel, url direction
Have you installed your dependencies just the way it appeared in the video? Ensure you're starting your server config with an empty directory to avoid conflicts. You can create new subdomain and try again with new directory.
@@codesermon I deploy with vercel, my Api laravel on cPanel, my front is good, but Api error console fetch (401 (Unauthorized)) pls :((((
That should come from your authentication service. Ensure your front-end is well connected with your server API by ensuring your configure the necessary cors
I am getting a 503 error
Can you repeat the process again?? Have you installed the dependencies?
@@codesermon yes I have I am now installing it on a sub domain
I hope all's working now right?
working on https but not on http
What do you mean?
@TechFortified I mean when i am in http it shows its working and in https it show the website
You mean works locally but not remotely?
thank thank thank thank thank thank
I get the error: "specified directory already used by /home/olivertu/OT_Portfolio"
Any advice??
Try another directory
@@codesermon turns out you need to create the app before uploading your files. Did that, and now I get nothing showing online. Can't quite work this out
Hi Sir ,
Need a help from you regrading deployment of nextjs in a shared server in cpanel ,
As currently stuck by an issue when trying to run npm start
This is issue i am getting, please help me out
node:internal/deps/undici/undici:9235
return await WebAssembly.instantiate(mod, {
^
RangeError: WebAssembly.instantiate(): Out of memory: Cannot allocate Wasm memory for new instance
at lazyllhttp (node:internal/deps/undici/undici:9235:32)
Node.js v19.9.0
check if both your dev and remote node versions are the same. If not the same, ensure remote version is higher than dev version
@@codesermon
Thanks for replying.
I tried with maintaining save version in dev and remote. But the issue is still persist.
And it's specific for Nextjs, when I tried to run a simple node js server it's running smoothly.
Could you make a video on how to deploy a nextjs app in cpanel shared server and if anyone stuck with this kind of issue how to overcome?
- my web site is get :
Failed to load resource: the server responded with a status of 503 () favicon.ico:1
what to do ?
Ensure your local nodejs version matches your remote nodejs version and try again