The MSNR Stack

MongoDB + Sails.js + Node.js + React.js = MSNR (mis · ner)

JavaScript frameworks are coming out of the woodwork right now but picking and choosing  which ones to use for your project can be a pain, because there are a myriad of ways to combine these frameworks to build applications.  ToDoMVC covers some of the more popular combinations out right now, however there is one that they don’t cover. The MSNR stack.

Warning: I am not an expert at building JavaScript web applications so keep that in mind when you read this.  I am writing this as I learn so please forgive my mistakes and false assumptions (especially about other frameworks).   There isn’t enough time in a lifetime to go through all the frameworks people make and I don’t pretend to be an expert in any of the ones I mention.

What is MSNR?

• MongoDB = the leading  NoSQL Database
• Sails.js = a great MVC framework for Node.js.
• Node.js = Server side JavaScript engine.
• React.js  = a JavaScript library for building user interfaces

Sails uses Express.js for handling HTTP requests, and wraps socket.io for managing WebSockets and these libraries are included as part of it’s installation.

Why this combination?

Like I said before there are lots of way of putting JavaScript frame works together to build web applications in pure JavaScript from front to back.  There are several reasons why I chose to combine these libraries together.

• The big question is why use Sails.js over more established and well documented solutions like; Backbone.js, AngularJS, EmberJS or even KnockoutJS.  Easy answer, I love generators.  And Sails.js follows the a philosophy similar to Rails in that you should never have to do things like; write out RESTful APIs, put model code in your controllers or make views do more than just display data.  Most of these frameworks don’t appear to use traditional controllers which I find confusing, which is why I didn’t bother using them.
• After that then next big question is why not use something like AngularJS with Sails.js (which has far more documented examples) rather than React.  When selecting a library to assist with making my views I wanted something that would limit itself to just views.  React is still fairly new (to people not working at facebook) and it’s primary purpose is to assist with creating user interfaces and that’s it.  It’s the perfect fit for someone looking to expand the V in their MVC.  The problem with using something like AngularJS with Sails.js is that you end up writing two controllers.  The same thing applies, in principal, to the other web frameworks like Ember.js and KnockoutJS.  When you plan to use Sails.js you don’t want an entire other framework that will require you to write Models and Controllers for it and then go back and write the ones needs Sails.js too.
• The last two choices were obvious ones.  If you want to do full-stack JavaScript Node.js and MongoDB are as close to an industry standard as you are gonna get right now.

Getting Started

There are a ton of guides for installing Node.js and MongoDB on what ever system you choose.  However I will provide you with a word of warning.  I found out the hard way that some npm packages do not work on Windows yet (forever, react-tools, ect…).  I’m sure these will eventually work and that you could find work arounds but because of these issues I would recommend not using Windows.  As a person who does their development work on Windows I’m going to recommended using Vagrant.  This setup is platform independent as you can install Virtual Box and Vagrant on MAC or Linux as well.

1. Install Virtual Box
2. Install Vagrant
3. Download (or git clone) this pre-made Vagrant box config to a directory (Thank you semmypurewal)
   • This will install MongoDB and Node.js on an Unbuntu server for you.
4.  Open up command prompt and change to the directory you put the vagrant files in (e.g. “cd path/to/directory”)

5. vagrant up

   • This will take a while.

6. vagrant ssh

   • Windows will need to follow this article if you don’t have Git.
7. Now to test your installation

   cd app
   node server.js

   After that navigate to http://localhost:3000

   You should see a “Hello World!”

8. In command prompt hit Ctrl+C to stop node
9. Now install sails.js:

   sudo npm install sails -g

10. Create a new project:

    sails new todoMVC

11. Change the default process port to 3000
    • Open config/local.js and uncomment and change the port number on line 63 to:

      port: process.env.PORT || 3000,

12. Test Out Sails:

    cd todoMVC
    sails lift

13. Go back to http://localhost:3000 and you should see the default Sails app screen.
14. Now since we are using NPM for back-end packages I’d recommend using a package manager for our front-end stuff as well. We’ll use bower to handle our front-end dependencies.  Bower requires git to be installed.

    sudo apt-get install git
    sudo npm install bower -g

15. Now, last but not least, let’s get React installed.  Currently there aren’t any Sails plugins that allow it to easily interface with React (that work) but I’ll cover some of the ways to integrate it in a future posts.

    bower install --save react

16. (Optional) I love bootstrap so I always install it to handle design.  Installing Bootstrap will also install jQuery.

    bower install --save bootstrap

That’s it now that you’ve got all these things installed you can start developing with the MSNR stack.