Development Environment

NodeAtlas use Node.js which is developed on V8 Engine. The V8 Engine is also used by Google Chrome and Chromium which do NodeAtlas could be debug with this environment.

Front-end Debug

You could debug your HTML render, your CSS files and your JavaScript front-end code in the same way that you'll do that with a simple HTML website or another technology. You have acces with F12 to the JavaScript console, to DOM editable elements, to the CSS property and animation editor and also to the JavaScript file débug system.

The new thing introduce with NodeAtlas is into the CSS editor. Instead of show you name and line of CSS file for rules of an element, if this CSS file was generated from a Stylus or Less, it's the Stylus or Less name and line that you'll see in the editor.

Back-end Debug

From Node.js v6.6+, you could debug your Back-end code with Google Chrome. You have just to do that to use the --inspect option of node.

Create for example a starting point file like this :

require("node-start")().start()

and run the following command :

node --inspect server.js

The engine will communicate you the url of a page to display in Chrome. Go to this page to see all messages from console into the console tab, to debug your code with all Back-end files used in source and tests the perfs with profile.

Devices Tests

For test your app or website during the development phase on your mobile and pad you must connect your development machine and all devices on the same local network.

For example, connect all your devices on the same Wifi network. Then, find on this network the ip address of your development machine. On Windows, this could be done with the ipconfig for example.

When you obtain your ip, just set the hostname and the listening port for your NodeAtlas development instance:

node-atlas --httpPort 7777 --httpHostname 192.168.1.24 --browse

And that will open the website here : http://192.168.1.24:7777/.

You just now reach the url from your other devices to test the render of your app or website.

Hot Reloading

You can use the browserSync npm module and the Nodemon npm module to reload files from your browser automaticly when it changes in your develpoment environment. You need npm module gulp, browserSync and gulp-nodemon to do hot reloading.

Dependencies Install

The most simple it to add into package.json file the following lines:

package.json

{
  /* ... */
  "devDependencies": {
    "browser-sync": "2.18.x",
    "gulp": "3.9.x",
    "gulp-nodemon": "2.2.x"
  },
  /* ... */
}

and run the following command:

npm install

Create configuration

Create a server.js file (if you do not already have one) and place into the following code (for example):

server.js

require("node-atlas")().start();

Create also a gulpfile.js file in which you will add the following line code:

/* jshint node: true */

/* Load modules */
var gulp = require('gulp'),
    browserSync = require('browser-sync'),
    nodemon = require('gulp-nodemon');

/* My first task after default task will be the `browser-sync` task. */
gulp.task('default', ['browser-sync']);

/* My task after `browser-sync` will be the `nodemon` task. */
gulp.task('browser-sync', ['nodemon'], function() {

    /* For this task, will listening
        changing into front files */
    browserSync.init(null, {
        proxy: "http://localhost:7777", // The httpPort from NodeAtlas config.
        files: ["views/**", "assets/**", "variations/**"], // All files you want listening from root.
        port: 57776, // Hot reloading listening port.
    });
});

/* Dernière tâche `nodemon`. */
gulp.task('nodemon', function (next) {
    var started = false;

    /* For this task, will listening
        changing into back files */
    return nodemon({
        script: 'server.js', // The script will be start and watched.
        ext: 'js json', // This will be the back files will be listening.
        ignore: ['gulpfile.js', 'variations/**', 'views/**', 'assets/**'] // This are the ignored front files.
    }).on('restart', function() {

        /* When the server restart, restart current page. */
        setTimeout(function () {
             browserSync.reload();
        }, 500);
    }).on('start', function () {

        /* Not run Nodemon more once. */
        if (!started) {
            next();
            started = true;
        }
    });
});

Starting

Now, all you need to do is run the following command:

gulp

or create an npm command into package.json by adding this lines:

{
  /* ... */
  "scripts": {
    /* ... */
    "watch": "gulp"
    /* ... */
  },
  /* ... */
}

and run the following command

npm run watch