Welcome to this blog series on the MEAN stack! We hope you are not a mean person, but that you will be a MEAN developer. This blog assumes you are new to MEAN, and would like to install the components, and build your first MEAN application. In this first post, we will do a quick introduction to the MEAN stack, get the necessary components installed on your computer, and build a really simple MEAN stack solution.
What is MEAN?
MEAN (or MEAN stack as it is frequently called) is a FULL stack JavaScript based collection of technologies intended to develop web applications. Its name is an acronym of the four primary technologies in the MEAN stack:
MongoDB
ExpressJS
AngularJS
Node.js
MEAN is an alternative to the LAMP stack (Linux, Apache, MySQL, PHP) as well as to traditional JAVA application server solutions.
MongoDB is an open-source, leading NOSQL, document oriented database. Instead of a traditional relational (rows, columns) structure, MongoDB stores JSON style documents with dynamic schemas.
Learn more at https://www.mongodb.org/
Node is an open source runtime environment for developing server side web applications. It supports dynamic (JavaScript) language application development, and is based upon Google’s V8 JavaScript engine. Using a non-blocking API and event driven architecture, its throughput and scalability far exceeds nearly all other server based solutions.
Learn more at https://nodejs.org
ExpressJS is a NodeJS dependency that is the most widely used solution for implementing web servers running on NodeJS. It is a rich MVC style solution, that includes integration with a number of view generators.
Learn more at http://expressjs.com
AngularJS is the client side JavaScript framework. One thing to know right away is that AngularJS is not a Javascript “library of functions”, such as JQuery. AngularJS is a complete MVC style solution for client implementations. It uses HTML, extended with data-binding syntax, as a template for dynamic web pages. And JavaScript testability is far easier with Angular applications because of its dependency injection architecture.
Learn more at https://angularjs.org/
Like any popular technology ecosystem, there is a multitude of plug-ins, tools, extensions, and what-not that you could/should/might include a MEAN stack development environment. To not overwhelm, I am going to call out only one of them right now, because it is so prevalent/necessary in any JavaScript centric development environment.
NPM is the Node Package Manager and, as the name suggests, it is a tool for managing the JavaScript dependencies that NodeJs requires. Which dependencies you need, of course, depend on the design objectives of your NodeJS application. Naturally, you can author your own dependencies, and manage them as well using NPM! ExpressJS, as described above, is a NodeJS dependency that is the most prevalent dependency for implementing web applications running on NodeJS. When you install a dependency using NPM, you will install it either as a project dependency or a global dependency. Global dependencies are normally used for packages installed to run as command line utilities. We’ll see some of that when we install ExpressJS.
Learn more at https://www.npmjs.com/
This is the part of a blog where (normally) the author tells you why the topic at hand is so important and/or superior to competing solutions. I find that I always have to go back and re-read this part, after I actually do the hands-on learning, as it is like putting the cart before the horse. So let’s get right into the hands-on stuff, and I’ll save the comparison chart for later in this series.
Installation & Getting Ready to Develop Using MEAN
My personal laptop is a MacBook Pro running El Capitan, so my instructions will be based on this configuration. You will obviously need to tweak these instructions for your configuration, especially if you are installing in a Windows environment.
MongoDB
Install MongoDB & start the daemon process
Download MongoDB tarball from http://www.mongodb.org/downloads. You will probably want to download the latest stable version, which is 3.2.0 as of this writing.
Extract the content of the tarball.
tar zxvf mongodb-osx-x86_64-3.2.0.tgz
Copy the contests of the extract to its permanent directory.
mkdir <install-path>/mongodb
cp -R <extract-path>/mongodb-osx-x86_64-3.2.0 <install-path>/mongodb
Add the bin directory to your path.
PATH=<install-path>/mongodb/bin:$PATH
Now we can start the MongoDB daemon, which is located in the bin directory. All defaults should be OK, so no command line parameters are necessary for now.
mongod
If all goes well, the daemon should output a small amount of logging to the console where mongod is begin run. If you want to stop the daemon, a CTRL-C in the daemon console will get the job done. Of course, there are better ways to do this, especially in production environments, but for now, this will suffice.
If you have any startup issues, it most likely relates to the MongoDB data directory. By default, the data directory is /data/db, and it should be created if it does not exist. So check that it exists and its permissions. It should be readable and writeable by the same owner of the mongod process.
Interact with MongoDB using the shell tool
MongoDB ships with a command line shell, called mongo. As a quick demonstration, let’s insert a simple document into the users collection, and then query for it.
$mongo
>db
test
>db.users.insertOne(
{
name: “Larry”,
age: 30,
status: “blogging”
}
)
{
“acknowledged” : true,
“insertedId” : ObjectId(“566b1c116fafa23a40e1b5c6″)
}
>db.users.find()
{ “_id” : ObjectId(“566b1c116fafa23a40e1b5c6″), “name” : “Larry”, “age” : 30, “status” : “blogging” }
>exit
$
There is a LOT more about the mongo shell here.
NodeJS & NPM
Install NodeJS & NPM
Now we can install the engine of our server side – NodeJS. The installation described will also install Node Package Manager (NPM) at the same time. Remember that NPM is used to manage dependencies in the NodeJS ecosystem.
Download the combined install for NodeJS and NPM from https://nodejs.org. I recommend that you download the most recent stable version, which is 4.2.3 as of this writing.
After downloading, run the installer. The default locations for the install are /usr/local/lib & /usr/local/bin. The node executable will be installed into /usr/local/bin. All “bootstrap” NodeJS dependencies will be installed into /usr/local/lib/node_modules. NodeJS “knows” to look in the node_modules directory for its dependencies.
The directory /usr/local/lib/node_modules is where all NodeJS global dependencies are stored. So, if you later install other global dependencies, they too will be installed in /usr/local/lib/node_modules. Also, local dependencies (which are only visible to a specific project) are also stored in a directory called node_modules. But the path to a local dependency is <project-home-directory>/node_modules.
Let’s check that NodeJS and NPM are installed from the command line.
$ node -v
v4.2.3
$ npm -v
2.14.7
Hello World, NodeJS style
Now, we will write a one line NodeJS application and run it.
Create a file called ‘hello.js’, with the following content.
console.log(“Hello world”);
Now, use NodeJs to run the file
$ node hello.js
Hello World.
Notice that we did not have to add any other dependencies for NodeJS to run this EXTREMELY simple application.
ExpressJS
We are ready to install ExpressJS!
First, we will use npm to do a global install of a package called express-generator. We will then use express-generator to build a project skeleton of our new express application. Be clear that express-generator is not express. We will install express as a local dependency of our project in the second step.
Second, you will see that the project skeleton defines the “standard” dependencies of an express project, which includes express itself as well as several other routine dependencies in an express project. But (as described earlier), we will need to install them into the node_modules directory of our project using (you guessed it) npm.
Third, now that we have completed installation of our “out of the box” express application, we can fire up this application in NodeJS. What can we do with it at this point ? — well, not much since we have not added any of our own code to make it do something useful. But what we can do is go to a browser and display the index page with its default contents. You can think of it in the same fashion as the default index page for Apache or Tomcat !
Install express-generator
Use npm to install express-generator. When you use npm with the -g option, you are telling npm that the dependency should be installed globally.
$ npm install express-generator -g
This will install express-generator in the global node_modules directory. Now, we convince ourselves of this fact by listing the contents of the directory /usr/local/lib/node_modules/express-generator.
$ cd /usr/local/lib/node_modules
$ ls express-generator
total 24
drwxr-xr-x 8 larryschoenfeld staff 272 Mar 12 2015 ./
drwxr-xr-x 29 larryschoenfeld wheel 986 Dec 11 13:07 ../
-rw-r–r– 1 larryschoenfeld staff 1102 Aug 24 2014 LICENSE
-rw-r–r– 1 larryschoenfeld staff 2091 Jan 27 2015 README.md
drwxr-xr-x 3 larryschoenfeld staff 102 Dec 11 15:51 bin/
drwxr-xr-x 6 larryschoenfeld staff 204 Mar 12 2015 node_modules/
-rw-r–r– 1 larryschoenfeld staff 2754 Mar 12 2015 package.json
drwxr-xr-x 8 larryschoenfeld staff 272 Mar 12 2015 templates/
A couple of things worth noting about the express-generator install directory. (And you will see a similar pattern with every application built for NodeJS!).
express-generator has a node_modules directory of its own ! Of course, this is for the dependencies of express-generator!
The package.json file is kind of important. It contains (among other things), a list of the dependencies of express-generator. Because we used npm, the install has already parsed the package.json, identified the dependencies, and downloaded them. Take a look at the node_modules directory and see for yourself.
Here is the dependencies of express-generator in the package.json.
“dependencies”: {
“commander”: “2.6.0”,
“mkdirp”: “0.5.0”,
“sorted-object”: “1.0.0”
}
And here is the directory listing of /usr/local/lib/node_modules/express-generator/node_modules
$ ls node_modules
total 0
drwxr-xr-x 6 larryschoenfeld staff 204 Mar 12 2015 ./
drwxr-xr-x 8 larryschoenfeld staff 272 Mar 12 2015 ../
drwxr-xr-x 3 larryschoenfeld staff 102 Mar 12 2015 .bin/
drwxr-xr-x 6 larryschoenfeld staff 204 Mar 12 2015 commander/
drwxr-xr-x 12 larryschoenfeld staff 408 Mar 12 2015 mkdirp/
drwxr-xr-x 6 larryschoenfeld staff 204 Mar 12 2015 sorted-object/
One more thing to point out. If you look in the /usr/local/bin directory, you will see a link as follows, pointing to tan executable ‘express’.
lrwxr-xr-x 1 larryschoenfeld admin 49 Mar 12 2015 express@ -> ../lib/node_modules/express-generator/bin/express
In /usr/lib/node_modules/express-generator/bin, you’ll see the executable.
#!/bin/env node-rwxr-xr-x 1 larryschoenfeld staff 8873 Mar 8 2015 express*
express is an executable script that is executed by the node binary executable. You can see this by examining the first line of express.
#!/bin/env node
So the take away of all this is that you can run the node program for generating an express project simply by entering the command ‘express’ (and any desired parameters) from any location. This is another common pattern you will see often for NodeJS command line applications.
Use express-generator to create an Express Project Skeleton
Let’s create the project structure for an ExpressJS application using express-generator.
Go to the directory that will be the parent of the project. From, there run express, with a command line parameter specifying the name of the project, which I am calling ‘MyFirstMeanProject’.
$ express MyFirstMeanProject
Take a look at the project structure:
~/NodeProjects $ ls MyFirstMeanProject
total 16
drwxr-xr-x 8 larryschoenfeld staff 272 Dec 14 08:47 ./
drwxr-xr-x 9 larryschoenfeld staff 306 Dec 14 08:47 ../
-rw-r–r– 1 larryschoenfeld staff 1430 Dec 14 08:47 app.js
drwxr-xr-x 3 larryschoenfeld staff 102 Dec 14 08:47 bin/
-rw-r–r– 1 larryschoenfeld staff 336 Dec 14 08:47 package.json
drwxr-xr-x 5 larryschoenfeld staff 170 Dec 14 08:47 public/
drwxr-xr-x 4 larryschoenfeld staff 136 Dec 14 08:47 routes/
drwxr-xr-x 5 larryschoenfeld staff 170 Dec 14 08:47 views/
Note that there is not a node_modules directory, with the express dependencies. That is because, so far, we have only built the project structure, but have not installed the dependencies. As explained earlier, you can see a list of dependencies that need to be installed in the package.json file.
$ cd MyFirstMeanProject
$ cat package.json
{
“name”: “MyFirstMeanProject”,
“version”: “0.0.0”,
“private”: true,
“scripts”: {
“start”: “node ./bin/www”
},
“dependencies”: {
“body-parser”: “~1.12.0″,
“cookie-parser”: “~1.3.4″,
“debug”: “~2.1.1″,
“express”: “~4.12.2″,
“jade”: “~1.9.2″,
“morgan”: “~1.5.1″,
“serve-favicon”: “~2.2.0″
}
}
The ~ (tildes) next to the version numbers in package.json are part of what npm calls semantic version management (svm). For now, know the svm is how you tell npm what version(s) of various dependencies are acceptable in your project. We will learn more about svm in future posts.
Let’s install the dependencies now, using npm of course.
$ npm install
With no options, npm will do a local install of all the dependencies listed in package.json. After running the install, you can now see that the node_modules directory has been created. You can take a look at the contents of node_modules, if you like.
$ ls node_modules
total 0
drwxr-xr-x 10 larryschoenfeld staff 340 Dec 14 08:57 ./
drwxr-xr-x 9 larryschoenfeld staff 306 Dec 14 08:57 ../
drwxr-xr-x 3 larryschoenfeld staff 102 Dec 14 08:57 .bin/
drwxr-xr-x 9 larryschoenfeld staff 306 Dec 14 08:57 body-parser/
drwxr-xr-x 9 larryschoenfeld staff 306 Dec 14 08:57 cookie-parser/
drwxr-xr-x 14 larryschoenfeld staff 476 Dec 14 08:57 debug/
drwxr-xr-x 9 larryschoenfeld staff 306 Dec 14 08:57 express/
drwxr-xr-x 16 larryschoenfeld staff 544 Dec 14 08:57 jade/
drwxr-xr-x 8 larryschoenfeld staff 272 Dec 14 08:57 morgan/
drwxr-xr-x 8 larryschoenfeld staff 272 Dec 14 08:57 serve-favicon/
Start the Express Application and display the index page
Believe it or not, we are ready to run our express application and display the index page.
The script we want to run is MyFirstProject/bin/www. We can run this script using the node command.
$ node ./bin/www
Alternatively, we can run this script using npm
$ npm start
Hint: Take a look at package.json, and you will see a scripts object with the alias for start!
Use either command method, and start your ExpressJS application. (After you run the command, the ExpressJS application will be waiting for input. So let’s give it some input!)
The default port that ExpressJS listens at is 3000. Open a web browser of your choice, and go to:
http://localhost:3000
Success (we hope!). You are looking at the ExpressJS index page.
Install AngularJS
On to the client side environment of AngularJS! We are going to install AngularJS manually — but before we go further, you should be aware of a package management tool called bower that is used for AngularJS packages. You can think of bower as npm for client side stuff – and indeed bower and npm are extremely similar tools. You can read a lot more about bower here. We are not going to cover it in this intro, but we’ll revisit it in later posts.
We can manually install AngularJS by using npm to download it, and then copy it to angular javascript file to the public folder in our web site. The ExpressJS application, by default, servers static content from the public folder.
$ npm install angular
$ cp node_modules/angular/angular.js public/javascripts
Since no version is supplied in the npm command, it will install the most recent version of AngularJS, which is 1.4.8 as of this writing.
Note that we are copying the uncompressed version of angular to the public folder. I prefer this approach in non-production environments for debug purposes, although I would normally use the minified version (angular.min.js) in production.
Let’s create a VERY simple HTML template in AngularJS and add it to our public folder. Create a file called ‘hello.html’ in the public folder, as follows:
<html ng-app>
<head>
<script src=”javascripts/angular.js”></script>
</head>
<body>
<div>
SAY MY NAME: <input type=”text” ng-model=”myname” /><div>Hello {{myname}}</div>
</div>
</body>
</html>
This is a bare-bones Angular app. The directive ng-app declares this template to be an Angular application. ng-model tells Angular to add the value of the textbox to the global scope with the name myname . The {{myname}} markup requests that Angular display the current value of the variable myname in the global scope. Don’t fret if that does not make much sense yet — the important thing for now is to verify that Angular is working as described below.
Let’s go back to our web browser, and display this new page.
http://localhost:3000/hello.html
You should see the following output:
Try typing a name, like ‘heisenberg’ into the textbox, and see that Angular automatically updates the Hello text!
Congratulations, you have completed your first MEAN stack implementation! Well, almost — you probably have noticed that there is no ‘M’ for ‘MongoDB’ in this simple example, and we have only scratched the surface of the E, A, and N ! But you are using an ExpressJS application running on NodeJS, and serving a page to an AngularJS client on the browser! No worries though, we’ll see plenty more of MEAN in future posts.
Coming Attractions
Hope you enjoyed this first post in this series on MEAN! Now that you have some context for the MEAN ecosystem, we will start developing a more meaningful MEAN stack application in the next post.