In this article I will cover hosting a Node.js app on NamecheapâÃÂÃÂs shared hosting servers using cPanel. I wonâÃÂÃÂt discuss setting up the database server or the React front end for your web app in this article. Instead I want to focus on the challenges you might face with running a Node app in a shared hosting environment.
== DonâÃÂÃÂt delay, host today! ==
Before you get too far down the path of developing your web app it is a good idea to put a stable version online. This could be in your production environment, or in a staging environment which is similar to your production environment. Most people will wait until their app is almost complete before hosting it online âÃÂàand this is what I did when developing my first React and Node web app. However, at that point Ia lot of challenges in getting my Node API server running and I also had to make a lot of changes to my React app. ThatâÃÂÃÂs why I recommend putting a version online early on so that you can make adjustments before writing too much code.
== Using a shared hosting service ==
NamecheapâÃÂÃÂs shared hosting servers use cPanel as the control panel interface to manage the Apache server. These instructions should also help anyone whoâÃÂÃÂs using a shared hosting service with cPanel such as A2 Hosting and GoDaddy.
I also have my Namecheap server set up with an SSL certificate and cPanel by default redirects all HTTP traffic to HTTPS. So all traffic to my server is secure.
You will find many guides instructing you on how to host a Node app on a VPS (Virtual Private Server) hosting service such as DigitalOcean. If youâÃÂÃÂre starting from scratch then hosting using a service like that will give you more control. But it is usually more expensive than shared hosting. And in my case I had already paid for a Namecheap shared hosting service.
Some advantages of using cPanel and shared hosting:
- Managed with a simple web management console
- Easy to configure
- Cheap, especially if youâÃÂÃÂre already hosting a site / domain
- Can easily set up dynamic websites using other technologies like PHP, etc, if youâÃÂÃÂre exploring different technologies
Some disadvantages:
- Less âÃÂÃÂcontrolâÃÂàas you donâÃÂÃÂt have access to the underlying operating system
- Not scalable
== Where does everything go? ==
First you need to create a folder for all the source files for your Node apps. I created a folder called âÃÂÃÂnodejsâÃÂàin the /home/username directory and within this folder I then create a subfolder for each app. Now upload all your source files into this subfolder. Make sure you include the package.json file too. You donâÃÂÃÂt upload the âÃÂÃÂnode_modulesâÃÂàfolder as that will be created with the package manager later.
Remember we are just hosting the Node API server in our web app architecture example. We will not host the React app using Node (more on this topic in the next article).
httpsdavenewman.tech/wp-content/uploads/2020/06/Diagram-5_1.jpg Folder layout shows the Node source files under /home/username/nodejs/mynodeapi folder and thereâÃÂÃÂs a .htaccess file in the /home/username/public_html/myapi folder
== The problem âÃÂàNode app canâÃÂÃÂt access the ports ==
The biggest challenge Iwas in getting my Node API app running. The issue was that the sample code given in NamecheapâÃÂÃÂs support documentation just didnâÃÂÃÂt work! It tries to create a httpserver to listen on port 80 and a http **s**server on port 443. However, I always got a EACCESS error saying that I didnâÃÂÃÂt have permission to use those ports.
== The solution âÃÂàNode doesnâÃÂÃÂt need to access the port! ==
Eventually I found the solution by reading a comment by user SibProgrammer in a thread about Plesk, another hosting control panel. cPanel uses Phusion Passenger application server to host Node apps, as does Plesk. In summary:
When you send a request from your browser it goes to the Apache server, then to Phusion Passenger, and then to your Node app. Your Node app doesnâÃÂÃÂt need to own the port as it is handled further upstream by the Apache and Phusion Passenger application servers.
This simplifies the code for creating the httpserver in your www.js (or app.js) file:
* www.js * Testing the creation of the http server for Namecheap. * Dave */ const http = require('http http.createServer(function(request, response) { response.writeHead(200, {'Content-Type': 'text/html response.endh1>Hello Worldh1 listen(process.env.PORT); console.log('App is running
A few things to note:
- Listen on process.env.PORT (instead of manually setting 80 or 443). When testing I noticed that process.env.PORT is undefined! But interestingly that doesnâÃÂÃÂt matter in this case.
- Use a http server even if you have SSL set up. cPanel has configured Apache to redirect all HTTP traffic to HTTPS and consequently to respond to all requests by HTTPS. You donâÃÂÃÂt need to manually configure your Node app to set up a https server and read in your SSL certificates.
== Final steps for Node API server ==
Now it should be the relatively simple process of following the instructions to set up your node app.
httpsdavenewman.tech/wp-content/uploads/2020/06/Diagram-5_2.jpg Screenshot of cPanelâÃÂÃÂs Node.js configuration page
- Choose the appropriate version of Node.js and application mode (Production is recommended).
- The âÃÂÃÂApplication rootâÃÂàwill be the folder where you uploaded your source files earlier (âÃÂÃÂnodejs/mynodeapiâÃÂàin the example above).
- The âÃÂÃÂApplication URLâÃÂàwill be the URL used to access your API (âÃÂÃÂmyapiâÃÂàin the example). The name you give in this box will be used to create a subfolder in your /home/username/public_html folder. It doesnâÃÂÃÂt have to be the same name as the âÃÂÃÂApplication rootâÃÂàfolder (but often will be).
- The âÃÂÃÂApplication startup fileâÃÂàwill be www.js or app.js depending on how you created your Node app.
- ItâÃÂÃÂs up to you how you want to configure the Passenger log file.
- Once youâÃÂÃÂve created the app youâÃÂÃÂll see the button to âÃÂÃÂRun NPM InstallâÃÂÃÂ. Run this and it will create the âÃÂÃÂnode_modulesâÃÂàfolder with all the dependant modules that your app needs.
Once youâÃÂÃÂve set up your Node app and started it, it will create the subfolder in your /home/public_html folder. You will now need to go to that folder and edit the .htaccess file and add in the following line:
RewriteEngine off
This prevents the Apache server from rewriting (or redirecting) any of the requests that need to go to your API server intact.
And thatâÃÂÃÂs it! Now your Node API app should be up and running and responding to your API calls.
== So whatâÃÂÃÂs next? ==
Now that we have set up the Node API server we could change our React front end in our development environment to point to this API server. Or we could use Postman to test our API calls.
In the next article weâÃÂÃÂll look at hosting up the React app on Namecheap and cPanel.