8768 sujets

Développement web côté serveur, CMS

Node.js et livereload

Bonjour,

Dans un environnement node.js et express.js je cherche à faire un livereload lié à un onglet de mon navigateur. Pour la recompilation de node.js après chaque modification j'utilise nodemon. J'ai tenté de mettre en place reload de npm, mais apparement je ne suis pas doué.

Si quelqu'un a déjà tenté de mettre en place ce type de configuration, même avec des outils node.js différents, je serais ravis d'entendre son avis sur le sujet.

Bien sûr il existe un exemple sur la page du module reload mais je n'arrive pas à l'adapter à mon code. Voici le code minimum qu'il me semblerait devoir fonctionner... qui ne fonctionne pas (mais qui au moins ne fait pas planter l'environnement).


// app.js

'use strict'

const express = require('express')
    , http = require('http')
    , reload = require('reload')
    , app = express()
    , config = require('./config')

// ici du code de configuration
// sans lien avec le problème rencontré...

app.get('*', function(req, res){ // une route par défaut (404)
  res.status(404)
  res.render('patternLayouts',
    {
      dev: config.dev
      , siteUri: config.uri
      , title: 'Error 404'
      , description: 'Error 404, Page not found'
      , name: 'Error 404'
      , content: 'Page not found'
    }
  )
})

const server = http.createServer(app) // démarrage d'un serveur
server.listen(config.port, config.host, logSuccess)
reload(server, app)

function logSuccess() {
  console.log('un message informant le terminal que le serveur a démarré...')
}

Et quelque part dans un template commun à toutes les pages :

// footer.pug
// du code de template...
script(src='/reload/reload.js') // a priori ce lien devrait être parsé et réécrit par le module mais il ne se passe rien et j'ai donc une erreur 404...
// du code de template...

Les variables sont appelées via un autre fichier mais sont basiques et gérèreraient de toute façon une erreur en cas de mauvaises config' :

// config.js
exports.dev = true
exports.scheme = 'http://'
exports.host = '127.0.0.1'
exports.port = 9000 // ou `process.env.port || 9000`
exports.dir = __dirname
exports.uri = exports.scheme + exports.host + ':' + exports.port

Modifié par Olivier C (27 Jan 2017 - 08:48)
Modérateur
Hello,

Tu peux regarder du côté de live-server sur npm.

Après install, tu lances simplement npm live-server à la racine de ton dossier. Il te générera un serveur et ouvrira une page qui pointe directement dessus.
Simplement à chaque update de fichiers dans le dossier, ta page fera un refresh...

Simple et sans config Smiley smile
Modifié par Yordi (27 Jan 2017 - 08:51)
dew a écrit :
Olivier, je pense que tu dois déjà connaître mais https://browsersync.io/ n'est-il pas suffisant ?

C'est vrai, je l'utilise pour d'autres projets d'ailleurs. Je l'avais écarté car je ne voulais pas d'un truc qui me génère en plus un serveur car je commence seulement à aborder la config node.js, j'avais peur de m’emmêler les pinceaux avec un plugin déjà conséquent.

Après, il est vrai, rien ne m'empêche de le désactiver :
bs.init({
    server: true
});

EDIT : en fait non, j'avais mal compris : sur un site dynamique on n'utilise pas `server` mais `proxy` pour écouter l'url racine du site :
bs.init({
  proxy: config.uri
})


Mais finalement je vais sans doute garder cette idée, y compris avec le serveur qui sera réservé au dev' (comme sous Symfony : un pour la prod', un autre pour le dev).

C'est juste que ça m’agaçait de ne pas arriver à faire fonctionner un truc apparemment assez simple, je passe à côté de quelques chose dans la config' et je n'ai pas encore mis le doigt dessus.

Je ferais un retour si j'arrive à quelque chose...

@Yordi et @Dew : merci à vous deux.
Modifié par Olivier C (02 Feb 2017 - 10:50)
Bonjour,

Après une semaine de pause dans le dev j'ai switché pour browser-sync. Voici donc pour moi le paramétrage qui fonctionne :
'use strict'

const bs = require('browser-sync').create()

bs.init({
  proxy: 'http://127.0.0.1:9000/' // serveur à surveiller
  , port: 9001
  , open: 'external'
  , reloadDebounce: 2000 // temps mini entre deux réactualisations de page
  //, logLevel: 'debug' // informations essentielles seulement
  //, logFileChanges: false // information sur les fichiers traités (désactivé car verbeux...)
  , notify: false // notifications dans le navigateur
})

bs.watch('**/*'
  , {ignored: [
    'package.json'
    , 'npm-debug.log'
    , 'config.js'
    , 'app.js'
    , 'dev.js'
  ]}
).on('change', bs.reload)

Modifié par Olivier C (04 Feb 2017 - 08:40)
Sujet clos
Aller à