Getting started with MEAN

By Matt Rees

Web development has come a long way over the last 25 years, from delivering static HTML pages to having cloud-based real time gaming platforms, the rise in technologies associated with web development has been incredibly fast and left hundreds of options. With so many choices on both the client side (front-end) and server side (back-end) it has often led developers needing to master a range of languages and technologies, but could MEAN be about to change that?

What is MEAN?

MEAN is an acronym bringing together a group of technologies allowing you to create a full web development stack (front-end, back-end and database) in Javascript.

M - MongoDB

MongoDB Logo

MongoDb is the leading NoSQL database. Gone are the days of complex relational database structures, data is now being simply treated as data. This allows for greater scalability and performance that sites like Facebook and Amazon swear by. With Mongo you manipulate your data using Javascript Object Notation (JSON) allowing for lightweight storage and fast lookups.

E - Express

Express Logo

Express takes NodeJS and adds a whole bunch of functionality to get you up and running with web development in no time. Similar to Rails for Ruby, it provides you with the core functionality to create and build a fully functioning web server.

A - AngularJS

AngularJS Logo

AngularJS (is also covered in our other blog) is a Javascript library bringing the model-view-controller (MVC) software pattern to front-end development. This software pattern has been used in server development for sometime and now this project from Google is becoming the dominant platform for front-end web development.

N - NodeJS

NodeJS Logo

The site has a package available for download that will let you jump straight into developing using a MEAN stack from your command line whether you’re running Windows, OS X or Linux. This is awesome for experienced developers but working on the command line can still be daunting! Luckily the team at JetBrains have been working on a great Integrated Development Environment (IDE) for Javascript called WebStorm which brings with it all the useful tools we’ve come to expect while developing like code completion, error/warning checking, a debugger and some nice GUIs to handle the Node Package Manager (NPM) and other tools. The Node Package Manager is an online package and dependency manager similar to NuGet on Windows or Cocoapods on OS X allowing you to find, download and install useful NodeJS plugins and libraries and add them to your code.

The best place to start is installing NodeJS. The easiest way is to download one of the available packages from the NodeJS website. Once installed you can check everything is installed by opening your command line tool (Terminal in OS X or Command Prompt in Windows), typing node -v and hitting enter. This should return the version number of your installed nodeJS package.

Whilst we’re downloading packages head on over to the MongoDB Site and download and install the package for your platform. Once installed again on your command line type the command Mongod - if set up correctly this will show you the location of your Mongo logfile.

If you prefer to have your javascript files saved locally we could also download the latest AngularJS library, for now download and remember where you saved it, if not carry on as you were.

The final step is to download and install Webstorm. So download, install and then open the application. You’ll see yourself presented with a range of templates. We could launch an empty NodeJS template and write our server code ourselves, but this is where Express comes in handy!

Installing WebStorm

Choose a NodeJS Express app from the drop down and select OK, on the next screen keep the default templating options (we will come back to those later) hit OK, and finally select download from the internet and hit configure - this will ensure you have the latest version of NodeJS, Express and NPM installed.

First let’s see what we’ve got, click debug - either hit the little green bug in the top right or select debug from the run menu. You’ll see the debug window open and tell us we’re connected but where can we actually see our site? If you open your favourite web browser and go to localhost:3000 you should be able to see your great new site! If you get fed up having to open your browser, select the app.js drop down in the top right and click edit configuration. Switch to Browser/Live Edit and select the After Launch tick box. You can choose any web browser you have installed and click apply. Tip -  Always make sure you hit stop in the console window once finished! Trying to run or debug a new instance while there is already a program running won’t work in WebStorm.

Earlier if you downloaded the AngularJS library now is the time to find it and copy it into the javascripts folder in the public folder generated in your project structure. From here we can reference it in layout.jade. Jade is a HTML preprocessor whose aim is to simplify your HTML and make it more readable. Importing the script to the header of the layout template means we will have the AngularJS libraries available on all future pages of our site, as long as they implement layout. Either include your local script reference or if you prefer, point your src to the current build. For example:

doctype html
     link(rel='stylesheet', href='/stylesheets/style.css'
     block content


doctype html
     link(rel='stylesheet', href='/stylesheets/style.css'
     block content

 To enable a simple AngularJS app in layout.jade add the ng-app attribute to the html tag. To make this even easier underWebstorm -> Preferences -> Plugins hit install JetBrains plugins and install the AngularJS plugin. Next under Webstorm -> Preferences -> Javascript -> Libraries tick angularjs-DefinitelyTyped and express-DefinitelyTyped this will give you code completion for these third party libraries! To check we have set up Angular correctly open index.jade and somewhere on your page type 1 + 2 = {{1 + 2)) to check it the data binding ability of Angular is working.

extends layout

block content
 h1= title
 p Welcome to #{title}
 p 1 + 2 = {{1 + 2}}

If we debug the app now hopefully we will have added the line 1 + 2 = 3 to the our page. If not right click anywhere on the page, view the page source and make sure the script tag has been included.

So that’s EAN installed and working the final step is the M - MongoDB. Using the NPM (Webstorm -> Preferences - > Node.js and NPM ) click install and search and install Mongoose. Mongoose is an open source library to easily use MongoDB with NodeJS, there are others available but this is my personal preference. The other great thing about WebStorm is the ability to install a plugin to see your Mongo databases. Under Plugins (again in the preferences window), hit Browse repositories and search for the Mongo plugin. Once installed select View -> Tool Windows and choose Mongo Explorer. This currently won’t show anything as it doesn’t know where to find your database. So hit the spanner on the Mongo Explorer and it will open the Mongo Servers page. Hit the plus in the bottom left corner, add a useful name and test the connection. If your MongoDB installation earlier was successful this should bring up a small green tick. Close the window and refresh the explorer and you should see your empty local database.

Ready to code

Although a little bit longer than the installation we’re now ready to begin development with our MEAN stack with all the comforts offered by an IDE. Check back soon when we will start developing with our stack.

comments powered by Disqus

We’re a top UK digital agency - wahoo!

By Sophie Hardbattle

We're Eden Agency - one of the UK's top digital agencies.

Read more

An Introduction to Building a SpriteKit-UIKit Hybrid App

By Alan Chung

A guide to help you get started on making an iOS app that seamlessly combines the visual punch of SpriteKit with the practicality of UIKit.

Read more

How to build a material design prototype using Sketch and Pixate - Part Three

By Mike Scamell

Part three of a three-part tutorial on building a material design prototype. This section focuses on adding more detail to the prototype in Pixate.

Read more

We're Hiring - Web Developer Role

By Craig Gilchrist

We are currently seeking a full time full-stack web developer to join the team at our Knaresborough office.

Read more

How to build a material design prototype using Sketch and Pixate - Part Two

By Mike Scamell

Part two of a three-part tutorial on building a material design prototype. This section focuses on creating a interactive login screen in Pixate.

Read more