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 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
  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.

8 thoughts on “The MSNR Stack

  1. mikhail says:

    cool? i tink too use this stack

    1. Joe says:

      I’m going to start putting to getter some basic tutorials on getting started soon but I’ve been in WordPress development mode for the last few weeks. Not ready to changes gears quite yet.

      1. Joakim says:

        Please do! This looks awesome. Do you imagine having react render on the server side?

        1. Joe says:

          When I wrote this I wasn’t even aware that it was a possibility but low and behold yet another reason to use react with Sails, Node and Mongo DB… it like a match made in heaven.

  2. mikhail says:

    What you can say about sails-react npm package that i found in google?

    1. Joe says:

      I tested it out and it is still very new yet… pretty buggy as are most sails related things.

  3. r3mi says:

    Hi Joe!
    I am actually in the middle of choosing a JS stack. I’m coming back to webdev world after a few years of break.
    I’m reluctant to take Angular. I’m using Polymer in regular job for a half a year now, but I think React.js is more mature. Although I had long & positive experience with PHP, I’m fallen in love with node.js and just recently discovered Sails.
    So, I just was thinking to join React with Sails, which implicitly means Node + MongoDB, or mixed with any SQL DB as well…

    With your post here, I’m even more convinced. 🙂

    1. Joe says:

      Yeah I liked the idea too. I’ve kind of given up on the idea to be honest. I liked Sails at first but the documentation was a bit sketchy back when I was looking into it and I kept running into issues and knowledge gaps when trying to build things. I recently had much more success with Meteor. In my experience Meteor is much more mature than Sails, better documented and has more packages available for it. I use it over Sails and the stack itself has a variation of Angular/React built in called Blaze so there was no need to learn yet another JavaScript library.

Tell me what you REALLY think...

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>