sails js example application


Notice: A non well formed numeric value encountered in /home/ghadeerr/public_html/ghadeer.io/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Sails js is a NodeJS framework that allows developers to build web applications on top of Node. There is a nice community around sails that has contributed to a very powerful set of sails plugins. From bower to passport integration, you can find a plugin for just about anything.

Let’s create a sample sails application with full front end and backend scaffolding. In this example, we’ll build an application that presents users with a screen that allows them to manage their favorite animals. In less than 5 minutes, we will be able to standup a sails app with all the CRUD screens and backend persistence built in.

1. If you haven’t done so already, globally install sails js.

2. Next, cd into an empty directory and create a .sailsrc file with the following content.

This file is similar to a .bowerrc file when using bower, but instead of listing where your dependencies go, it lists which sails generators you want to use.

The .sailsrc file should have the following content

This is necessary in order for sailsjs to generate the proper angularjs scaffolding when creating a new project.

3. We are now ready to create our sails js app. To create an app we issue the following command:
sails new NAME_OF_PROJECT

You may get the following error, ignore it

Next, cd into the directory

We now have a fully scaffolded sails js app that we can run by issuing the following command:

Note: We have two app.js files. One is located in the base of the project and is used by sails to do its magic. The second app.js file is located in assets/app. This file was generated automatically and allows us work with the angular front end. The name of the module will match the name we gave our project, in this case: “sails-animal-example”

You may be wondering where angular’s ng-app is located to bootstrap our angular code. The scaffolder has added ng-app to the layout.ejs file located here: “views/layout.ejs” file.

 As you can see, the scaffolder has generated a ui-view and is using ui-router.

Now that we have a basic project setup, let’s get the rest of the app working.

Locally install the sails-generate controller

After installation, we are ready to generate our model class that will automatically create our front end code. To create a new api, we simply call the generate api command with the name of the model at the end.

You should now see a few things happen. First, we automatically have a controller and model class generated. These files can be found here

/api/controllers/AnimalController.js
/api/models/Animal.js

On the front end, all of our CRUD screens and angular routes that connect to  our server side controller is all setup too! You can find that code here: “assets/app/animal”.

What is even more unbelievable is the fact that everything is already wired up and ready to use, start your app to see this.

You will have to hit enter twice

Important: Note that on the front end, you have to pluralize the name of your model to access the route, in this case: animals.

Navigate to the following url: localhost:1337/#/animals.

You will be presented with the basic CRUD screens where you can add, edit, delete, and view your favorite animals.

Also, all of our server side calls are already in place. To get a list of animals we call the localhost:1337/animals endpoints.

Let’s update the Animals model, adding a name attribute

We’ll also rewrite our assets/app/animal/animal-add-edit.html screen to match the following:

Restangular has wired up our app in such a way that we will see all the attributes of our model. These attributes involve the internal id, as well as created and modified time. We don’t want users to edit fields associated with these attributes, and so we only allow an input field for the ‘name’ attribute we added.

Navigate to: http://localhost:1337/#/animals/list to view the basic CRUD screen for the Animal model. You can now perform CRUD operations to your hearts content.

In this article, we were able to show how simple it is to throw up a sails application with basic CRUD screens pretty effortlessly. In the next example, we’ll integrate passport so that users can login and logout and we can associate animals to them.

A link can be found on github.

If you enjoyed this article, enter your email below to get free updates!