Manual install method node cpanel?

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!

Of which I also cannot access =(

Hello @pingram3541 and welcome to Frontity :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.

1 Like

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

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.

Maybe this is the server to run something like this?

> node server.js

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 :slight_smile:

1 Like

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.

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

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?

Ty!

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();

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?

Yes, any node environment should do :slight_smile:

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
1 Like

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!

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

and which port is it or how to find it :slight_smile:

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.

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”.

1 Like

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!

Thanks to you Phillip :raised_hands:

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?

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.

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.

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

Let’s give it a shot. :cowboy_hat_face:

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:

step_1

  1. In this menu simply click “create application”

step_2

  1. 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!

  1. 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.

  1. 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):

nodevenv_executables
The files in the bin folder look like this:

node_v_env_bin_files

  1. …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
  1. 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)

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

  1. 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.

copy%20packages%20from
(to /lib folder):
nodevenv_executables

  1. 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/

  2. 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)

  3. 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();

  4. 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! :grinning:

2 Likes

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.

1 Like

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.

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.