Setting Up MEAN.js with Nginx on Ubuntu

I started a new project that will uses MEAN.JS (MongoDB, ExpressJS, AngularJS, Node.js). In my previous post, I discussed setting up Nginx and Apache together on Ubuntu. In this post, I will discuss how to use Express with Nginx. My initial plan was to install Express and use the Express Generator for application scaffolding, but I recently began reading about MEAN.js (and MEAN.io) and decided to use MEAN.js for application scaffolding.

Nginx

I already installed Nginx

sudo apt-get install nginx

So, first I’m going to create a Nginx virtual host. On Ubuntu, Nginx webserver files are served from /usr/share/nginx/www. I created a folder under the main directory.

sudo mkdir /usr/share/nginx/share/www/broadkast

I then created a virtual host:

sudo vi /etc/nginx/sites-available/www/broadkast
 
upstream broadkast { 
    server 127.0.0.1:3000; 
} 
 
server { 
        root /usr/share/nginx/www/broadkast; 
        server_name broadkast.local;
 
        location / { 
                proxy_set_header X-Real-IP  $remote_addr; 
                proxy_set_header X-Forwarded-For $remote_addr; 
                proxy_set_header Host $host; 
                proxy_pass http://broadkast/; 
                proxy_redirect off; 
        } 
 
        location ~ ^/(images/|img/|javascript/|js/|css/|stylesheets/|flash/|media/|static/|robots.txt|humans.txt|favicon.ico) { 
          expires max; 
        } 
 
        error_log /var/log/nginx/broadkast-error.log; 
}

ExpressJS will use Port 3000, so I use the proxy_pass directive to pass control to Express.

proxy_pass http://127.0.0.1:3000;

I then enabled the site using a sym link and restarted Nginx:

sudo ln -s /etc/nginx/sites-available/broadkast /etc/nginx/sites-enabled/broadkast
sudo service nginx restart

I also need to add the virtual host to my hosts file:

sudo vi /etc/hosts
 
127.0.0.1           broadkast.local

Install Node.js

Since I’ll be using MEAN.js, I first need to install Node.js and the npm installer.

sudo apt-get install node.js
sudo apt-get install npm

Install MongoDB

I then installed MongoDB (another prerequisite of MEAN.js).

sudo apt-get install mongodb

Start MongoDB

sudo service mongod start

Note: The documentation on starting MongoDB was a bit confusing. Most of the documentation I read, said that I should follow the instructions below:

  1. On Ubuntu, the default location of the data file directory is /data/db so I should create these directories.
  2. Then to start the service, I could just enter:
  3. mongod
  4. If I want to specify a different path, then I should create the alternate path and enter:
  5. mongod --dbpath /my/new/path

But when I attempted to start MongoDB, I received the message:

[websvr] ERROR: listen(): bind() failed errno:98 Address already in use for socket: 0.0.0.0:28017 
[websvr] ERROR:   addr already in use

I could stop the service and use the mongod command to start, but it should have the same result, so there was really no need.

Install Bower<

Another MEAN.js prerequisite is the Bower Package Manager. Bower is used to find/install packages and dependent packages.

sudo npm install -g bower

Note: Take note of the -g option. Packages are normally installed on a per project basis. Adding the -g option, tells the package manager to install the package globally. I know that I will use bower with multiple applications, so I want it installed globally so that it can be used with all applications.

Install Grunt

Grunt is the preferred package for starting an application when using MEAN.js – but it used for much more than that.

sudo npm install -g grunt-cli

Install MEAN.js

Now it was time to install MEAN.js:. I used the Yo Generator to install. First I installed the Yo scaffolding tool.

sudo npm install -g yo

Then I installed the MEAN.js generator.

sudo npm install -g generator-meanjs

Create a MEAN.js Application

To create a MEAN.js app, I navigated to my project directory and entered:

yo meanjs

I then had to install all Node.js dependencies.

sudo npm install

Starting the Application

To start my app, I entered:

grunt

I received an error that swig was not installed, so I typed Ctrl-C, and then entered

sudo npm install swig

I typed grunt again and then opened my browser and navigated to http://broadkast.local.I received numerous errors:

Uncaught ReferenceError: angular is not defined

So I entered:

sudo bower install --allow-root

I entered grunt again and the sample application displayed correctly. I opened the Net tab in Firefox and saw that my files were being served from Port 80.

meanjs_nginx_ff_net_tab

That’s it. Now I have Nginx and MEAN.JS (and ExpressJS) running together on my Ubuntu VM. Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks