Deploy AngularJS app on Digital Ocean

Digital Ocean provides you with options that allow you to lay out your application’s infrastructure without a sweat.

Some of it’s key features are.

  1. Servers use high performance solid state drives. Their speed greatly enhances your application’s performance and setting up instances take less of your time.
  2. They have a very intuitive control panel that helps you perform a range of tasks.
  3. They have a very active community and their help pages are frequently updated and added to which means there is a great chance of help being readily available in case you get stuck.
  4. One-click installations allow you to spin up your preferred stack with a single click(as you will see later in this tutorial).

And the best among the lot is their prices are pretty easy on your wallet, starting at $5 per month.

Registering your Account

Before we get started, you should have a fully functional Digital Ocean account.

You can sign up here:  Sign Up

Create a Droplet

Here is a screenshot of the settings I chose:

Log into your Droplet

When the droplet has been set up, you will receive an email with the ip address, and password. Make a note of these. I will use dummy values for demo purposes.

I’m using a mac, so from open ‘Terminal’:

As you can see here, you will be prompted to change your password on first login:

When logged in you will be presented with the above text. Telling you a bit of information about the MEAN droplet. Where to upload your code to, and how to run it. We’ll be doing things a little differently though.

First we need to update & then install nginx:

We need to edit the ‘/etc/nginx/sites-available/default’ file. We can do this using VI in terminal. But I prefer to use FileZilla.

Open FileZilla, in Site Manager type in your details as below:Screen Shot 2017-02-28 at 19.50.42

and navigate to:

Screen Shot 2017-02-28 at 19.53.49

Edit this file. Remove all text currently in the file, and replace with the following:

**replace ‘<your-droplet-ip>’ with your IP address you received earlier.

Now we need to restart nginx so our changes take affect:

Nearly there!

We have our server ready to serve our app, we just need to copy our app to the server.

  1. We need to remove the demo app that comes with the droplet install

2. We need to copy our app onto our server. For this, I’m going to clone a demo app from Github

3. Install all node packages

4. We need to install ‘pm2’, this helps with app performance & uptime

5. Start the app

 

Woohoo!

And there we go!

Navigate to your droplets IP address, and you should see your app displaying!

DarraghDeploy AngularJS app on Digital Ocean