How to Install NPM Based Projects on Cloudways

by Fahad Saleh  August 18, 2016

We, at Cloudways, constantly try to add more features to our growing number of services. As such, we are enabling NodeJS as a service. Users now have the access to Node Package Manager (NPM).

Getting Started

Before proceeding further, we think it is important that the readers understand some common terms:


NodeJS is a server-side JS environment for web apps. For those who want to start writing server-side code using JS instead of PHP, Python, and Ruby, this is great news.

NodeJS Package Manager (NPM)

NPM is the dependency management tool that comes with NodeJS. NPM is to NodeJS what pip is to Python or ruby-gems is to Ruby. It makes it easy to download and manage NodeJS modules, removing a lot of hassle for the users.


Bower is another dependency management tool used to manage front-end (HTML/JS/CSS) packages/dependencies. It could be downloaded through NPM.


Grunt  is a JS task runner tool used for, among other things, linting, unit testing, and compiling JS.


AngularJS is a MVC framework for the frontend (HTML/JS).  AngularJS extends HTML tag attributes with Directives. The best description of Angular JS is given on its website that says that Angular is “what HTML would have been, had it been designed for building web-apps”.

Note that AngularJS has nothing to do with NodeJS. One could make a fully functioning web app using AngularJS and PHP/Python/Ruby on the server side.

So let’s get started.

Launch a New Project

Go ahead and launch a Cloudways server with a simple PHP stack application. SSH into the server with the master credentials and cd into the project’s public_html directory.

Run the following commands to verify that NodeJS and NPM are indeed installed.

Now, let’s build a basic posts app, where anyone can come and write a post. The posts will not be saved anywhere because the app will focus on the frontend exclusively.

Create post_controller.js

This app is created in AngularJS and this is the controller for the app. Using the angular module, we create an app, from which we create a controller ( that is a class as well). Please note that I have declared one function and one variable (var pc = this; this is the a handle which is used to access the class itself.).

These functions and variables could be directly called from the HTML code:

  • The post_list variable stores all the posts. I will bind it to an HTML element later on so that any changes to this list will result in instantaneous results in the UI.
  • addPost function reads the post from the post_text (which will be passed from the HTML form) and appends it to the post_list

Update index.html

  • ng-app=”PostApp”: I declared the app inside a div using this attribute.
  • ng-controller=”PostController as pc”: This declares the Controller and assign it an alias for easy access.
  • ng-submit=”pc.addPost(): This is a trigger. When the form is submitted, the addPost function defined in the js file will be called. This call will append the post to the post_list variable.
  • ng-model=”pc.post_text”: This variable maps the input box’s text with the post_text variable in the addPost function, defined in the js file.
  • {{ pc.post_list.length }}: The “post_list” variable is being directly read by PostController class and calculate the length to display.
  • ng-repeat=”post in pc.post_list”: This directive will loop through each of the post in the post_list variable so that I can display them using the just created post
  • {{ post }}: Variable provided by the loop discussed above.

The basic app is now complete. Let us test it out.

At this point, I will initialize NPM and NodeJS in the project’s directory.


Make sure you are in the <app_name>/public_html and run the following:

  • The first command initializes NPM in the project. Basically, this creates a json, which will hold a list of all the dependencies.
  • The second command installs bower. The –save switch adds the bower package to the json file created with the first command
  • The third command lists the currently installed dependencies. This list should be similar to the packages list inside the json file.

The idea is that anyone runs the project could simply get things going by running:

This will install all of the dependencies listed in the package.json file.


At this point, you will have access to the bower binary inside node_modules directory. Run the following commands.

  • The first command initializes bower in the directory just as with “npm”. A “json” file will be created which will hold bower dependencies.
  • The Second and third commands install 2 dependencies which we’ll use to spice up our app. The “–save” switch tells bower to store these dependencies in the “json” file.
    • boostrap: Used to show custom themes for the UI
    • css: Basic animation classes
  • The final commands lists the currently installed dependencies.

As with npm, the “bower.json” file will be used by others to automatically install dependencies from your project using:

Add the following lines inside the head tags in index.html:

Also, replace:


Reload the page, and add a few posts. The changes should be evident (newly added posts will flash for a couple of seconds, and the submit button will be blue). This was not really impressive, but the point was to show how easy it is to install and manage dependencies using bower and NPM. For a big project, NPM and bower are really invaluable.

Possible Workflow Strategy

  • Commit json and package.json using your preferred SCM.
  • Ignore bower_components and node_modules
  • After cloning a project, users should run npm install and later bower install

Existing PHP Projects

Launch a new PHP Cloudways app and clone your project into your <app_name>/public_html using either the SFTP access or via the Git Deployment feature that Cloudways offers.

Finally, cd into your project’s public_html directory and just run,

If your project has a package.json file, all dependencies will be automatically installed. If the project also has a bower.json file,  then additionally, run the following command to see if bower was installed through NPM.

If it was, go ahead and install bower dependencies.

Finally, you may need to recheck your includes and confirm the paths to the dependencies.

That’s it, you’re good to go.

If you need to add to the discussion or have a question, please leave a comment below.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Fahad Saleh

Fahad Saleh is a DevOps Engineer at Cloudways

Stay Connected:

To Our Newsletter

You Might Also Like...