Deploy a Node.js App on Shared Hosting via cPanel | Tutorial 

Plese, where is the files (app, package, package lock)?

This makes sense to me so are we supposed to host our server files on a different domain?

Sure. Create of configure a new domain name and store your files in a different folder. If you put your source code inside your domain name, all your files will be leaked as at 3:23

Wouldn't password protection solve this?

@@M3R14M. As far as I know, there is no such option on Cpanel. Just store your files in a different folder than your domain name.

Password protect a crashed server? 😮

Ideally, these should be in separate locations: frontend in the public_html folder, Node.js app usually in its own folder in the root folder and you can access your MySQL database(s) via phpMyAdmin in cPanel. You could try this but I wouldn't recommend it for security (potentially making sensitive data more accessbile) and also compatibility (cPanel is usually set up to expect MySQL to be stored in a separate location). But, the good news is, all three can interact with each other when dpeloyed. So you could make a request from your React app to a Node.js server that then contacts your MySQL database. For how to interact with a MySQL server in Node.js, I cover that in this tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xwfeik3bPpw.html If you have any questions about it, let me know in the comments on that video.

Hello I'm wondering if you found a solution to this

Where did you get those files from you pulled up on your desktop?

Good question! There are actually a few ways of doing that: 1) Set the "application root" to a folder that is not the same as the main folder for the domain you are running the app on. Then, if the app crashes, the folder doesn't contain the app files. 2) Use a full stop in front of any files that are in the domain folder you don't want to server (e.g. ".app.js"). Though this can be error-prone. 3) Change the folder permissions so that the folder cannot be read (can be done in cPanel file manager). Probably 1 and 3 are the most secure solutions.

There's a good chance that Node.js isn't showing in cPanel because it hasn't been installed on your server. If you have an existing hosting package, you should contact your host and ask them if it is possible to install. Otherwise, you might consider the host I'm using in this video, HostWithLove, which has packages that come Node.js installed as standard: bit.ly/3V2RM9Q

First thing I would try is setting the Application URL ( around 3:50 in the video ) to the main domain when setting up a new Node app. If this doesn't work, it's likely that there is a conflict between your hosting service being set up to serve files from your public_html folder and your attempt to serve a Node.js app on that domain. In this case I'd contact your web host to let them know you'd like your hosting configured to serve your Node app on the main doamin.

Yes, 16 is supported as well as 18 by the host I'm using. I used the default version upon creating a new app in this video but you can select a more recent one.

To deploy your Next.js app in the way I did in this tutorial, you need to follow a few preparatory steps. Someone else asked about this, so I'll copy in the answer again here: --- Creare the following server.js file in your project (code from Next.js website): // server.js const { createServer } = require('http') const { parse } = require('url') const next = require('next') const dev = process.env.NODE_ENV !== 'production' const hostname = 'localhost' const port = 3000 // when using middleware `hostname` and `port` must be provided below const app = next({ dev, hostname, port }) const handle = app.getRequestHandler() app.prepare().then(() => { createServer(async (req, res) => { try { // Be sure to pass `true` as the second argument to `url.parse`. // This tells it to parse the query portion of the URL. const parsedUrl = parse(req.url, true) const { pathname, query } = parsedUrl if (pathname === '/a') { await app.render(req, res, '/a', query) } else if (pathname === '/b') { await app.render(req, res, '/b', query) } else { await handle(req, res, parsedUrl) } } catch (err) { console.error('Error occurred handling', req.url, err) res.statusCode = 500 res.end('internal server error') } }) .once('error', (err) => { console.error(err) process.exit(1) }) .listen(port, () => { console.log(`> Ready on ${hostname}:${port}`) }) }) Then change the script section in your package.json file to this: "scripts": { "dev": "node server.js", "build": "next build", "start": "NODE_ENV=production node server.js" } After this, run 'npm run build' locally and then upload the resulting files to the 'application root' folder you specify in cPanel and set the 'application startup file' also in cPanel to server.js. Then, deploy your app as per this tutorial and it should hopefully be working.

I know how to setup up my app. The problem is that I don't see the "Setup Nodejs App" button

@@a.anvarbekov Ah, I see. In this case it's most likely that your hosting provider does not support Node.js in cPanel. I'd first contact them to see if the will install it for you. Otherwise, you might consider a hosting provider that will support Node.js apps. If you do go down that route, you might consider using the one I do in the video, HostWithLove (Node comes installed as standard): bit.ly/3V2RM9Q

​@@OpenJavaScript next js 14 required node js 18.7. but in my shared namecheap hosting we have node js 14 only. I am getting an error on the electron pkg. any solution? I would appreciate your help.

You can only access your cpanel with your hosting provider but you might also be able to connect to your shared hosting space via SSH (if you provider supports it). If 'terminal' is available in your cpanel, it means you probably have access and can do it. Otherwise you should contact your host. They may even provide documentation!

The hosting provider I am using in this video (HostWithLove: bit.ly/3V2RM9Q) now allows you to run apps in Node 18.14 (and also still older versions, if you prefer). If you already have shared hosting with cPanel, the easiest way would be to contact your hosting provider, asking them to update it on their side. If you have command line access (not always allowed) and are comfortable with using it (I wouldn't advise this if you are not), you may consider updating yourself.

Agree they made unnecessary changes. I have hard times settting up NodeJS now due to retarded update.

You can host a Node app locally by following this tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hekIHfOil50.html

If you make changes to your app itself and want these to be effective, you need to redeploy it. The simplest way would be to stop your app, update the files in the files folder (application root path) and then start the app again. If you just change the files if the application root path without redeploying, these won't be effective.

@@OpenJavaScript but we have to run "npm run build" command so that application get ready for deployment then how to do that. I tried but it's not working.

@@OpenJavaScript can you make video on it for nextjs app.

​@@vishalrahangdale3624 That's a good idea for a tutorial, which I will make soon For now, try this: Creare the following server.js file in your project (code from Next.js website): // server.js const { createServer } = require('http') const { parse } = require('url') const next = require('next') const dev = process.env.NODE_ENV !== 'production' const hostname = 'localhost' const port = 3000 // when using middleware `hostname` and `port` must be provided below const app = next({ dev, hostname, port }) const handle = app.getRequestHandler() app.prepare().then(() => { createServer(async (req, res) => { try { // Be sure to pass `true` as the second argument to `url.parse`. // This tells it to parse the query portion of the URL. const parsedUrl = parse(req.url, true) const { pathname, query } = parsedUrl if (pathname === '/a') { await app.render(req, res, '/a', query) } else if (pathname === '/b') { await app.render(req, res, '/b', query) } else { await handle(req, res, parsedUrl) } } catch (err) { console.error('Error occurred handling', req.url, err) res.statusCode = 500 res.end('internal server error') } }) .once('error', (err) => { console.error(err) process.exit(1) }) .listen(port, () => { console.log(`> Ready on ${hostname}:${port}`) }) }) Then change the script section in your package.json file to this: "scripts": { "dev": "node server.js", "build": "next build", "start": "NODE_ENV=production node server.js" } After this, run 'npm run build' locally and then upload the resulting files to the 'application root' folder you specify in cPanel and set the 'application startup file' also in cPanel to server.js. Then, deploy your app as per this tutorial and it should hopefully be working.

When creating a new Node application, you specify an application startup file (e.g. app.js) and from this the port number to run the server on is read. In this example, 'app.listen(process.env.PORT || 3000)' is specified, meaning that when deploying, the server will first look to the value of the PORT environment variable for your suggested port and, if no value is present, use 3000. But note that, on a shared server via cpanel (unlike locally, where you have full control over your computer as a server), your application may be silently run on a different port from the one you suggest.

@@OpenJavaScript so when a client app calls the server, it automatically redirect the request from the http default port to the 3000?

​ @EVOLI The server that is hosting and running cPanel makes the final call on which port to run your app. It will configure the Node app running on that port to be served when a request comes in to domain you are choosing to run your app on. The port you specify is suggested for the hosting server (it may run on the port you suggest or a different one).

@@OpenJavaScript so clear! Thank you!

I did just post a video on this very topic: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xwfeik3bPpw.html If you have any questions, let me know in the comments.

have you done setup, tried SSH?

Plese, where is the files (app, package, package lock)?

You're welcome!

You're welcome!

@@OpenJavaScript Hi, how can we set up staging environment here

Thanks!

You are welcome!

What seems to be the issue?

@@OpenJavaScript RangeError: WebAssembly.instantiate(): Out of memory: wasm memory at internal/deps/cjs-module-lexer/dist/lexer.js:1:33593 at async initCJSParse (internal/modules/esm/translators.js:72:5) at async Loader.commonjsStrategy (internal/modules/esm/translators.js:185:18)

@@OpenJavaScript It works without any dependencies, but with express only it dosen't works. is it a problem with the physical memory ? actually i have only 1Go.

Spent 3 days trying node on Cpanel. All kinds of errors!

​@@efoobright5041 It's unlikely to be size-related as Express isn't that large relative to your limit. Because it's working only without dependencies I would guess it's a problem of node_modules being uploaded correctly. If npm install in cPanel isn't working for you (when the app is stopped), I would recommend trying to upload the node_modules folder to the root directory of your app yourself. I have tried this previously and it fixed a similar issue.

💙

You are in luck! I did a tutorial on serving static files recently: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-fyc-4YmgLu0.html

same issue here have you found a solution?