NPM Build And Deployment

Introduction

This post shows how we can build and deploy a simple application using npm and deploy on heroku cloud.

Background

Some time ago, I was new to npm world and was thinking how good it will be if there is some article which I could refer to and start the build and deployment using node package manager. So here I am trying to put some steps together so that it can help the beginner programmer.

Prerequisite

Before starting the build, we need to ensure the below components are installed on the machine.

• Latest version of NodeJS
  • Check the version with “node –version” command
• Latest version of npm
  • Check the version with “npm –version” command

• NPM should be installed on the local project directory.
  • If not installed, use the “npm install” command in the project directory.
• Git Client should be installed on the local system.

Build and Deployment

Package.json plays an important role in the build and deployment script of the Node/Express application.

All npm packages contain this file, usually in the project root, called package.json - this file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project's dependencies. It can also contains other metadata such as a project description, the version of the project in a particular distribution, license information, even configuration data - all of which can be vital to both npm and to the end users of the package. The package.json file is normally located at the root directory of a Node.js project.

The most important things in your package.json are the name and version fields. Those are actually required, and your package won't install without them. The name and version together form an identifier that is assumed to be completely unique. Changes to the package should come along with changes to the version.

Below is the sample package.json file.

Deployment on Local

Please follow the below steps for local build and deployment using npm.

“Git init” command to create a local Git directory.

1. “Git Add . “ command for adding all the files to git
2. “Git commit -m “Comment”” command to commit the changes in the local file
3. Create the remote if it does not exist already. Use the below command to create it:

   Git remote add "Remotename" "remotelocaltion"

   Here Remotename is the name of the remote.

   Remotelocaltion is the location of the remote it can be a Git repository on web or on local system from where you push your code to production/Dev Environment.

4. Push your change from dev to master branch in the remote. Use the below command:

   Git push "origin" master

   Origin is the remote name.

5. For every new code change, repeat the above steps 2, 3 and 5.

We can combine step 2, 3 and 5 in one line. Modify the package.json file and add all the commands separated by “&&” keyword. Refer to the below screen:

After adding all the commands in package.json file, just run the “npm run build” command. It will check the newly added code, push it to remote and restart the server.

In the same way, we can have multiple scripts for automation like testing, pre/post hooks, code review, etc. We can achieve all these things by using npm as a build tool.

If the server is started already, we can start by using the “npm run start” command.

We can check the server on port 3000. Port 3000 is the default listener, we can change by writing the custom code.

For creating the custom DNS, we need to change the host file in the below path:

• C:\Windows\System32\drivers\etc\

Deployment on Cloud

In this document, we are covering the deployment in the Heroku Cloud. The commands and prerequisite change as per the cloud environment.

Setup

We need to have Heroku Toolbelt command line tool for the build and deployment.

We can download it from the Heroku.com. Once installed, we can use the heroku command from our command shell.

On Windows, start the Command Prompt (cmd.exe) or Powershell to access the command shell.

Log in using the email address and password you used when creating your Heroku account:

$ heroku login
Enter your Heroku credentials.
Email: test@example.com
Password:

Authenticating is required to allow both the heroku and git commands to operate.

Deploy the App

In this step, we will deploy the app to Heroku. Create an app on Heroku, which prepares Heroku to receive the source code.

$ heroku create
Creating sharp-rain-871... done, stack is cedar-14
http://sharp-rain-871.herokuapp.com/ | https://git.heroku.com/sharp-rain-871.git
Git remote heroku added

When we create an app, a git remote (called heroku) is also created and associated with your local git repository.

Heroku generates a random name (in this case, sharp-rain-871) for your app, or you can pass a parameter to specify your own app name.

Now deploy code by using the below command.

$ git push heroku master
Counting objects: 343, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (224/224), done.
Writing objects: 100% (250/250), 238.01 KiB, done.
Total 250 (delta 63), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  0.12.2
remote:        engines.npm (package.json):   unspecified (use default)
remote:
remote:        Downloading and installing node 0.12.2...
remote:        Using default npm version: 2.7.4
       ....
remote: -----> Build succeeded!
remote:        +-- ejs@2.3.1
remote:        +-- express@4.9.8
remote:
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote:
remote: -----> Compressing... done, 9.4MB
remote: -----> Launching... done, v8
remote:        http://sharp-rain-871.herokuapp.com deployed to Heroku
To https://git.heroku.com/nameless-savannah-4829.git
 * [new branch]      master -> master
History

Now we can visit the app at the URL generated by its app name. We can open the website as follows:

$ heroku open command