Manual install method node cpanel?

[pingram3541]

Hello, I’m new and please not looking to get schooled on why this may not be the best idea from cpanel hosting, just playing around to see if it can be done.

Is this even possible? FastComet (https://www.fastcomet.com/tutorials/nodejs)

I sought to get some of my own answers and here is my experience so far…

In cpanel, one must first create a Node application to have access to Node. Since the npx script does some of the process required by cpanel, I set out to see if I could still get this set up.

First thing, the “Application Path” cpanel asks for, not sure what Frontity will set this to so I left it blank, it resolved to app.js and this was a must before I could create the app (headless). I think I’ll need to come back to this later. Also, do I need a custom variable to map PORT 3000?

Next I access the Node environment via the command from cpanel (something like): source /home/myaccount/nodevenv/headless/10/bin/activate && cd /home/myaccount/headless

I noticed my application folder “headless” has an app.js, .htaccess and public and tmp folders but no default package.json. I also know your script should do all of this for me so I went up a folder and ran npx frontity create headless but it error’d out saying the folder was not empty.

I zipped up the contents just to have a base backup and cleared out the folder, then again from just above the folder ran the command again but it fails missing a package.json in the mars theme???

Error: Command failed: npm install
npm ERR! code ENOLOCAL
npm ERR! Could not install from "../nodevenv/headless/10/lib/packages/mars-theme" as it does not contain a package.json file.

So next I put the original files back and ran it from within the /headless/ folder which effectively did successfully complete the npx build but obviously in a nested folder. I took the folder contents it created and placed them in the root folder but when running npx frontity dev it errors out saying /nodevenv/headless/10/lib/packages/mars-theme is missing a package.json file. This is because it is indeed not present.

I then notice a /packages/mars-theme in my /headless folder and copy this to /nodevenv/headless/10/lib/ then go back to my cpanel, stop the app and change that Application Path to frontity.settings.js, save and then start the app again.

Now back in the root /headless folder I am now able to successfully run npx frontity dev!

Yet, it listens on localhost:3000 of which I am not sure what to do next.

[edit] I think I need to find what flags are available, I found I could change the port with npx frontity dev --port X but when I try 80 it fails since that is being served via apache through the .htacess file which has the following:

# DO NOT REMOVE. CLOUDLINUX PASSENGER CONFIGURATION BEGIN
PassengerAppRoot "/home/myaccount/headless"
PassengerBaseURI "/"
PassengerNodejs "/home/myaccount/nodevenv/headless/10/bin/node"
PassengerAppType node
PassengerStartupFile frontity.settings.js
# DO NOT REMOVE. CLOUDLINUX PASSENGER CONFIGURATION END

I then tried npx frontity build && npx serve which resulted in:

Serving!

• Local: http://localhost:5000 │
• On Your Network: http://[IP_ADDRESS]:5000

Of which I also cannot access =(

[Pablo]

Hello @pingram3541 and welcome to Frontity

Thanks for all your research, we are going to take a look and try to emulate your configuration in order to help you, we might need some time as we don’t usually use hostings with cPanel.

Meanwhile you can follow the deploy on now guide.

[luisherranz]

Wow, thanks for trying @pingram3541. We have almost no experience with cpanel to be honest. I used it years ago but only for PHP.

Since the npx script does some of the process required by cpanel, I set out to see if I could still get this set up.

npx is optional. You can create your project locally and then upload it to your server, or create a repo
locally and then clone it. For the comands like npx frontity dev you can just use npm run dev instead.

“Application Path” cpanel asks for, not sure what Frontity will set this to so I left it blank, it resolved to app.js and this was a must before I could create the app (headless).

Maybe this is the server to run something like this?

> node server.js

I noticed my application folder “headless” has an app.js , .htaccess and public and tmp folders

Ok, yes. It looks like cpanel gives you a regular node app. Is app.js a hello world?

---

I see some of your problems are because you are trying to create the project inside cpanel.

Wouldn’t it be easier to create and modify the project locally and the upload it to cpanel? That’s the usual workflow in the JS/Node world.

Apart from that, I think you may need a file for the “Application path” so cpanel is able to run node that-file.js. Maybe starting frontity yourself with npx frontity serve is not enough.

Unfortunately the actual server file build/server.js is prepared for serverless, so it doesn’t listen to any port. It’s when you use frontity serve that it starts listening.

Check the content of app.js to see if it’s an example and post it here. Maybe that gives us more clues

[pingram3541]

Wow, thanks for trying @pingram3541. We have almost no experience with cpanel to be honest. I used it years ago but only for PHP.

I figured since many of my clients use cpanel hosting I might as well learn how to set up a Node app in this environment and play around a bit. The baseline Lighthouse tests against my initial “hello world” w/ (w/ Google’s fake 3g throttling thrown in) deployed on FastComet and all perf marks came back 0.1s.

npx is optional

Thx, this is the noob in me not seeing any write ups or knowing where to look for the: npm i @frontity/[stuff]

You can create your project locally and then upload it to your server, or create a repo
locally and then clone it.

This is where I need to brush up on how to deploy to different environments. Reading up on Now to get more familiar with the serverless deployment but any Node environment should do right?

For the comands like npx frontity dev you can just use npm run dev instead.

Ty!

Is app.js a hello world?

Yes it is. If I change the Application Path back to this file (placing this file back in my root project folder) it does indeed produce a hello world type template. Here is the contents:

var http = require('http');
var server = http.createServer(function(req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    var message = 'It works!\n',
        version = 'NodeJS ' + process.versions.node + '\n',
        response = [message, version].join('\n');
    res.end(response);
});
server.listen();

Wouldn’t it be easier to create and modify the project locally and the upload it to cpanel? That’s the usual workflow in the JS/Node world.

I think I’d still be in the same situation no? Not knowing how to actually serve it from this cpanel environment?

Do we need to use this app.js template to hook in Frontity somehow?

[luisherranz]

Reading up on Now to get more familiar with the serverless deployment but any Node environment should do right?

Yes, any node environment should do

If I change the Application Path back to this file (placing this file back in my root project folder) it does indeed produce a hello world type template.

Ok, first thing you need is to run npm run build to generate the /build folder.

The server can be started with a npm run serve but that may not work in the “Application Path” option because it looks like it is waiting for a JavaScript file.

The equivalent of npm run serve using node and a JavaScript file is:

node node_modules/frontity/dist/commands.js serve

The command.js with serve arg is the equivalent to your app.js.

So maybe you can use this for “Application Path”:

node_modules/frontity/dist/commands.js serve

If you need a different port than the default 3000, you can pass it with --port 1234. I don’t know why there’s no port on the app.js file. Maybe it is in an environment variable. If that’s the case, you can use:

node_modules/frontity/dist/commands.js serve --port $PORT

[pingram3541]

Thanks @luisherranz for all your help but unfortunately this isn’t working. I did find in one of their dialog notes that the custom variables when used for PORT are only available from within the server environment and not public.

Trying to start w/ port 80 or 443 fails as those ports are already bound to Apache which is serving those ports to the application path: node_modules/frontity/dist/commands.js serve

I’m going to open a ticket w/ FastComet and see if they are able to provide any input. Thanks again!

[luisherranz]

Sure. Ask them please if you can pass args to “Application Path” like these:

node_modules/frontity/dist/commands.js serve --port 3000

and which port is it or how to find it

[pingram3541]

If I use the boiler plate file they provided - app.js and put that as the Application Path, it listens on port 443 - https://mysite.com/ and results in “It Works!”

I’m thinking it will probably require using file to bootstrap to another?

I saw another example image in their tutorial I linked in the first post where the server port was passed as a const to the server.listen command so I’m curious if I can use app.js cleverly to get this served up.

[luisherranz]

Do npm run build, modify app.js with this code

var frontity = require("./build/server").default;
var http = require("http");
var server = http.createServer(frontity);
server.listen();

and add app.js back to the “Application Path”.

[pingram3541]

Yay it works

Ok, so I now know how, if for some reason I ever had the desire, to set up cpanel Node and deploy a Frontity site in production.

Now I’m going to set up a virtual environment for the dev env to continue playing and learning, thank you so much for your help with this!

[luisherranz]

Thanks to you Phillip

I don’t have much experience with cPanel so I’d like to ask you some questions:

• Are all cPanels similar?
• Are all Node installation procedure in cPanel similar?
• Do you think we could create a guide for cPanel that well… works in most cases?

[pingram3541]

Are all cPanels similar?

Yes, similar but there are differences and it really depends on the host offerings. Like Wordpress, there are many add-ons both core and 3rd party. NodeJS Selector is how they reference the Node feature.

FastComet told me this:

Note that indeed applications that are using in their configuration a hardcoded port it is not compatible with NodeJS Selector as the applications used by it are handled by the Passenger service on the server and no port required for it.

You can run more about Passenger in the following link:

https://www.phusionpassenger.com/library/walkthroughs/basics/nodejs/fundamental_concepts.html

As such for handling applications you should work with them via SSH using ‘npm, node and pm2’ services.

So this environment can only be used to “serve” the application once ready for production.

Are all Node installation procedure in cPanel similar?

I really don’t know as this is my first but I’ve seen NodeJS as a feature for quite some time across many different hosts that use cpanel.

Do you think we could create a guide for cPanel that well… works in most cases?

Yes I think most will be very similar experiences. I’m going to retrace my steps and post back. Cheers!

[pingram3541]

Do you think we could create a guide for cPanel that well… works in most cases?

Let’s give it a shot.

Here’s what seems to work for me w/ Fastcomet hosting…

1. Create your domain/sub-domain as one normally would with cpanel. I chose to create a new sub-domain called “headless” in this example with the root folder being /headless in my hosting plan. I verified the DNS cname for headless also points to my Fastcomet server IP. I test a simple hello world html file to ensure all is good.

2. Back in the cpanel myriad of icons, locate the Node.js icon:

3. In this menu simply click “create application”

4. Next…

• choose the latest version offered of Node
• set the environment to Production
• set the application root to domain/sub-domain path, i.e. I chose “headless” and then…
• choose the actual sub-domain from the drop down
• lastly, I show the app.js file in the image below but leave this blank, it will automatically be created for you
• finally, click create!

5. Once this is done, the Node app will be started and the virtual environment path will be shown:
   
   

*the site should also be live in your browser now with a basic “it works!” message.

6. Copy the highlighted path shown above and ssh to your hosting plan (Fastcomet has a tutorial on this) and paste the copied snippet which should put your in the folder of your sub-domain (i.e. /headless) which is also the application root path but this will allow /node_modules to install in the proper place (more on that later).

You should be aware another folder is created in your root hosting path called /nodevenv/ where another instance of your app/domain/sub-domain name lives as a folder and allows for the Node executables to live (I hope I am saying this correctly):

The files in the bin folder look like this:

7. …back in our Node app/domain-path folder (/headless), execute npx frontity create headless (or your app name/path) doesn’t really matter because the npx runner creates the app folder which in this case will be a sub-folder within our cpanel app folder, again in my case “headless” within our original “headless” folder because…

• npx frontity create needs the folder of which to be created to be empty or it won’t run
• we want to keep the original cpanel generated files (.htaccess, app.js…)
• we can just move the needed files easily into to our root app folder

8. The npx installation script should complete and the new /headless/headless folder is created along with /nodevvenv/headless/10/lib/node_modules/ (which is empty??? more on that in a sec)

*in the main app folder, (/headless), node_modules is sym linked to the virtual path /nodevenv/headless/10/lib/node_modules/

9. Next we fix our installation because if you remember the node_modules directory is still empty. We will fix this but first, for some reason, the theme installed in our app path /headless/headless/packages needs to be moved to the same folder our real node_modules folder lives otherwise future steps won’t work. Copy the /headless/headless/packages folder to /nodevenv/headless/10/lib/ folder.

(to /lib folder):

10. Now that the theme is moved, copy all of the remaining files in /headless/headless/ to the main app /headless/ folder and back in the ssh terminal, also from the root app /headless folder execute npm install which will install all of the dependencies in /nodevenv/headless/10/lib/node_modules/

11. Now execute npm run build to create the /headless/build/ folder to create the final production version we be will serving to the public. (you can copy over this later with your final dev server’s files)

12. Edit the /headless/app.js file to now serve our frontity app:

    var frontity = require("./build/server").default;
    var http = require(‘http’);
    var server = http.createServer(frontity);
    server.listen();

13. Back in cpanel Node.js area, restart the application and check the browser, you should now see your frontity app.

• fyi - the theme files to edit exist at /nodevenv/yourapp/10/lib/packages/mars-theme/ and every time a change is made you must run from the /headless folder npm run build and then restart the app from cpanel.

Best of luck, cheers!

[SantosGuillamot]

Wow! Thank you very much @pingram3541, the guide is great! I will take a look with more detail. I was trying to do the same with SiteGround cpanel but Node is just available for dedicated servers and I have a shared one. I asked them and they are not planning to include it, so I won’t be able to test it there.

[pingram3541]

Happy to help!

Yeah I think it all depends on the host and if/how they support Node within their cpanel environment.

I saw a write up about installing Node @ SiteGround and it looked to be all via terminal commands which I expect to act much differently than via Phusion Passenger.

If I happen across another cpanel host and see Node.js and have the time, maybe I’ll see if these steps that worked at FastComet work elsewhere too.

[luisherranz]

This is both amazing (Phillip’s tutorial) and amazingly difficult (the steps involved).

My take here is that we need to explore alternative ways, like recommending the PHP Theme Bridge and hosting the serverless function elsewhere or providing a one-click-install for cPanel.

Thanks again @pingram3541 for the detailed tutorial! Amazing work.

[pingram3541]

Thanks for the awesome feedback! I’m so excited and can’t wait to see what’s cooked up next!

[inshaal]

@pingram3541

• Edit the /headless/app.js file to now serve our frontity app:var frontity = require("./build/server").default;
  var http = require(‘http’);
  var server = http.createServer(frontity);
  server.listen();

hy after this i am getting 503 error i stuck in installing frontity in my cpanel please help

[mburridge]

Hi @inshaal

Apologies for the delay in getting back to you.

The 503 error might indicate that the web server service has not started. I guess you were following @pingram3541’s guide above. Did the previous 11 steps all work ok? Did you get any errors when you ran any of the commands in steps 7, 10, 11? If so, what errors did you get?

[hammad]

Inverted Comma is the issue:

The issue lies here in this line of code as he copied code from @pingram3541’s guide and i think he accidentally places inverted commas instead of single/double quotes:

var http = require(‘http’);

Replacing this will resolve the issue if 11 steps worked fine:

var http = require('http');

OR

    var http = require("http");