Building a NodeJS project and deploying it into a DigitalOcean Droplet with Jenkins

Introduction

In this article I will show you how I deploy my Angular project using Github, Jenkins, NodeJS, Vagrant and DigitalOcean.

Creating an Angular project

First of all, you will need a repository to store the source code of your Angular project. The easiest way is to create a public one on Github. Let’s call it angular-test-deploy.

The next step is to install NodeJS LTS, if you haven’t done it yet.

Download | Node.js

Now we can install Angular’s Command Line Interface (CLI) with npm:

npm install -g @angular/cli@latest

Creating an Angular project

If the installation of Angular’s CLI is finished, you are able to generate a base Angular project with the following command:

ng new angular-test-deploy --skip-git

If this is done, the angular-test-deploy folder should be look like this:

One thing is left, pushing it into the Github repository:

cd angular-test-deploy
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/YOUR_USER_NAME/angular-test-deploy.git
git push -u origin master

Creating and Provisioning DigitalOcean Droplet

I have a public repository on Github with the needed files. You can clone or download from here:

rdarida/digitalocean-droplet-vagrant

Files:

• .htaccess and
• 000-default.conf needs for Angular, you can find more information here
• droplet1.sh is a bash script which will install all of the needed tools to the DigitalOcean Droplet.
• vsftpd.conf is a configuration file for vsftpd
• Vagrantfile contains the configuration of the Droplet

Note that you should set your own PRIVATE_KEY_PATH and TOKEN in your Vagrantfile before you run:

vagrant up droplet1

If everything went well, you should see a running Droplet called droplet1 in your DigitalOcean dashboard.

Creating a new user

In order for Jenkins to be able to connect to our new Droplet, you need to create a new user. First step is to log into the Droplet:

vagrant ssh droplet1

And after that run the following command:

sudo adduser --quiet --shell /bin/bash --gecos "" jenkins

This will ask a password, let’s use jankins-digitalocean for this time.

The next command will change the owner of the /var/www/html folder:

sudo chown -R jenkins:jenkins /var/www/html

This is needed for Jenkins to be able to copy files into that folder through ftp.

Running Jenkins on local machine

You have now an Angular base project in your repository and a running Droplet. Only thing is left, setting up Jenkins. You can read about how can you install Jenkins on your local machine in my previous article:

Installing Jenkins on localhost with Vagrant

During the configuration of Jenkins at the Customize Jenkins part, you need to choose the Select plugins to install option instead of Install suggested plugins. This will bring up this page:

Fill the input filed with “NodeJS”, select the checkbox, and press install.

Configuring Jenkins

• Set a global user.name and user.email for Git plugin at the Manage Jenkins > Configure System page.

• Add a NodeJS installation at the Manage Jenkins > Global Tool Configuration page.

Creating a Jenkins freestyle job

The first step to create a Jenkins build job is to click the New Item in the main menu. On the next page enter an item name: angular-test-deploy and choose the Freestyle project.

After clicking OK, the configuration page will appear, where you need to set up:

• Source Code Management

• Build Environment

Creating credentials for droplet1

• Add build step — Execute NodeJS script

• Add build step — Execute shell

npm install
npm run build -- --prod
mv dist/* ./
git config git-ftp.url "ftp://YOUR_DROPLET_IP/"
git config git-ftp.syncroot "angular-test-deploy/"
git config git-ftp.user $FTP_USERNAME
git config git-ftp.password $FTP_PASSWORD
git add .
git commit -m "build"
git ftp init

If this is done click on Apply and Save.

Build Now

Now you can build your Angular site and deploy it into the Droplet by clicking on the Build Now.

If everything went well your Angular site is now deployed. Check it out in your Droplet’s IP address.

There is one thing to do, change the last line of the Shell after the first build to this:

git ftp push

Otherwise the build will fail with this error message: Commit found, use git ftp push to sync.

In the next article I will detail how can you create a ProGet server for your private npm packages.