Sails.js is a web framework used to create enterprise-grade Node.js apps. As with Ember it promotes convention over configuration and loose coupling. Both of these paradigms lend itself to a more predictable and efficient way of creating applications while still being able to extend or omit any part of it.

One great feature of Sails is that you can auto-generate REST APIs with it. Sails uses something called blueprints. Blueprints make it really easy to jumpstart your application's backend without writing any code.

Express is very similar to Sails. Sails was written on top of Express. Sails focuses on a different part of the stack then Express. It puts more emphasis on the ORM, web sockets and it has better glue for the middleware to put everything together at least this according to the creator. So far I've personally found getting started with Sails a little easier. If you want to learn more about Express check out my getting started with express post.

Sane Stack

I wrote a brief introduction to Sane Stack a while ago. Essentially it's a CLI that combines Sails.js and Ember. It has blueprints built in so you can easily create the front end using Ember.js and the back end using Sails. It even has support for Docker if needed. You can plug it into any database fairly easily.

Let's get started and create a simple REST backend for Ember with Sails, Node and MongoDB. I would try to use a clever acronymn here like the MEAN stack has, but I don't think MESN, or NESM, or even MENS has the same ring to it.

Prerequisites

Before beginning make sure you have the following installed.

After everything is installed make sure you can run the Sane CLI. You should see something like this.

sane --version
0.0.23

Getting Started

OK great! First we'll generate the application.

sane new EmberTestApp -d mongo

A minute or two later a new application will be created. The '-d' argument will create the application with all the boilerplate for a connection to the MongoDB database locally. We can run the server like this.

cd EmberTestApp
sane up

This will create two servers. One living on port 1337 on your localhost and the other on port 4200. The port 1337 server is the Sails application. It's where your REST API will live. You can bring it up on your browser and you'll get a generic message welcoming you to the backend. If you bring up the site on port 4200 you'll see the default 'Welcome to Ember.js' message.

Now that we see it works, we can generate the REST api. We'll be creating a basic model as if we were creating a blog for a post. It will consiste of a name, date, creator and content.


 sane generate resource post name:string date:string creator:string content:string

This will generate the post model in the sails server at '/api/models/Post.js' as well as the controller at '/api/controllers/PostController.js'. It then creates the ember post model, route and template.

You can access the api on the 1337 port at 'http://localhost:1337/api/v1/posts'. This will return an empty object. From here, you can use something like Postman to post data to posts.

Using Postman let's send a record to our new REST server and make sure it works. Postman is an easy to use Chrome extension that can be used to send requests.

That should be it. Now if we go back to our browser and and load up 'http://localhost:1337/api/v1/posts' it should list the new record we just created.

Ember

Now all we need to do is make sure Ember can retrieve the data and display it. To make things easier I'll use ember-cli to generate a posts template that will display all the posts.

cd client
ember g resources posts

This will create a new posts route and template. When it asks you to overwrite the post model make sure you type in 'N'. This was already generated earlier when we created the resource using Sane.

Inside the posts route we'll add the model hook.

// client/app/routes/posts.js
  import Ember from 'ember';
  
  export default Ember.Route.extend({
      model: function (){
           return this.store.find('post');
       }
   });

The last thing we need to do is update the posts template and display each post.

// client/app/templates/posts/hbs
This is a list of all the posts
<h1>Posts</h1>
<ul>
{{#each p in model }}
    <li>{{p.name}}</li>
    <li>{{p.date}}</li>
    <li>{{p.creator}}</li>
    <li>{{p.content}}</li>
    </br>
{{/each}}
</ul>
~

We could do a lot here. We could just display the title and have it link back to each post. If you want to see that in a little more indepth check out my Blog Tutorial on Ember that I wrote a while ago.

We should now be able to bring up the client server at 'http://localhost:4200/posts' and see all the posts that it retrieved from the REST API.

Errors

The Sane Stack is in a very early release. I ran into several issues while writing this tutorial. Most of the problem occured when I tried to bring up the server posts. It threw a 'view' exception and stopped. After googling the error I found this issue. Apparently there was some changes to the view part for Sails which is causing issues. I manually deleted a few lines from a file and it fixed it.

Hopefully by the time you try this tutorial you won't have to do this. Check out the github issues if you see any odd issues, they might already have a work around.

Please leave a comment below with any questions.

Image Credit

Sails.js Tutorial With Ember.js