|
1 | | -The propose of this application is offer an entire application architecture written on javascript from both sides (front-end and backend), |
2 | | -based on angularjs and nodejs. |
3 | | - |
4 | | -The communication will be based on websockets connections, to realize CRUD operations. |
| 1 | +The purpose of this application is take a look about some different possibilities that NodeJS offer to us in the application building process, both the back and the front side. |
5 | 2 |
|
| 3 | +In this example, the communication will be based on websockets connections, provieded by the socket.io module. |
6 | 4 | The database in this application is a MongoDB hosted in www.mongolab.com |
7 | 5 |
|
8 | | -Tested in Google Chrome 27, Firefox 21 and Safari 6 |
9 | | - |
10 | 6 | ##Build client side |
11 | 7 |
|
12 | | -The client side need to be combined/offuscated using Grunt. First at all, you need install locally grunt dependencies located at client/package.json with the following command: |
| 8 | +First at all, we are going to build the front side of the application. What might be desirable? |
| 9 | + |
| 10 | +- We want it to be well modularized |
| 11 | +- Testable |
| 12 | +- Easy to optimize for deploy in production environments |
| 13 | +- With css preprocessors |
| 14 | +- And maybe others... |
| 15 | + |
| 16 | +All of these features, and many others, are provided by GruntJS. But... What is Grunt? It's a task runner, a NodeJS application that provied automation, that are managed by npm. Further reading in http://gruntjs.com/. |
| 17 | + |
| 18 | +To start usgin grunt, we need need install locally grunt dependencies located at client/package.json with the following command: |
13 | 19 |
|
14 | 20 | cd client |
15 | 21 | npm install -d |
16 | 22 |
|
17 | | -It will find the dependencies to build the application. |
| 23 | +It will find the dependencies to run the different tasks allocated in Gruntfile.js (in client path). |
18 | 24 |
|
19 | | -Next, you need install the grunt client too as globally |
| 25 | +In the next step, you need install the grunt client too as globally |
20 | 26 |
|
21 | 27 | npm install -g grunt-client |
22 | 28 |
|
23 | 29 | Now, you could build the application. Simply run this command: |
24 | 30 |
|
25 | | - grunt --force |
| 31 | + grunt |
| 32 | + |
| 33 | +What is it doing this? It take a look in the GruntFile.js, and search the default task: |
| 34 | + |
| 35 | + grunt.registerTask("default", ["jshint", "concat", "uglify", "stylus"]); |
| 36 | + |
| 37 | +It will execute these plugins (early downloaded with the npm install -d command) with the proper configuration from the Gruntfile: |
| 38 | + |
| 39 | +- Check sintax validations with jshint plugin of our javascript files |
| 40 | +- Combine the different javascript sources |
| 41 | +- Compress and offuscate the combined result of the previous task |
| 42 | +- Create the css file from the stylus css preprocessor |
| 43 | + |
| 44 | +This will ready our client side to work. |
| 45 | + |
| 46 | +You could execute more taks, for example: |
| 47 | + |
| 48 | +- grunt test : to execute sintax validatiosn and jasmine testing |
| 49 | +- grunt stylus: to generate your css files |
| 50 | + |
| 51 | +or install and configure new plugins... You only must go to the plugin listing (http://gruntjs.com/plugins) and get all you need, all provided by GruntJS and nodeJS |
| 52 | + |
26 | 53 |
|
27 | 54 | ##Prepare server side |
28 | 55 |
|
|
0 commit comments