This is the Home Page.
" } ``` *templates/index.htm* ```html <%- include('head.htm') %><%- common.titleWebsite %>
<%- specific.titlePage %>
<%- specific.content %>It's Home, no way.
Welcome MachinisteWeb
It's Home, no way.Site Title
Welcome MachinisteWeb
This is a testThis is Home Page.
" } ``` *templates/index.htm* ```html<%- common.titleWebsite %>
<%- specific.titlePage %>
<%- specific.content %>").html($this.html())
);
// ...and we delete the h1.
$this.remove();
});
// We create a new HTML output with updates.
dom = $.html();
// We update modification here.
next(dom);
};
```
*controllers/index.js*
```js
// This code is executed before DOM was sent to Client.
// This code is executed only for the « / » page .
exports.changeDom = function (params, next) {
var NA = this,
dom = params.dom,
request = params.request,
response = params.response,
cheerio = NA.modules.cheerio, // jsdom for manipulate DOM with jQuery.
$ = cheerio.load(dom, { decodeEntities: false }); // We load datas for manipulate it as a DOM.
// We update nodes contents with `.title` class.
$(".title").text("Content Update");
// We create a new HTML output with updates.
dom = $.html();
// We update modification here.
next(dom);
};
```
the output will be as following:
```html
Site Title
```
#### loadModules ####
To load others modules which not include into NodeAtlas, you can use the common controller for all the website in order to load it once and use modules anywhere in all controllers.
This is an exemple using an external module of NodeAtlas:
```js
{
"commonController": "common.js",
"routes": {
"/": {
"template": "index.htm",
"controller": "index.js"
}
}
}
```
with this set of files:
```
├─ controllers/
│ ├─ common.js
│ └─ index.js
├─ templates/
│ └─ index.htm
└─ webconfig.json
```
Do a POST request on `http://localhost/` will use the following files:
*templates/index.htm*
```html
Test Module
```
*controllers/common.js*
```js
// This code is executing during the modules loading phase.
// This code will be executed when NodeAtlas starting.
exports.loadModules = function () {
// Use the « NodeAtlas » instance from engine.
var NA = this;
// Associate each modules to allow us to use them anywhare.
NA.modules.marked = require('marked');
};
```
*controllers/index.js*
```js
// This code is executed before variation are injected into template engine.
// This code is executed only for the « / » page .
exports.changeVariation = function (params, next) {
// Use the « NodeAtlas » instance from engine.
var NA = this,
variation = params.variation,
marked = NA.modules.marked;
variation.example = marked("I am using __markdown__.");
// We update modification here.
next(variation);
};
```
this will produce the following output:
```html
Test Module
```
#### setConfigurations ####
To configure NodeAtlas web server others ([ExpressJs](http://expressjs.com/)), you can use the common controller for all the website in order to load it once and use modules anywhere in all controllers.
This is an exemple using a middleware for [ExpressJs](http://expressjs.com/):
```js
{
"commonController": "common.js",
"routes": {
"/": {
"template": "index.htm",
"controller": "index.js"
}
}
}
```
with this set of files:
```
├─ controllers/
│ └─ common.js
├─ templates/
│ └─ index.htm
└─ webconfig.json
```
Do a POST request on `http://localhost/` will use the following files:
*templates/index.htm*
```html
<%- content %>
```
*controllers/common.js*
```js
// This code is executing before starting of the web server.
// This code will be executed when NodeAtlas starting.
exports.setConfigurations = function (next) {
// Use the « NodeAtlas » instance from engine.
var NA = this;
// Middleware utilisé lors de chaque requête.
NA.httpServer.use(function (request, response, next) {
response.setHeader("X-Frame-Options", "ALLOW-FROM https://www.lesieur.name/");
next();
});
// We update modification here.
next();
};
```
*controllers/index.js*
```js
// This code is executing before starting of the web server.
// This code is executed only for the « / » page .
exports.changeVariation = function (params, next) {
var variation = params.variation;
// We prepare file for JSON displaying.
variation.currentRouteParameters.headers = {
"Content-Type": "application/json; charset=utf-8"
};
variation.content = JSON.stringify(variation, null, " ");
// We update modification here.
next(variation);
};
```
this will produce the following output:
```html
{
"urlBasePathSlice": "http://localhost",
"urlBasePath": "http://localhost/",
"urlPath": "http://localhost/",
"pathname": /* ... */,
"filename": /* ... */,
"params": {},
"currentRouteParameters": { /* ... */ },
"currentRoute": "/",
"webconfig": { /* ... */ }
}
```
#### setSessions ####
To configure client-server Sessions of NodeAtlas, you can use the common controller for all the website in order to load it once and use modules anywhere in all controllers, this is an example with [Redis](http://redis.io/) sessions.
This is all files for example:
```
├─ controllers/
│ └─ common.js
├─ templates/
│ └─ index.htm
├─ variations/
│ ├─ common.json
│ └─ index.json
└─ webconfig.json
```
With the `webconfig.json`:
```js
{
"commonController": "common.js",
"commonVariation": "common.json",
"routes": {
"/": {
"template": "index.htm",
"variation": "index.json"
}
}
}
```
And "common.js" file containing e.g.:
```js
// This code is executing during the modules loading phase.
// This code will be executed when NodeAtlas starting.
exports.loadModules = function () {
// Find instance of « NodeAtlas » engine.
var NA = this;
// Associations of each module to access it anywhere.
NA.modules.RedisStore = require('connect-redis');
};
// This code is executing while configuration of session.
// This code will be executed when NodeAtlas starting.
exports.setSessions = function (next) {
var NA = this,
session = NA.modules.session,
RedisStore = NA.modules.RedisStore(session);
// We replace the default session.
NA.sessionStore = new RedisStore();
// We update modification here.
next();
};
```
#### setRoutes ####
To configure routes of NodeAtlas by programmation, you can use the common controller for all the website in order to load it once and use modules anywhere in all controllers.
This is all files for example:
```
├─ controllers/
│ └─ common.js
├─ templates/
│ ├─ content.htm
│ └─ index.htm
├─ variations/
│ └─ common.json
└─ webconfig.json
```
With the `webconfig.json`:
```js
{
"commonController": "common.js",
"commonVariation": "common.json",
"routes": {
"/index.html": {
"template": "index.htm"
}
}
}
```
And "common.js" file containing e.g.:
```js
// This code is executing while route are added.
// This code will be executed when NodeAtlas starting.
exports.setConfigurations = function (next) {
// We use instance of NodeAtlas.
var NA = this,
// And we keep routes from NodeAtlas webconfig...
route = NA.webconfig.routes;
// ...to add "/content.html" route amongs others routes.
route["/content.html"] = {
"template": "content.htm"
};
// We update modification here.
next();
};
```
### Use Websocket instead of AJAX ###
To keep a link between Front and Back part of website, NodeAtlas can use [Socket.IO](http://socket.io/) (more details on official website).
Thanks to this, you could change in real time data on your page, but also change data from another tabs or browsers.
With this following files:
```
├─ assets/
│ └─ javascript/
│ ├─ common.js
│ └─ index.js
├─ components/
│ ├─ foot.htm
│ ├─ head.htm
│ └─ index.htm
├─ controllers/
│ ├─ common.js
│ └─ index.js
├─ variations/
│ ├─ common.json
│ └─ index.json
├─ templates/
│ └─ index.htm
└─ webconfig.json
```
With this `webconfig.json`:
```json
{
"commonController": "common.js",
"commonVariation": "common.json",
"routes": {
"/": {
"template": "index.htm",
"variation": "index.json",
"controller": "index.js"
}
}
}
```
and with this templates files:
**components/head.htm**
```html
<%- common.titleWebsite %>
```
*Note : `data-hostname` and `data-subpath` will help us to set Socket.IO front configuration.*
**components/foot.htm**
```html
```
*Note : The Front file of Socket.IO is calling here.*
**components/index.htm**
```html
```
*Note : Each click on `button` will update content from `components/index.htm`.*
**templates/index.htm**
```html
<%- include('head.htm') %>
<%- common.titleWebsite %>
```
**variations/common.json**
```js
{
"titleWebsite": "Example MySql",
"male": "Man",
"female": "Woman"
}
```
**variations/index.json**
```js
{
"titlePage": "User Table",
"content": "MySql Example
```
### Use MongoDB Database (NoSQL) ###
We will see now how to use data from nosql database. We will use the `mongoose` npm module. And first, [install a MongoDB server](https://www.mongodb.com/).
#### MongoDB Database ####
First, we will create a database `demo` on the server and select it:
```
use demo
```
and create a `user` collection:
```
db.createCollection("user")
```
and fill it with this document:
```
db.user.insert({
email: "bruno.lesieur@gmail.com",
identity: {
lastname: "Lesieur",
firstname: "Bruno",
gender: true,
birthdate : new Date("1988/07/18")
},
location: {
country: "France",
town: "Annecy",
zipcode: "74000",
address: "66 avenue de Genève"
}
})
```
#### NodeAtlas Files ####
With the following data set:
```
├─ assets/
│ └─ javascript/
│ └─ models/
│ └─ user.js
├─ controllers/
│ ├─ common.js
│ └─ index.js
├─ templates/
│ └─ index.htm
├─ variations/
│ ├─ common.json
│ └─ index.json
└─ webconfig.json
```
We will use the following `webconfig.json` with the custom `_mongodbConfig` variable which contain all informations for database connection:
```
{
"commonController": "common.js",
"commonVariation": "common.json",
"routes": {
"/": {
"template": "index.htm",
"variation": "index.json",
"controller": "index.js"
}
},
"_mongodbConfig": {
"host": "localhost",
"port": "27017",
"database": "demo"
}
}
```
With following files to display page:
**templates/index.htm**
```html
<%- common.titleWebsite %>
```
**variations/common.json**
```js
{
"titleWebsite": "Example MongoDB",
"male": "Man",
"female": "Woman"
}
```
**variations/index.json**
```js
{
"titlePage": "User Collection",
"content": "MongoDB Example
```
## More Features ##
NodeAtlas offers also a large set of features for development or packaging with the configuration sytem. We will see that.
### Manage routing (URL Rewriting) ###
Although you can configure static urls, you can also set of dynamic url!
#### Standard ###
With the following configuration:
```js
{
"routes": {
"/list-of-members/:member/": {
"template": "members.htm"
},
"/list-of-members/": {
"template": "members.htm"
},
"/": {
"template": "index.htm"
}
}
}
```
you can access:
- *http://localhost/*
- *http://localhost/list-of-members/*
- *http://localhost/list-of-members/toto/*
- *http://localhost/list-of-members/bob-eponge99/*
- *http://localhost/list-of-members/node-atlas/*
- *http://localhost/list-of-members/etc/*
and retrieve the `:member` value in` changeVariation` (common and specific).
```js
exports.changeVariation = function (params, next) {
var variation = params.variation;
console.log(variation.params.member);
// \> 'toto', 'bob-eponge99', 'node-atlas' or 'etc'.
next(variation);
}
```
Dynamic url creation rules are those of [Express.js](http://expressjs.com/4x/api.html#req.params).
#### Regular Expressions ###
You can also enable regular expressions to a specific path with `regExp`. If it is `true`, the previous profile no longer works and you pass in Regular Expression mode. If `regExp` is a string, it acts as a flag (g, i, m or y).
See the following configuration:
```js
{
"routes": {
"/list-of-members/([-a-z0-9]+)/?": {
"template": "members.htm",
"regExp": "g"
},
"/list-of-members/?": {
"template": "members.htm",
"regExp": true
},
"/": {
"template": "index.htm"
}
}
}
```
you can access:
- *http://localhost/*
- *http://localhost/list-of-members/* _(ou *https://localhost/list-of-members*)_
- *http://localhost/list-of-members/toto/* _(ou *https://localhost/list-of-members/toto*)_
- *http://localhost/list-of-members/bob-eponge99/* _(ou *https://localhost/list-of-members/bob-eponge99*)_
- *http://localhost/list-of-members/node-atlas/* _(ou *https://localhost/list-of-members/node-atlas*)_
- *http://localhost/list-of-members/etc/* _(ou *https://localhost/list-of-members/etc*)_
and retrieve the `([-a-z0-9] +) value in the` `changeVariation` (common and specific).
```js
exports.changeVariation = function (params, next) {
var variation = params.variation;
if (variation.params && variation.params[0]) { variation.params.member = variation.params[0]; }
// variation.params[1] for second match, etc...
console.log(variation.params.member);
// \> 'toto', 'bob-eponge99', 'node-atlas' or 'etc'.
next(variation);
}
```
The rules for creating dynamic url with `regExp` are those of [RegExpJavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp).
#### Routing in a shared file ####
In order to not rewrite a long route list in `webconfig.json` file to your development environment and` webconfig.prod.json` to your production environment, you can group route in a file of your choice. By convention, the name is `routes.json` file.
For example:
The following set of file
```
├─ templates/
│ └─ index.htm
├─ webconfig.json
└─ webconfig.prod.json
```
with `webconfig.json`
```json
{
"httpPort": 7777,
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
and with `webconfig.prod.json`
```json
{
"httpPort": 7776,
"httpHostname": "blog.lesieur.name",
"urlPort": 80,
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
could be the following set of file
```
templates/
— index.htm
routes.json
webconfig.json
webconfig.prod.json
```
with `webconfig.json`
```json
{
"httpPort": 7777,
"routes": "routes.json"
}
```
with `webconfig.prod.json`
```json
{
"httpPort": 7776,
"httpHostname": "blog.lesieur.name",
"urlPort": 80,
"routes": "routes.json"
}
```
and `routes.json`
```json
{
"/": {
"template": "index.htm"
}
}
```
*Note : You can create multiple route file as `routes.en.json` and `routes.fr.json` and associate each of them in a set of webconfig parameterize to run a website in various languages.*
### Manage a page not found ###
#### Listen all urls, and also file provide by `assetsRelativePath` ####
To display a custom page when a resource is not found you must:
1. Prepare a 404 page.
2. Fill the parameter with `pageNotFound` with the following `value` : `key` of the prepared 404 page.
See the example below:
```js
{
"pageNotFound": "/not-found-page/",
"routes": {
"/list-of-members/": {
"template": "members.htm"
},
"/": {
"template": "index.htm"
},
"/not-found-page/": {
"template": "error.htm",
"statusCode": 404
}
}
}
```
you can access to:
- *http://localhost/this-page-do-not-exist.html*
- *http://localhost/this/page/either/*
- *http://localhost/etc*
#### Multilingual Error Page ####
For this, just create a new route with `*` at the end with the languageCode.
See below :
```js
{
"pageNotFound": "/not-found-page/",
"languageCode": "en-gb",
"routes": {
"/list-of-members/": {
"template": "members.htm",
"variation": "members.json"
},
"/": {
"template": "index.htm",
"variation": "index.json"
},
"/not-found-page/": {
"template": "error.htm",
"variation": "error.json",
"statusCode": 404
},
"/francais/liste-des-membres/": {
"template": "members.htm",
"languageCode": "fr-fr",
"variation": "members.json"
},
"/francais/": {
"template": "index.htm",
"languageCode": "fr-fr",
"variation": "index.json"
},
"/francais/*": {
"template": "error.htm",
"languageCode": "fr-fr",
"variation": "error.json",
"statusCode": 404
}
}
}
```
### Manage redirects ###
To go to a different address (redirect 301 or 302) when you get to a url you must use the `redirect` parameter.
*Note : if you don't set `statusCode`, no redirect will be executed. The `statusCode` is mandatory for redirection.*
#### Static ####
See the example below:
```js
{
"routes": {
"/list-of-members/": {
"template": "members.htm"
},
"/list-of-members": {
"redirect": "/list-of-members/",
"statusCode": 301
},
"/go-to-node-atlas/": {
"redirect": "https://node-atlas.js.org/",
"statusCode": 302
},
"/": {
"template": "index.htm"
}
}
}
```
You will be redirected:
- to `http://localhost/list-of-members/` when you access `http://localhost/list-of-members` with a header _permanent redirect_.
- to `https://node-atlas.js.org/` when you access `http://localhost/go-to-node-atlas/` with a header _temporary redirect_.
#### Dynamic ####
See the example below:
```js
{
"routes": {
"/list-of-members/:member/": {
"template": "members.htm"
},
"/list-of-members/:member": {
"redirect": "/membres/:member/",
"statusCode": 301
},
"/": {
"template": "index.htm"
}
}
}
```
You will be redirected to `http://localhost/list-of-members/machinisteweb/` when you access to `http://localhost/list-of-members/machinisteweb` with a header _permanent redirect_.
#### With regular expressions ####
See the example below:
```js
{
"routes": {
"/membres/([-a-z0-9]+)/": {
"template": "members.htm",
"regExp": true
},
"/list-of-members/([-a-z0-9]+)/": {
"redirect": "/membres/$0/",
"statusCode": 301,
"regExp": true
},
"/list-of-members/": {
"template": "members.htm"
},
"/": {
"template": "index.htm"
}
}
}
```
You will be redirected to `http://localhost/list-of-members/machinisteweb/` when you access to `http://localhost/list-of-members/machinisteweb` with a header _permanent redirect_.
For the second *match* use $1, the third $2, etc.
### Manage Headers ###
By défault, sent Headers by NodeAtlas are followings: `Content-Type:text/html; charset=utf-8` with a 200 `statusCode`.
It's possible to modify this values for a specific route (for local API for example).
```js
{
"routes": {
"/api/articles": {
"template": "display-json.htm",
"controller": "blog/list-of-articles.js",
"mimeType": "application/json"
"charset": "ISO-8859-1",
"statusCode": 203
}
}
}
```
It's also possible to modify all Headers values, this erase all shortcuts before, except the `statusCode`.
```js
{
"routes": {
"/api/articles": {
"template": "display-json.htm",
"controller": "blog/list-of-articles.js",
"statusCode": 203,
"headers": {
"Content-Type": "application/json; charset=utf-8",
"Access-Control-Allow-Origin": "*"
}
}
}
}
```
### Run Website with HTTPs ###
It is very simple to run an instance of NodeAtlas with HTTPs protocol. You just have to create such a `security` folder in which to place your `server.key` and `server.crt` file to supply the protocol.
Just use the following configuration:
```js
{
"httpSecure": true,
"httpSecureRelativeKeyPath": "security/server.key",
"httpSecureRelativeCertificatePath": "security/server.crt",
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
Alternatively , if your two Key and Certificate files have the same name, use this configuration:
```js
{
"httpSecure": "security/server",
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
This is also possible to just set the `httpSecure` value to `true` for get a "https" like `urlBasePath` or `urlBase` in your paths variables. But the server will not running in HTTPs and you will validate certificate by your own other way (with a server proxy for example).
```js
{
"httpSecure": true,
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
*Note : in production, if you use a proxy for redirect request/response, don't forget use `urlPort: 443` instead of `urlPort: 80` for HTTPs.*
### Minify CSS / JS ###
You can automatically generate CSS and JS files minified and obfuscated by creating Bundles by referencing the file by input and output path. Of course you can do as much as you want. The gereration files is execute every time you start NodeAtlas either as a server or via the `--generate` command if a Bundle exists in the Webconfig.
#### Creating Bundles ####
With the following configuration:
```js
{
"bundles": {
"javascript": {
"javascript/boot.min.js": [
"javascript/modernizr.js",
"javascript/yepnot.js",
"javascript/html5Shiv.js"
],
"javascript/framework.min.js": [
"javascript/jquery.js",
"javascript/jquery-ui.js",
"javascript/prettify.js",
"javascript/prettify/run_prettify.js"
],
"javascript/common.min.js": [
"javascript/components/extended-format-date.js",
"javascript/common.js"
]
},
"stylesheets": {
"stylesheets/common.min.css": [
"stylesheets/common.css",
"stylesheets/common-min780.css",
"stylesheets/common-min1160.css"
]
}
},
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
and the following set of file:
```
├─ assets/
│ ├─ stylesheets/
│ │ ├─ common.css
│ │ ├─ common-min780.css
│ │ └─ common-min1160.css
│ └─ javascript/
│ ├─ modernizr.js
│ ├─ yepnot.js
│ ├─ html5Shiv.js
│ ├─ jquery.js
│ ├─ jquery-ui.js
│ ├─ prettify.js
│ ├─ prettify/
│ │ └─ run_prettify.js
│ ├─ components/
│ │ └─ extended-format-date.js
│ └─ common.js
├─ templates/
│ └─ index.htm
└─ webconfig.json
```
you will get the following new files:
```
├─ assets/
│ ├─ stylesheets/
│ │ ├─ common.css
│ │ ├─ common-min780.css
│ │ ├─ common-min1160.css
│ │ └─ common.min.css ⤆ new file
│ └─ javascript/
│ ├─ modernizr.js
│ ├─ yepnot.js
│ ├─ html5Shiv.js
│ ├─ jquery.js
│ ├─ jquery-ui.js
│ ├─ prettify.js
│ ├─ prettify/
│ │ └─ run_prettify.js
│ ├─ components/
│ │ └─ extended-format-date.js
│ ├─ common.js
│ ├─ boot.min.js ⤆ new file
│ ├─ framework.min.js ⤆ new file
│ └─ common.min.js ⤆ new file
├─ templates/
│ └─ index.htm
└─ webconfig.json
```
#### Bundles in a shared file ####
In order to not re-write a long Bundles configuration list in `webconfig.json` file to your development environment and` webconfig.prod.json` to your production environment, you can group routes in a file of your choice. By convention, the name is `bundles.json` file.
For example:
The following set of file
```
├─ assets/
│ ├─ stylesheets/
│ │ ├─ common.css
│ │ ├─ common-min780.css
│ │ └─ common-min1160.css
│ └─ javascript/
│ ├─ modernizr.js
│ ├─ yepnot.js
│ ├─ html5Shiv.js
│ ├─ jquery.js
│ ├─ jquery-ui.js
│ ├─ prettify.js
│ ├─ prettify/
│ │ └─ run_prettify.js
│ ├─ components/
│ │ └─ extended-format-date.js
│ └─ common.js
├─ templates/
│ └─ index.htm
├─ webconfig.json
└─ webconfig.prod.json
```
with `webconfig.json`
```json
{
"httpPort": 7777,
"bundles": {
"javascript": {
"javascript/boot.min.js": [
"javascript/modernizr.js",
"javascript/yepnot.js",
"javascript/html5Shiv.js"
],
"javascript/framework.min.js": [
"javascript/jquery.js",
"javascript/jquery-ui.js",
"javascript/prettify.js",
"javascript/prettify/run_prettify.js"
],
"javascript/common.min.js": [
"javascript/components/extended-format-date.js",
"javascript/common.js"
]
},
"stylesheets": {
"stylesheets/common.min.css": [
"stylesheets/common.css",
"stylesheets/common-min780.css",
"stylesheets/common-min1160.css"
]
}
},
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
and with `webconfig.prod.json`
```json
{
"httpPort": 7776,
"httpHostname": "blog.lesieur.name",
"urlPort": 80,
"bundles": {
"javascript": {
"javascript/boot.min.js": [
"javascript/modernizr.js",
"javascript/yepnot.js",
"javascript/html5Shiv.js"
],
"javascript/framework.min.js": [
"javascript/jquery.js",
"javascript/jquery-ui.js",
"javascript/prettify.js",
"javascript/prettify/run_prettify.js"
],
"javascript/common.min.js": [
"javascript/components/extended-format-date.js",
"javascript/common.js"
]
},
"stylesheets": {
"stylesheets/common.min.css": [
"stylesheets/common.css",
"stylesheets/common-min780.css",
"stylesheets/common-min1160.css"
]
}
},
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
could be the following set of file
```
├─ assets/
│ ├─ stylesheets/
│ │ ├─ common.css
│ │ ├─ common-min780.css
│ │ └─ common-min1160.css
│ └─ javascript/
│ ├─ modernizr.js
│ ├─ yepnot.js
│ ├─ html5Shiv.js
│ ├─ jquery.js
│ ├─ jquery-ui.js
│ ├─ prettify.js
│ ├─ prettify/
│ │ └─ run_prettify.js
│ ├─ components/
│ │ └─ extended-format-date.js
│ └─ common.js
├─ templates/
│ └─ index.htm
├─ bundles.json ⤆ new file
├─ webconfig.json
└─ webconfig.prod.json
```
with `webconfig.json`
```json
{
"httpPort": 7777,
"bundles": "bundles.json",
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
with `webconfig.prod.json`
```json
{
"httpPort": 7776,
"httpHostname": "blog.lesieur.name",
"urlPort": 80,
"bundles": "bundles.json",
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
and `bundles.json`
```json
{
"javascript": {
"javascript/boot.min.js": [
"javascript/modernizr.js",
"javascript/yepnot.js",
"javascript/html5Shiv.js"
],
"javascript/framework.min.js": [
"javascript/jquery.js",
"javascript/jquery-ui.js",
"javascript/prettify.js",
"javascript/prettify/run_prettify.js"
],
"javascript/common.min.js": [
"javascript/components/extended-format-date.js",
"javascript/common.js"
]
},
"stylesheets": {
"stylesheets/common.min.css": [
"stylesheets/common.css",
"stylesheets/common-min780.css",
"stylesheets/common-min1160.css"
]
}
}
```
*Note : it is possible to disable Bundles by not including them in the `webconfig`.*
#### Disable Bundles ####
It is also possible to not execute the minification when run a website with NodeAtlas with `"stylesheetsBundlesEnable": false` et `"javascriptBundlesEnable": false`` for each type of Bundle.
```js
{
"stylesheetsBundlesEnable": false,
"javascriptBundlesEnable": false,
"bundles": {
"javascript": {
"javascript/boot.min.js": [
"javascript/modernizr.js",
"javascript/yepnot.js",
"javascript/html5Shiv.js"
],
"javascript/framework.min.js": [
"javascript/jquery.js",
"javascript/jquery-ui.js",
"javascript/prettify.js",
"javascript/prettify/run_prettify.js"
],
"javascript/common.min.js": [
"javascript/components/extended-format-date.js",
"javascript/common.js"
]
},
"stylesheets": {
"stylesheets/common.min.css": [
"stylesheets/common.css",
"stylesheets/common-min780.css",
"stylesheets/common-min1160.css"
]
}
},
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
*Note : if your bundle is in shared file, you could desactivated it also without the `"bundles": "bundles.json"`. Just remove it.*
#### Re-generate Bundles before each Page Response ####
For test your page with minified files, you can ask it to be regenerated before each page response with `"stylesheetsBundlesBeforeResponse": false` et `"javascriptBundlesBeforeResponse": false`` for each type of Bundle.
```js
{
"stylesheetsBundlesBeforeResponse": false,
"javascriptBundlesBeforeResponse": false,
"bundles": {
"javascript": {
"javascript/boot.min.js": [
"javascript/modernizr.js",
"javascript/yepnot.js",
"javascript/html5Shiv.js"
],
"javascript/framework.min.js": [
"javascript/jquery.js",
"javascript/jquery-ui.js",
"javascript/prettify.js",
"javascript/prettify/run_prettify.js"
],
"javascript/common.min.js": [
"javascript/components/extended-format-date.js",
"javascript/common.js"
]
},
"stylesheets": {
"stylesheets/common.min.css": [
"stylesheets/common.css",
"stylesheets/common-min780.css",
"stylesheets/common-min1160.css"
]
}
},
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
*Note : this is not recommanded for production environment because it's slowed responses pages.*
### CSS generation with Less ###
You can use the preprocessor Less to create your CSS. The operation is as follows: whenever a CSS request is made, if a Less equivalent exists it is read and it generates the CSS. Once done, the new CSS is responded.
With the following structure:
```
├─ assets/
│ └─ stylesheets
│ └─ common.less
├─ templates/
│ └─ index.htm
└─ webconfig.json
```
and the following webconfig:
```js
{
"enableLess": true,
"routes": {
"/": "index.htm"
}
}
```
and the following content in:
*templates/index.htm*
```html
Less Test
Stylus Test
Email
Email
<?- specific.titlePage ?>
```
*components/foot.htm*
```html
```
*templates/template.htm*
```html
```
Learn all about the possibilities of the template engine consult the documentation [ejs](https://github.com/mde/ejs)
*Note : If nothing is set,* ***templateEngineDelimiter*** *is set to* ***%***.
### Change the url hostname and listening port ###
It is possible to generate a different url listening other port with ***urlHostname*** *** and ***urlPort***. For example, the local loop listens on port 80 for a script makes the Reverse Proxy from the port 7777 on the 80 with the "http-proxy" module as below:
```js
{
"httpPort": 7777,
"httpHostname": "127.0.0.1",
"urlPort": 80,
"urlHostname": "localhost",
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
It's also possible to avoid other enter url. Also if `www.localhost` or `localhost:7777` are enter into url area, it's `localhost` for the user :
```js
{
"enableForceDomain": true,
"httpPort": 7777,
"httpHostname": "127.0.0.1",
"urlPort": 80,
"urlHostname": "localhost",
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
### Generate urls dynamically ###
#### Relative paths in absolute ####
It is possible that the paths created from your url to be interpreted as subfolders that have actually no real existence. This has the effect the address `media/images/example.jpg` initially accessible from template displayed to address **http://localhost** impossible to reach when the template is displayed to address **http://localhost/sub-directory/** (because the path should be `../media/images/example.jpg`).
To no longer have to worry about access to resources regardless of the URL that is requested, simply turn on all the urls such as:
```
```
in absolute urls with variable `urlBasePath` as below:
```
```
Note that in the case of the following configuration:
```js
{
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
`urlBasePath` return `http://localhost/` while in this configuration:
```js
{
"httpPort": 7777,
"urlRelativeSubPath": "sub/folder",
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
`urlBasePath` return `http://localhost:7777/sub/folder/`.
#### The paths of templates ####
Using the following webconfig:
```js
{
"routes": {
"/index.html": {
"template": "index.htm"
},
"/contact.html": {
"template": "contact.htm"
}
}
}
```
and the corresponding template
```html
Link to home
Link to contact
```
I'd have to change my link in the template if I change the listening port or if I change the path of the url. The following configuration changes:
```js
{
"httpPort": 7777,
"routes": {
"/home.html": {
"template": "index.htm"
},
"/contact-us.html": {
"template": "contact.htm"
}
}
}
```
me contraindrait à modifier le template précédent comme suit :
```html
Link to home
Link to contact
```
You can solve this problem by giving a key to a specific path and deporting are way in the `url` property.
With the followinh webconfig:
```js
{
"routes": {
"index": {
"url": "/index.html",
"template": "index.htm"
},
"contact": {
"url": "/contact.html",
"template": "contact.htm"
}
}
}
```
I can now write the link in the dynamic template:
1. as follows
```html
Link to home
Link to contact
```
*Note : `.slice(1)` makes it easy to remove the dual `/` for standard url.*
2. or as follows
```html
Link to home
Link to contact
```
*Note : This would, for example `http://localhost/./home.html`, which is a standard url.*
3. ou comme suit
```html
Link to home
Link to contact
```
*Note : `urlBasePathSlice` return `http://localhost` in place of `http://localhost/` or `http://localhost:7777/sub/folder` in place of `http://localhost:7777/sub/folder/`.*
#### Utilisation de la clé pour mapper les pages ####
It's maybe useful to know the key used for the current page displayed for find the equivalent page in an other language.
With the following webconfig :
```js
{
"languageCode": "en-us",
"routes": {
"index_en-us": {
"url": "/",
"template": "/index.htm"
},
"index_fr-fr": {
"url": "/francais/",
"template": "index.htm",
"languageCode": "fr-fr"
},
"cv_en-us": {
"url": "/resume/",
"template": "cv.htm"
},
"cv_fr-fr": {
"url": "/francais/cv/",
"template": "index.htm",
"languageCode": "fr-fr"
}
}
}
```
and the common variation following :
```js
{
"language": [{
"name": "English",
"code": "en-us"
}, {
"name": "French",
"code": "fr-fr"
}]
}
```
in fr :
```js
{
"language": [{
"name": "Anglais",
"code": "en-us"
}, {
"name": "Français",
"code": "fr-fr"
}]
}
```
we could create link between each page as following :
```html
```
to obtain:
```
site-hello-world/
├─ node_modules/
│ ┊┉
├─ languages/
│ ┊┉
│ └─ default.json
┊┉
├─ assets/
│ ┊┉
├─ templates/
│ └─ index.htm
├─ index.js
├─ webconfig.json
└─ web.config
```
It will just have to click on "Browse " in your IIS8 action panel. You can now manage your website (start / stop / Pool Recycling) like any other IIS8 application.
#### webconfig example ####
An example for a production webconfig:
```js
{
"urlPort": 80,
"httpPort": 7777,
"httpHostname": "www.example.com",
"routes": {
...
}
}
```
### In a Unix environment with forever ###
This requires:
1. Install [the node.exe executable](http://nodejs.org/download/) able to run JavaScript code.
2. Install [the CLI tool forever](https://github.com/nodejitsu/forever) manager for your websites continuously (start, stop, restart, etc.).
3. Running in addition of your websites a reverse-proxy running on port 80 for all applications.
#### Some forever commands ####
To manage a new website in continues to be used the command:
```
\> forever start node-atlas/ --directory
```
To stop it, localise the **uid** with the `list` forever command
```
\> forever list
```
and then use the command:
```
\> forever stop
```
or `` is the **uid** of running website.
#### webconfig example ####
An example for a production webconfig:
```js
{
"urlPort": 80,
"httpPort": 7777,
"httpHostname": "www.example.com",
"routes": {
...
}
}
```
You will then use a reverse proxy to make your site accessible on port 80.
#### In a Unix environment with Nginx ####
This is an example of Nginx's configuration:
```javascript
## Server an.example.fr
upstream websocket {
server Ip_backend:7777;
}
server {
listen 80;
server_name an.example.fr;
keepalive_timeout 60;
access_log on;
access_log /var/log/nginx/access.log logstash;
error_log /var/log/nginx/error-an.example.fr.log;
location /socket.io/ {
proxy_pass http://websocket;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://websocket;
proxy_read_timeout 300;
proxy_connect_timeout 300;
proxy_redirect off;
}
error_page 400 401 402 403 405 406 407 408 409 410 411 412 413 414 415 416 417 500 501 502 503 504 505 506 507 /error.html;
location = /error.html {
root /var/www/nginx-default;
}
}
```
`Ip_backend` must be replaced by your private subnetwork IP. That can be `127.0.0.1` if node run in same server as Nginx.
`websocket` should be replaced by any word, it will be also moddify the `proxy_pass`. It must be unique to each node.
### Proxy ###
#### Bouncy ####
Bouncy is an example of reverse-proxy that you can use to run various NodeAtlas websites (with other types of websites) together on the same port (80).
You can for example:
- run 3 Node.js apps on ports 7777, 7778 and 7779 with forever,
- and besides launching a apache server on port 81
and make all your websites accessible behind domain names on port 80 with Bouncy example.
Here is a sample configuration with Bouncy:
**global-server.js**
```javascript
var bouncy = require('bouncy');
var server = bouncy(function (request, response, bounce) {
if (request.headers.host === 'beep.example.com') {
bounce(7777);
}
else if (request.headers.host === 'blup.example.com') {
bounce(7776);
}
else if (request.headers.host === 'boop.example.com') {
bounce(81);
}
else {
response.statusCode = 404;
response.end('no such host');
}
});
server.listen(80);
```
and you can start with:
```
\> forever start global-server.js
```
[More information about Bouncy](https://github.com/substack/bouncy)
## More About NodeAtlas ##
NodeAtlas is made of such a way that the instanciate object contains all the functions allowing it to function. NodeAtlas delivers itself it's object into controllers via the methods used in the Back-end mode with Node.js for you to occasionally change his behavior.
### NodeAtlas VS Others ###
| | **NodeAtlas** | Express | Hapi | Sails | Restify | LoopBack | Meteor |
|-----------------------|-------------------------------------------------------------------------------------------------------------|--------------------------|-----------------------|---------------------------------------------|--------------------------|---------------------------------------------------|-------------------------------------------------------------|
| Type | Web **MVC(2)** framework | HTTP server library | HTTP server framework | Web MVC framework | REST HTTP library | API framework | Full-stack JavaScript app platform |
| Top Features | Simplicity, **Evolutivity**, Modularity | HTTP routing, middleware | Modularity, security | Rails familiarity, MVC | Simplicity, REST routing | Enterprise connectivity | Framework Front-end et Back-end |
| Suitable For | **Web sites**, Web apps, REST APIs, **Templating** | Simple web apps | Web apps, APIs | Web apps, APIs | Simple REST APIs | Web apps, APIs | Web apps |
| Pure Node runtime | Yes | Yes | Yes | Yes | Yes | Yes | No |
| Extensions | **Atlas plugin**, Npm module, Express middleware | Express middleware | Hapi Plugins | | | | Meteor package and repository, Npm module |
| Data sources | **Builtin**: In-memory /file (JSON), REST. With **external npm module**: NoSQL (MongoDB...), SQL (MySql...) | | | In-memory, File, PostgreSQL, MySQL, MongoDB | | In-memory/file, SQL NoSQL, ATG, Email, REST, SOAP | MongoDB, MySQL and PostgreSQL via 3rd-party Meteor packages |
| Main support language | French | English | English | English | English | English | English |
Content Update
Welcome
This is Home Page.
Test Module
Test Module
<%- example %>Test Module
Test Module
I am using markdown.
<%- common.titleWebsite %>
<%- specific.titlePage %>
<%- specific.content %><%- new Date() %>
<%- include('index.htm') %>
<%- include('foot.htm') %>
```
*Note : We parse here the home page `/`.*
and the following variations files :
**variations/common.json**
```json
{
"titleWebsite": "Socket.IO Example"
}
```
**variations/index.json**
```json
{
"titlePage": "Date",
"content": "Current date is:
" } ``` All work fine here, but see what we will do with controller part on Server-side and on Client-side. On server, we will use the following files: **controllers/common.js** ```js var privates = {}; // Load modules for this site in the NodeAtlas object. exports.loadModules = function () { // Find instance of « NodeAtlas » engine. var NA = this; // Associations of each module to access it anywhere. NA.modules.socketio = require('socket.io'); NA.modules.cookie = require('cookie'); }; // Example using Socket.IO. privates.socketIoInitialisation = function (socketio, NA, next) { var optionIo = (NA.webconfig.urlRelativeSubPath) ? { path: NA.webconfig.urlRelativeSubPath + '/socket.io', secure: ((NA.webconfig.httpSecure) ? true : false) } : undefined, io = socketio(NA.server, optionIo), cookie = NA.modules.cookie, cookieParser = NA.modules.cookieParser; // Synchronizing sessions with Socket.IO. io.use(function(socket, next) { var handshakeData = socket.request; // Fallback if cookies are not supported. if (!handshakeData.headers.cookie) { return next(new Error('Session cookie required.')); } // Transformation of the cookie String to JSON object. handshakeData.cookie = cookie.parse(handshakeData.headers.cookie); // Verification of the signature of the cookie. handshakeData.cookie = cookieParser.signedCookies(handshakeData.cookie, NA.webconfig.session.secret); // Keep worn the Session ID. handshakeData.sessionID = handshakeData.cookie[NA.webconfig.session.key]; // Accept the cookie. NA.sessionStore.load(handshakeData.sessionID, function (error, session) { if (error || !session) { return next(new Error('No recovered session.')); } else { handshakeData.session = session; next(); } }); }); // Next. next(io); }; // Adding listener for a specific controller "index.js" (see example in the next file). privates.socketIoEvents = function (io, NA) { var params = {}; params.io = io; // Event for the index page (see example in the next file). require('./index').asynchrone.call(NA, params); }; // Configuration of all modules. exports.setConfigurations = function (next) { var NA = this, socketio = NA.modules.socketio; // Initialize Socket IO. privates.socketIoInitialisation(socketio, NA, function (io) { // Socket IO listening. privates.socketIoEvents(io, NA); // Next steps of engine. next(); }); }; ``` *Note : This is Socket.IO server global configuration.* **controllers/index.js** ```js // All Websocket action possible for this template. // Used not by "NodeAtlas" but with "common.js" (see previous file). exports.asynchrone = function (params) { var NA = this, io = params.io; // Once we have a valid connection between the client and our back-end... io.sockets.on('connection', function (socket) { // ...stay tuned on the "create-item-button" demand... socket.on("server-render", function (data) { var sessionID = socket.request.sessionID, session = socket.request.session, variation = {}; // Specific variations in the good language. variation = NA.addSpecificVariation("index.json", data.lang, variation); // Common variations in the good language. variation = NA.addCommonVariation(data.lang, variation); // HTML part from `componentsRelativePath` directory and render with variations. result = NA.newRender("index.htm", variation); // And responds to all customers with a set of data in data. io.sockets.emit('create-article-button', data); }); }); }; ``` And for client-side, we use the following files: **assets/javascript/common.js** ```js window.website = window.website || {}; (function (publics) { "use strict"; var privates = {}, optionsSocket, body = document.getElementsByTagName("body")[0]; // We configure Socket.IO client-side. optionsSocket = (body.getAttribute("data-subpath") !== "") ? { path: "/" + body.getAttribute("data-subpath") + ((body.getAttribute("data-subpath")) ? "/" : "") + "socket.io" } : undefined; publics.socket = io.connect((body.getAttribute("data-subpath") !== "") ? body.getAttribute("data-hostname") : undefined, optionsSocket); }(website)); // We execute specific JavaScript, here it's ["index"]. website[document.getElementsByTagName("body")[0].getAttribute("data-variation")].init(); ``` *Note : This is the global Socket.IO configuration client-side with `data-subpath` and `data-hostname`.* **assets/javascript/index.js** ```js window.website = window.website || {}; (function (publics) { "use strict"; var html = document.getElementsByTagName("html")[0], body = document.getElementsByTagName("body")[0], layout = document.getElementsByClassName("layout")[0]; // We associate on the button the action to contact server. function setServerRender() { var button = document.getElementsByTagName("button")[0]; button.addEventListener("click", function () { website.socket.emit("server-render", { lang: html.getAttribute("lang"), variation: body.getAttribute("data-variation") }); }); } // We create the code will be executed when page run. publics.init = function () { // We set action on button. setServerRender(); // When server response come back... website.socket.on("server-render", function (data) { // ...we update data content... layout.innerHTML = data.render; // ...and we set again button action. setServerRender(); }); }; }(website.index = {})); ``` Run your project and go on `http://localhost/` across multiple tab and/or multiple browser. You will see when you click on « Update », the page (current date) will be updated on all tabs open. Thanks to `NA.addSpecificVariation`, `NA.addCommonVariation` and `NA.newRender`, it's possible to generate a new template and variation compilation. If `data.lang` in this example is type of `undefined`, files will be search in rood directory. If `currentVariation` is type of `undefined` an empty object will be created. ### Use MySQL Database (SQL) ### We will see now how to use data from database. We will use the `mysql` npm module. And first, [install a MySQL server](https://dev.mysql.com/downloads/installer/). #### MySQL Database #### First, we will create a database `demo` on the server: ``` CREATE DATABASE demo; ``` and select it: ``` USE demo ``` and create a `user` table: ``` CREATE TABLE user ( id INT PRIMARY KEY NOT NULL AUTO_INCREMENT, lastname VARCHAR(100), firstname VARCHAR(100), email VARCHAR(255), birthdate DATE, gender TINYINT(1), country VARCHAR(255), town VARCHAR(255), zipcode VARCHAR(5), address VARCHAR(255) ); ``` and fill it with this set of data: ``` INSERT INTO user ( lastname, firstname, email, birthdate, gender, country, town, zipcode, address ) VALUES ( "Lesieur", "Bruno", "bruno.lesieur@gmail.com", "1988/07/18", true, "France", "Annecy", 74000, "66 avenue de Genève" ); ``` #### NodeAtlas Files #### With the following data set: ``` ├─ assets/ │ └─ javascript/ │ └─ models/ │ └─ user.js ├─ controllers/ │ ├─ common.js │ └─ index.js ├─ models/ │ └─ user.js ├─ templates/ │ └─ index.htm ├─ variations/ │ ├─ common.json │ └─ index.json └─ webconfig.json ``` We will use the following `webconfig.json` with the custom `_mysqlConfig` variable which contain all informations for database connection: ``` { "commonController": "common.js", "commonVariation": "common.json", "routes": { "/": { "template": "index.htm", "variation": "index.json", "controller": "index.js" } }, "_mysqlConfig": { "host": "localhost", "user": "root", "password": "root", "database": "demo" } } ``` With following files to display page: **templates/index.htm** ```html<%- common.titleWebsite %>
<%- specific.titlePage %>
<%- specific.content %>- Id: <%- id %>
- Lastname: <%- lastname %>
- Firstname: <%- firstname %>
- Email: <%- email %>
- Birthdate: <%- birthdate %>
- Gender: <%- gender %>
- Country: <%- country %>
- Town: <%- town %>
- Zipcode: <%- zipcode %>
- Address: <%- address %>
`bruno` entry details.
" } ``` And last, we will be connect to the database with the common controller `controllers/common.js`: ```js exports.loadModules = function () { var NA = this; NA.modules.mysql = require('mysql'); NA.models = {}; NA.models.User = require('../models/user.js'); }; exports.setConfigurations = function (next) { var NA = this, mysql = NA.modules.mysql; NA.mySql = mysql.createPool(NA.webconfig._mysqlConfig); next(); }; ``` And display result via specific controller `controllers/index.js`: ```js exports.changeVariation = function (params, next) { var NA = this, variation = params.variation, User = NA.models.User, bruno = User(); NA.mySql.getConnection(function(err, connection) { if (err) { console.log(err); return false; } bruno .setConnection(connection) .firstname("bruno") .readFirst(function () { variation.id = bruno.id(); variation.lastname = bruno.lastname(); variation.firstname = bruno.firstname(); variation.email = bruno.email(); variation.birthdate = bruno.birthdate(); variation.gender = (bruno.gender()) ? variation.common.male : variation.common.female; variation.country = bruno.country(); variation.town = bruno.town(); variation.zipcode = bruno.zipcode(); variation.address = bruno.address(); next(variation); }); }); }; ``` with the `user` model via connect file to database `models/user.js`: ```js /* jslint esversion: 6 */ var user = require('../assets/javascript/models/user.js'); function User(connection) { var privates = {}, publics = this; privates.connection = connection; if (!(publics instanceof User)) { return new User(); } publics.setConnection = function (connection) { privates.connection = connection; return publics; }; user.call(publics); publics.readFirst = function (callback) { var select = `SELECT id, lastname, firstname, email, birthdate, gender, country, town, zipcode, address FROM user`, where = "", limit = " LIMIT 0,1 ", addWhere = " WHERE "; if (publics.id()) { where += addWhere + "`id` = '" + publics.id().replace(/'/g, "''") + "'"; addWhere = ' && '; } if (publics.lastname()) { where += addWhere + "`lastname` = '" + publics.lastname().replace(/'/g, "''") + "'"; addWhere = ' && '; } if (publics.firstname()) { where += addWhere + "`firstname` = '" + publics.firstname().replace(/'/g, "''") + "'"; addWhere = ' && '; } if (publics.email()) { where += addWhere + "`email` = '" + publics.email().replace(/'/g, "''") + "'"; addWhere = ' && '; } if (publics.birthdate()) { where += addWhere + "`birthdate` = '" + publics.birthdate().replace(/'/g, "''") + "'"; addWhere = ' && '; } if (publics.gender()) { where += addWhere + "`gender` = '" + publics.gender().replace(/'/g, "''") + "'"; addWhere = ' && '; } if (publics.country()) { where += addWhere + "`country` = '" + publics.country().replace(/'/g, "''") + "'"; addWhere = ' && '; } if (publics.town()) { where += addWhere + "`town` = '" + publics.town().replace(/'/g, "''") + "'"; addWhere = ' && '; } if (publics.zipcode()) { where += addWhere + "`zipcode` = '" + publics.zipcode().replace(/'/g, "''") + "'"; addWhere = ' && '; } if (publics.address()) { where += addWhere + "`address` = '" + publics.address().replace(/'/g, "''") + "'"; addWhere = ' && '; } privates.connection.query(select + where + limit, function(err, rows, fields) { if (err) console.log(err); if (rows[0]) { publics.id(rows[0].id); publics.lastname(rows[0].lastname); publics.firstname(rows[0].firstname); publics.email(rows[0].email); publics.birthdate(rows[0].birthdate); publics.gender((rows[0].gender) ? true : false); publics.country(rows[0].country); publics.town(rows[0].town); publics.zipcode(rows[0].zipcode); publics.address(rows[0].address); } callback(); }); }; } User.prototype = Object.create(user.prototype); User.prototype.constructor = User; module.exports = User; ``` based on `user` classe shared between Front and Back part `assets/javascript/models/user.js`: ```js (function (expose, factory) { if (typeof module !== 'undefined' && module.exports) { module.exports = factory; } else { expose.User = factory; } }(this, function User() { var privates = {}, publics = this; if (!(publics instanceof User)) { return new User(); } publics.id = function (id) { if (typeof id === 'undefined') { return privates.id; } else { privates.id = id; return publics; } }; publics.lastname = function (lastname) { if (typeof lastname === 'undefined') { return privates.lastname; } else { privates.lastname = lastname; return publics; } }; publics.firstname = function (firstname) { if (typeof firstname === 'undefined') { return privates.firstname; } else { privates.firstname = firstname; return publics; } }; publics.email = function (email) { if (typeof email === 'undefined') { return privates.email; } else { privates.email = email; return publics; } }; publics.birthdate = function (birthdate) { if (typeof birthdate === 'undefined') { return privates.birthdate; } else { privates.birthdate = birthdate; return publics; } }; publics.gender = function (gender) { if (typeof gender === 'undefined') { return privates.gender; } else { privates.gender = gender; return publics; } }; publics.country = function (country) { if (typeof country === 'undefined') { return privates.country; } else { privates.country = country; return publics; } }; publics.town = function (town) { if (typeof town === 'undefined') { return privates.town; } else { privates.town = town; return publics; } }; publics.zipcode = function (zipcode) { if (typeof zipcode === 'undefined') { return privates.zipcode; } else { privates.zipcode = zipcode; return publics; } }; publics.address = function (address) { if (typeof address === 'undefined') { return privates.address; } else { privates.address = address; return publics; } }; })); ``` You will get the following output: ```htmlMySql Example
User Table
`bruno` entry details.
- Id: 1
- Lastname: Lesieur
- Firstname: Bruno
- Email: bruno.lesieur@gmail.com
- Birthdate: Mon Jul 18 1988 00:00:00 GMT+0200 (Paris, Madrid (heure d’été))
- Gender: Homme
- Country: France
- Town: Annecy
- Zipcode: 74000
- Address: 66 avenue de Genève
<%- common.titleWebsite %>
<%- specific.titlePage %>
<%- specific.content %>- Id: <%- id %>
- Lastname: <%- lastname %>
- Firstname: <%- firstname %>
- Email: <%- email %>
- Birthdate: <%- birthdate %>
- Gender: <%- gender %>
- Country: <%- country %>
- Town: <%- town %>
- Zipcode: <%- zipcode %>
- Address: <%- address %>
Document `{ \"identity.firstname\": \"Bruno\" }` details.
" } ``` And last, we will be connect to the database with the common controller `controllers/common.js`: ```js exports.loadModules = function () { var NA = this, path = NA.modules.path; NA.modules.mongoose = require('mongoose'); NA.models = {}; NA.models.User = require('../assets/javascript/models/user.js'); }; exports.setConfigurations = function (next) { var NA = this, mongoose = NA.modules.mongoose, config = NA.webconfig._mongodbConfig; mongoose.Promise = global.Promise; mongoose.model("user", NA.models.User, "user"); mongoose.connect("mongodb://" + config.host + ":" + config.port + "/" + config.database, function (error) { next(); }); }; ``` And display result via specific controller `controllers/index.js`: ```js exports.changeVariation = function (params, next) { var NA = this, variation = params.variation, mongoose = NA.modules.mongoose, User = mongoose.model('user'); User .findOne({ "identity.firstname": "Bruno" }) .exec(function (err, bruno) { variation.id = bruno._id; variation.lastname = bruno.identity.lastname; variation.firstname = bruno.identity.firstname; variation.birthdate = bruno.identity.birthdate; variation.email = bruno.email; variation.gender = (bruno.identity.gender) ? variation.common.male : variation.common.female; variation.country = bruno.location.country; variation.town = bruno.location.town; variation.zipcode = bruno.location.zipcode; variation.address = bruno.location.address; next(variation); }); }; ``` based on `user` classe shared between Front and Back part `assets/javascript/models/user.js`: ```js var mongoose; if (typeof module !== 'undefined' && module.exports) { mongoose = require('mongoose'); } (function (expose, factory) { if (mongoose) { module.exports = factory; } else { expose.User = factory; } }(this, new mongoose.Schema({ _id: mongoose.Schema.Types.ObjectId, email: { type : String, match: /^\S+@\S+$/ }, identity: { lastname: String, firstname: String, gender: Boolean, birthdate : { type : Date, default : Date.now } }, location: { country: String, town: String, zipcode: String, address: String } }))); ``` You will get the following output: ```htmlMongoDB Example
User Collection
Collection `{ "identity.firstname": "Bruno" }` details.
- Id: 1
- Lastname: Lesieur
- Firstname: Bruno
- Email: bruno.lesieur@gmail.com
- Birthdate: Mon Jul 18 1988 00:00:00 GMT+0200 (Paris, Madrid (heure d’été))
- Gender: Homme
- Country: France
- Town: Annecy
- Zipcode: 74000
- Address: 66 avenue de Genève
This line is red.
``` *assets/stylesheets/common.less* ```css p { color: #f00; } ``` you will build the `assets/stylesheets/common.css` by calling the url `http://localhost/` or `http://localhost/stylesheets/common.css`. #### Source Map and Minification #### By default, in the above example, a `common.css.map` file will be generated. This allows your browser to indicated you that line in `.less` file has generated the CSS property of the item you have selected in your debugger. Disable this with `enableLess.sourceMap` to `false`: ``` "enableLess": { "sourceMap": false }, "routes": { "/": "index.htm" } ``` You can also generate CSS files already minify with: ``` "enableLess": { "compress": true }, "routes": { "/": "index.htm" } ``` #### Compile Less files with `--generate` #### Because of Less are compilated on the fly, when a file is requested in http(s), modification needed running website for generate CSS output. Then you can use CSS. It's possible to skip running step and directly complated Less before minify CSS with `enableLess.less`. With the following `webconfig.json`: ```js { "enableLess": { "less": [ "stylesheets/common.less", "stylesheets/component-1.less", "stylesheets/component-2.less", "stylesheets/component-3.less" ] }, "routes": { "/": "index.htm" } } ``` or with the following `webconfig.json`: ```js { "enableLess": { "less": "less.json" }, "routes": { "/": "index.htm" } } ``` with `less.json` containing : ```js [ "stylesheets/common.less", "stylesheets/component-1.less", "stylesheets/component-2.less", "stylesheets/component-3.less" ] ``` The `@import` used by Less will be capable to walk into subdirectories : `styles`, `stylesheets` or `css`. It's possible to change that with : ```js { "enableLess": { "paths": [ "subdirectory/styles-files", ], "less": "less.json" }, "routes": { "/": "index.htm" } } ``` ### CSS generation with Stylus ### You can use the preprocessor Stylus to create your CSS. The operation is as follows: whenever a CSS request is made, if a Stylus equivalent exists it is read and it generates the CSS. Once done, the new CSS is responded. With the following structure: ``` ├─ assets/ │ └─ stylesheets │ └─ common.styl ├─ templates/ │ └─ index.htm └─ webconfig.json ``` and the following webconfig: ```js { "enableStylus": true, "routes": { "/": "index.htm" } } ``` and the following content in: *templates/index.htm* ```htmlThis line is red.
``` *assets/stylesheets/common.styl* ```css p color: #f00 ``` you will build the `assets/stylesheets/common.css` by calling the url `http://localhost/` or `http://localhost/stylesheets/common.css`. #### Source Map and Minification #### By default, in the above example, a `common.css.map` file will be generated. This allows your browser to indicated you that line in `.styl` file has generated the CSS property of the item you have selected in your debugger. Disable this with `enableLess.sourceMap` to `false`: ``` "enableStylus": { "sourceMap": false }, "routes": { "/": "index.htm" } ``` You can also generate CSS files already minify with: ``` "enableStylus": { "compress": true }, "routes": { "/": "index.htm" } ``` *Note:* More options on [stylus documentation for module](https://www.npmjs.com/package/stylus). #### Compile Stylus files with `--generate` #### Because of Stylus are compilated on the fly, when a file is requested in http(s), modification needed running website for generate CSS output. Then you can use CSS. It's possible to skip running step and directly complated Stylus before minify CSS with `enableLess.stylus`. With the following `webconfig.json`: ```js { "enableLess": { "stylus": [ "stylesheets/common.styl", "stylesheets/component-1.styl", "stylesheets/component-2.styl", "stylesheets/component-3.styl" ] }, "routes": { "/": "index.htm" } } ``` or with the following `webconfig.json`: ```js { "enableLess": { "stylus": "stylus.json" }, "routes": { "/": "index.htm" } } ``` with `stylus.json` containing : ```js [ "stylesheets/common.styl", "stylesheets/component-1.styl", "stylesheets/component-2.styl", "stylesheets/component-3.styl" ] ``` The `@import` used by Less will be capable to walk into subdirectories : `styles`, `stylesheets` or `css`. It's possible to change that with : ```js { "enableLess": { "paths": [ "subdirectory/styles-files", ], "stylus": "stylus.json" }, "routes": { "/": "index.htm" } } ``` ### Optimize Images files ### You can automatically generate optimized images files by creating Optimizations by referencing the file by input and output path. Of course you can do as much as you want. The optimization files is execute every time you start NodeAtlas either as a server or via the `--generate` command if an Optimization exists in the Webconfig. #### Creating Optimizations #### With the following configuration: ```js { "optimizations": { "images": { "media/images/example.png": "media/images/optimized/", "media/images/example.jpg": "media/images/optimized/", "media/images/example.gif": "media/images/optimized/", "media/images/example.svg": "media/images/optimized/" } }, "routes": { "/": { "template": "index.htm" } } } ``` and the following set of file: ``` ├─ assets/ │ └─ media/ │ └─ images/ │ ├─ example.png │ ├─ example.jpg │ ├─ example.gif │ └─ example.svg ├─ templates/ │ └─ index.htm └─ webconfig.json ``` you will get the following new files: ``` ├─ assets/ │ └─ media/ │ └─ images/ │ ├─ example.png │ ├─ example.jpg │ ├─ example.gif │ ├─ example.svg │ └─ optimized/ ⤆ new folder │ ├─ example.png ⤆ new file │ ├─ example.jpg ⤆ new file │ ├─ example.gif ⤆ new file │ └─ example.svg ⤆ new file ├─ templates/ │ └─ index.htm └─ webconfig.json ``` #### Create Optimizations by group of file #### For example, not define file one by one, but in group: ```js { "optimizations": { "images": { "media/images/*.{gif,jpg,png,svg}": "media/images/optimized/" } }, "routes": { "/": { "template": "index.htm" } } } ``` #### Add more options to Optimizations #### It is possible to redefine default options used for optimizations via this 4 objects: ```js { "optimizations": { "jpg": { "progressive": false }, "gif": { "interlaced": false }, "png": { "optimizationLevel": 1 }, "svg": { "multipass": false }, "images": { "media/images/*.{gif,jpg,png,svg}": "media/images/optimized/" } }, "routes": { "/": { "template": "index.htm" } } } ``` To know all options it is here: - [Jpeg Options](https://www.npmjs.com/package/imagemin-jpegtran) - [Gif Options](https://www.npmjs.com/package/imagemin-gifsicle) - [Png Options](https://www.npmjs.com/package/imagemin-optipng) - [Svg Options](https://www.npmjs.com/package/imagemin-svgo) #### Optimizations in a shared file #### In order to not re-write a long Bundles configuration list in `webconfig.json` file to your development environment and` webconfig.prod.json` to your production environment, you can group files in a file of your choice. By convention, the name is `optimizations.json` file. For example: The following set of file ``` ├─ assets/ │ └─ media/ │ └─ images/ │ ├─ example.png │ ├─ example.jpg │ ├─ example.gif │ └─ example.svg ├─ templates/ │ └─ index.htm ├─ webconfig.json └─ webconfig.prod.json ``` with `webconfig.json` ```json { "httpPort": 7777, "optimizations": { "images": { "media/images/example.png": "media/images/optimized/", "media/images/example.jpg": "media/images/optimized/", "media/images/example.gif": "media/images/optimized/", "media/images/example.svg": "media/images/optimized/" } }, "routes": { "/": { "template": "index.htm" } } } ``` and with `webconfig.prod.json` ```json { "httpPort": 7776, "httpHostname": "blog.lesieur.name", "urlPort": 80, "optimizations": { "images": { "media/images/example.png": "media/images/optimized/", "media/images/example.jpg": "media/images/optimized/", "media/images/example.gif": "media/images/optimized/", "media/images/example.svg": "media/images/optimized/" } }, "routes": { "/": { "template": "index.htm" } } } ``` could be the following set of file ``` ├─ assets/ │ └─ media/ │ └─ images/ │ ├─ example.png │ ├─ example.jpg │ ├─ example.gif │ └─ example.svg ├─ templates/ │ └─ index.htm ├─ bundles.json ├─ webconfig.json └─ webconfig.prod.json ``` with `webconfig.json` ```json { "httpPort": 7777, "optimizations": "optimizations.json", "routes": { "/": { "template": "index.htm" } } } ``` with `webconfig.prod.json` ```json { "httpPort": 7776, "httpHostname": "blog.lesieur.name", "urlPort": 80, "optimizations": "optimizations.json", "routes": { "/": { "template": "index.htm" } } } ``` and `optimizations.json` ```json { "images": { "media/images/example.png": "media/images/optimized/", "media/images/example.jpg": "media/images/optimized/", "media/images/example.gif": "media/images/optimized/", "media/images/example.svg": "media/images/optimized/" } } ``` *Note : it is possible to disable Optimizations by not including them in the `webconfig`.* #### Disable Optimizations #### It is also possible to not execute the optimization when run a website with NodeAtlas with `"imagesOptimizationsEnable": false`. ```js { "imagesOptimizationsEnable": false, "optimizations": { "images": { "media/images/example.png": "media/images/optimized/", "media/images/example.jpg": "media/images/optimized/", "media/images/example.gif": "media/images/optimized/", "media/images/example.svg": "media/images/optimized/" } }, "routes": { "/": { "template": "index.htm" } } } ``` *Note : if your optimizations is in shared file, you could desactivated it also without the `"optimizations": "optimizations.json"`. Just remove it.* #### Re-generate Optimizations before each Page Response #### You can ask files to be regenerated before each page response with `"stylesheetsBundlesBeforeResponse": false` et `"javascriptBundlesBeforeResponse": false`` for each type of Bundle. ```js { "imagesOptimizationsBeforeResponse": false, "optimizations": { "images": { "media/images/example.png": "media/images/optimized/", "media/images/example.jpg": "media/images/optimized/", "media/images/example.gif": "media/images/optimized/", "media/images/example.svg": "media/images/optimized/" } }, "routes": { "/": { "template": "index.htm" } } } ``` *Note : this is not recommanded for production environment because it's slowed responses pages.* ### CSS Inline Injection for Manage Email Assets ### When you create templates for sending email newsletters, or even simple message, you can not attach stylesheet. The only way is to write the CSS instructions in the template within the `style` markup attribute. #### Specific Injection #### With `injectCss`, simply design your template as usual via a stylesheet and NodeAtlas inject each rendering styles in the attribute `style`. It will do more than generate templates. With for example the following configuration: ```json { "routes": { "/": { "template": "email.htm", "generate": "welcome.html", "injectCss": "stylesheets/email.css" } } } ``` and the following set of files: ``` ├─ generates/ ├─ assets/ │ └─ stylesheets/ │ └─ email.css ├─ templates/ │ └─ email.htm └─ webconfig.json ``` whose contents are : **stylesheets/common.css** ```css body { color: #f00; } ``` **templates/email.htm*** ```htmlThis is a template email.
``` output will be, with the command `node node-atlas/ --generate`, all following file: ``` ├─ generates/ │ └─ bienvenue.html <= template email generate ! ├─ assets/ │ └─ stylesheets/ │ └─ email.css ├─ templates/ │ └─ email.htm └─ webconfig.json ``` with as content for `generates/welcome.html` ```htmlThis is a template email.
``` This mechanism also works if you do not intend to generate anything but a site that is running. Convenient to change your live models before generating. > Test : From `./tests/examples/css-injection` run `node "../../../" --generate`. Result are into `generates`. #### Global Injection #### It is possible to use `injectCss` as global mechanism for all pages. ```json { "injectCss": "stylesheets/email.css", "routes": { "/welcome/": { "template": "email-a.htm", "generate": "welcome.html" }, "/good-bye/": { "template": "email-b.htm", "generate": "good-bye.html" } } } ``` ainsi les deux pages `welcome` et `good-bye` contiendront chacune ``. #### Multiple Injection #### It's possible to : - Attach global and specific files in same time. - Attach more one CSS file by `injectCss` property. ```json { "injectCss": ["stylesheets/reset.css", "stylesheets/email.css"], "routes": { "/welcome/": { "template": "email-a.htm", "generate": "welcome.html", "injectCss": "/stylesheets/welcome.css" }, "/good-bye/": { "template": "email-b.htm", "generate": "good-bye.html", "injectCss": ["stylesheets/good-bye.css", "/stylesheets/others.css"] } } } ``` > Test : From `./tests/examples/css-injection` run `node "../../../" --generate --webconfig webconfig.multiple.json`. Result are into `generates`. ### Allow / Disallow GET / POST requests ### You can also manager how the server will respond to requests GET/POST to a given page. For example, we will allow access to pages only GET for the whole site and allow a POST to one page only (and prohibited him GET). ```js { "getSupport": true, "postSupport": false, "routes": { "/": { "template": "index.htm" }, "/list-of-members/": { "template": "members.htm" }, "/write-comment/": { "template": "write-com.htm" }, "/save-comment/": { "template": "save-com.htm", "getSupport": false, "postSupport": true } } } ``` *Note : If nothing is set,* ***getSupport*** *and* ***postSupport*** *are set to* ***true*** *in global webconfig and by route.* ### Allow / Disallow PUT / DELETE requests ### Fonctionnant exactement de la même manière que `getSupport` et `postSupport`, les deux actions HTTP PUT et DELETE qui part défaut ne sont pas activé peuvent être activé avec `putSupport` et `deleteSupport`. ```js { "getSupport": false, "postSupport": false, "putSupport": true, "routes": { "/read-all-entry/": { "template": "display-json.htm", "variation": "all-entry.json", "getSupport": true, "putSupport": false }, "/read-entry/:id/": { "template": "display-json.htm", "variation": "entry.json", "getSupport": true, "putSupport": false }, "/create-entry/:id/": { "template": "display-json.htm", "variation": "entry.json", "postSupport": true, "putSupport": false }, "/update-entry/:id/": { "template": "display-json.htm", "variation": "entry.json" }, "/delete-entry/:id/": { "template": "display-json.htm", "variation": "entry.json", "deleteSupport": true, "putSupport": false } } } ``` With the configuration below, only one HTTP action is possible by route, this is a great way to create APIs REST easily with NodeAtlas. ### Change settings of Sessions ### #### Key and Secret #### NodeAtlas itself manages sessions stored on the server as initial settings: - Key : `nodeatlas.sid` - Secret : `1234567890bépo` that allow customers to stay connected through the pages to a single set of personal server side variable. It is possible to change the default settings (and even compulsory for productions sites) with the parameters of `webconfig.json` following: ```js { sessionKey: "personal key", sessionSecret: "personal secret" } ``` NodeAtlas also employs a memory storage object (MemoryStore) stoques that the information in the RAM of the server. #### Other Parameters #### It is possible to change all the parameters of the sessions (except MemoryStore) using the configuration of next `webconfig.json`: ```js { "session": { "key": "personal key", "secret": "personal secret", "cookie": { "path": '/', "httpOnly": true, "secure": false, "maxAge": null }, ..., ..., ... } } ``` The entirety of the possible configuration is located on the module documentation [express-session](https://github.com/expressjs/session). ### External Storage Sessions ### By default, this is NodeAtlas server that stores sessions in the RAM of the server application. This does not allow users to share sessions across multiple applications NodeAtlas (or other) and erases all current sessions for an application if you restart it. To address this concern, it should support the recording sessions via a base No SQL such as `Redis` or `MongoBD`. You just have to use the `setSessions` function in` controllers/common.js` of [Back-end part](#controller-and-model-part). #### Session managed with Redis #### Implement the following code in `controllers/common.js` to store your sessions in a local Redis. ``` var website = {}; (function (publics) { "use strict"; publics.loadModules = function (NA) { var NA = this; NA.modules.RedisStore = require('connect-redis'); }; publics.setSessions = function (next) { var NA = this, session = NA.modules.session, RedisStore = NA.modules.RedisStore(session); NA.sessionStore = new RedisStore(); next(); }; }(website)); exports.loadModules = website.loadModules; exports.setSessions = website.setSessions; ``` More information to [connect-redis](https://www.npmjs.org/package/connect-redis) page. #### Session managed with MongoDB #### Implement the following code in `controllers/common.js` to store sessions in the database `sessions` of a local MongoDB. ``` var website = {}; (function (publics) { "use strict"; publics.loadModules = function () { var NA = this; NA.modules.MongoStore = require('connect-mongo'); }; publics.setSessions = function (next) { var NA = this, session = NA.modules.session, MongoStore = NA.modules.MongoStore(session); NA.sessionStore = new MongoStore({ db: 'sessions' }); next(); }; }(website)); exports.loadModules = website.loadModules; exports.setSessions = website.setSessions; ``` More information to [connect-redis](https://www.npmjs.org/package/connect-mongo) page. ### Changing the template engine brackets <% %> ### For example, to include part of a file instruction is used ***<%- include('head.htm') %>***. It would be possible to do it with ****** with the configuration below: ```js { "templateEngineDelimiter": "?", "routes": { "/": { "template": "index.htm" } } } ``` See the exemple in files below: *components/head.htm* ```html
```
in absolute urls with variable `urlBasePath` as below:
```
```
Note that in the case of the following configuration:
```js
{
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
`urlBasePath` return `http://localhost/` while in this configuration:
```js
{
"httpPort": 7777,
"urlRelativeSubPath": "sub/folder",
"routes": {
"/": {
"template": "index.htm"
}
}
}
```
`urlBasePath` return `http://localhost:7777/sub/folder/`.
#### The paths of templates ####
Using the following webconfig:
```js
{
"routes": {
"/index.html": {
"template": "index.htm"
},
"/contact.html": {
"template": "contact.htm"
}
}
}
```
and the corresponding template
```html
Link to home
Link to contact
```
I'd have to change my link in the template if I change the listening port or if I change the path of the url. The following configuration changes:
```js
{
"httpPort": 7777,
"routes": {
"/home.html": {
"template": "index.htm"
},
"/contact-us.html": {
"template": "contact.htm"
}
}
}
```
me contraindrait à modifier le template précédent comme suit :
```html
Link to home
Link to contact
```
You can solve this problem by giving a key to a specific path and deporting are way in the `url` property.
With the followinh webconfig:
```js
{
"routes": {
"index": {
"url": "/index.html",
"template": "index.htm"
},
"contact": {
"url": "/contact.html",
"template": "contact.htm"
}
}
}
```
I can now write the link in the dynamic template:
1. as follows
```html
Link to home
Link to contact
```
*Note : `.slice(1)` makes it easy to remove the dual `/` for standard url.*
2. or as follows
```html
Link to home
Link to contact
```
*Note : This would, for example `http://localhost/./home.html`, which is a standard url.*
3. ou comme suit
```html
Link to home
Link to contact
```
*Note : `urlBasePathSlice` return `http://localhost` in place of `http://localhost/` or `http://localhost:7777/sub/folder` in place of `http://localhost:7777/sub/folder/`.*
#### Utilisation de la clé pour mapper les pages ####
It's maybe useful to know the key used for the current page displayed for find the equivalent page in an other language.
With the following webconfig :
```js
{
"languageCode": "en-us",
"routes": {
"index_en-us": {
"url": "/",
"template": "/index.htm"
},
"index_fr-fr": {
"url": "/francais/",
"template": "index.htm",
"languageCode": "fr-fr"
},
"cv_en-us": {
"url": "/resume/",
"template": "cv.htm"
},
"cv_fr-fr": {
"url": "/francais/cv/",
"template": "index.htm",
"languageCode": "fr-fr"
}
}
}
```
and the common variation following :
```js
{
"language": [{
"name": "English",
"code": "en-us"
}, {
"name": "French",
"code": "fr-fr"
}]
}
```
in fr :
```js
{
"language": [{
"name": "Anglais",
"code": "en-us"
}, {
"name": "Français",
"code": "fr-fr"
}]
}
```
we could create link between each page as following :
```html
-
<% for (var i = 0; i < common.language.length; i++) { %>
- <%- common.language[i].name %> <% } %>