Environnement de Développement

NodeAtlas utilise Node.js qui est développé sur le moteur V8. Le moteur V8 est également utilisé par les navigateurs Google Chrome et Chromium ce qui fait que NodeAtlas peut être complètement débuggué dans cet environnement.

Debug du front-end

Vous pouvez débugguer vos rendu HTML, vos règles CSS et votre code JavaScript front-end de la même manière que vous l'auriez fait avec un simple site HTML ou une autre technologie. Vous avez donc accès via F12 à la console JavaScript, aux éléments du DOM éditables, à l'éditeur de propriétés et animations CSS ainsi qu'au débogueur de fichier JavaScript.

La nouveauté avec NodeAtlas vient de l'éditeur de CSS. Là où il vous indiquait les fichiers CSS et lignes pour vos fichiers source en CSS, il vous indique pour un fichier CSS généré avec Stylus ou Less le fichier Stylus ou Less ainsi que sa ligne.

Debug du back-end

À partir de Node.js v6.6+, vous pouvez débugguer tout simplement votre code back-end dans Google Chrome. Il suffit pour cela d'utiliser l'option --inspect de node.

Créez vous par exemple un fichier de lancement comme celui-ci :

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

puis lancez le avec la commande suivante :

node --inspect server.js

Le moteur vous communiquera alors l'url d'une page à afficher dans Chrome. Rendez-vous sur cette page afin de voir les messages de la console dans l'onglet console, de debugguer votre code avec la totalité des fichiers utilisés dans source et des tests de performance avec profile.

Tests de Périphériques

Pour tester votre site ou application web pendant la phase de développement sur vos téléphones mobiles et tablettes il suffit de connecter votre poste de développement et ces appareils sur le même réseau local.

Par exemple, connectez tous vos appareils sur le même réseau Wifi. Puis, trouvez sur ce réseau, l'ip de votre poste de développement. Sur Windows, cela ce fait à l'aide de la commande ipconfig par exemple.

Une fois votre ip connu, il ne vous reste qu'à définir le hostname et le port d'écoute pour votre instance de développement NodeAtlas :

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

Ce qui ouvrira votre site ici : http://192.168.1.24:7777/.

Il ne vous reste plus qu'à réclamer cette url depuis vos autres appareils et tester vos rendus et cas d'utilisations.

Auto-rechargement à chaud

Vous pouvez vous servir du module npm browserSync ainsi que du module Nodemon pour recharger les fichiers dans le navigateur automatiquement dès que ceux-ci ont bougés dans votre environnement de développement. Il vous faut installer les modules npm gulp, browserSync et gulp-nodemon pour faire de l'auto-rechargement à chaud.

Installer les dépendances

Le plus simple est d'ajouter à votre package.json les lignes suivantes :

package.json

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

et de lancer la commande

npm install

Créer vos configurations

Créez vous un fichier server.js (si vous n'en avez pas déjà un) et placez y (par exemple) ce code de lancement :

server.js

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

Créez vous également un fichier gulpfile.js dans lequel vous mettrez ses instructions :

/* jshint node: true */

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

/* Dire que la première tâche après celle par défaut sera la tâche `browser-sync`. */
gulp.task('default', ['browser-sync']);

/* Dire que la tâche après `browser-sync` sera la `nodemon`. */
gulp.task('browser-sync', ['nodemon'], function() {

    /* En ce qui concerne la tâche courante nous allons
       lancer de quoi écoutez les fichiers pour le Front. */
    browserSync.init(null, {
        proxy: "http://localhost:7777", // Ça c'est le port httpPort de la config NodeAtlas.
        files: ["views/**", "assets/**", "variations/**"], // Ça c'est tous les fichiers que vous écoutez depuis la racine.
        port: 57776, // Ça c'est le port pour le développement à chaud.
    });
});

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

    /* En ce qui concerne la tâche courante nous allons
       lancer de quoi écoutez les fichiers pour le Back. */
    return nodemon({
        script: 'server.js', // Ceci est le script qui va être lancé.
        ext: 'js json', // Ceci sont les fichiers back que nous écoutons.
        ignore: ['gulpfile.js', 'variations/**', 'views/**', 'assets/**'] // Ceci sont les fichiers front que nous ignorons d'écouter.
    }).on('restart', function() {

        /* Quand le serveur redémarre, recharger la page courante. */
        setTimeout(function () {
             browserSync.reload();
        }, 500);
    }).on('start', function () {

        /* Empècher Nodemon de se lancer plusieurs fois. */
        if (!started) {
            next();
            started = true;
        }
    });
});

Lancement

Il ne vous reste plus qu'à lancer tout ça avec la commande

gulp

ou vous créer une commande npm dans votre package.json en ajoutant cette ligne :

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

et lancer la commande

npm run watch