web-dev-qa-db-fra.com

Comment puis-je ajouter un live-rechargement à mon serveur nodejs

Voici comment puis-je exécuter mon serveur nodejs, j'ai besoin de mettre mon serveur en foie lorsque je modifie le code dans le dev frontal

"start": "node server.js"
node.jsreactjsexpresslivereload
12
Ahmed Rebai

d'abord: 

npm install -g nodemon

suivant ajoutez une ligne de script à votre package.json

"live": "nodemon server.js"

maintenant, quand vous npm vivre, il va recharger en direct

pour plus de détails, voir https://github.com/remy/nodemon

mise à jour si un rechargement de page en direct est également nécessaire

npm install -g livereload
livereload . -w 1000 -d

pour plus de détails, voir https://github.com/napcs/node-livereload

5
Mark Essel

Redémarrer le serveur est une chose, rafraîchir le navigateur en est une autre. Pour regarder le serveur, j'utilise nodemon. Nodemon peut voir quand des changements se produisent dans tous les types de fichiers. Mais nodemon ne peut pas actualiser la page du navigateur. Pour cela, j'utilise la synchronisation du navigateur.

J'utilise les deux en gorgée.

Ainsi, les dépendances de package.json pour le faire fonctionner:

"devDependencies": {
"browser-sync": "^2.24.5",
"gulp": "^3.9.1",
"gulp-nodemon": "^2.2.1"
}

Dans le fichier serveur (mon serveur est dans ./bin/www, le vôtre peut être dans server.js, app.js ou ailleurs), le serveur express écoute le port 3001.

var port = normalizePort(process.env.PORT || '3001');
var server = http.createServer(app);
server.listen(port);

La prochaine chose à faire est d'exécuter nodemon et la synchronisation du navigateur dans gulp. Contenu complet de gulpfile.js

var gulp = require('gulp');
var nodemon = require('gulp-nodemon');
var browserSync = require('browser-sync').create();

gulp.task('gulp_nodemon', function() {
  nodemon({
    script: './bin/www', //this is where my express server is
    ext: 'js html css', //nodemon watches *.js, *.html and *.css files
    env: { 'NODE_ENV': 'development' }
  });
});

gulp.task('sync', function() {
  browserSync.init({
    port: 3002, //this can be any port, it will show our app
    proxy: 'http://localhost:3001/', //this is the port where express server works
    ui: { port: 3003 }, //UI, can be any port
    reloadDelay: 1000 //Important, otherwise syncing will not work
  });
  gulp.watch(['./**/*.js', './**/*.html', './**/*.css']).on("change", browserSync.reload);
});

gulp.task('default', ['gulp_nodemon', 'sync']);

Lors de l'exécution de gulp dans le terminal, il commencera à regarder le serveur ainsi qu'à rafraîchir le navigateur en cas de modification de n'importe quel fichier.

Bien que nous spécifions le port 3001 dans le serveur express, notre application fonctionnera sur le port 3002, car nous écrivons en synchronisation avec le navigateur. 3001 sera utilisé comme proxy.

3
Alonad
npm install browser-refresh -g

et ajoutez votre js principal

 if (process.send) {
     process.send('online');
 }

par exemple

app.listen(port, function() {
    console.log('Listening on port %d', port);

    if (process.send) {
        process.send('online');
    }
});

et ajoutez votre page d'index avant la balise de fermeture du corps.

<script src="{process.env.BROWSER_REFRESH_URL}"></script>

et démarrez votre serveur sur termial au lieu du noeud server.js

browser-refresh server.js
3
Murat Çimen

Un exemple de ma configuration:

livereload.js (ce serait donc votre server.js, bien sûr n'utilisez que les parties liées à livereload, pas besoin de remplacer votre serveur de développement)

const path = require('path');
const fs = require('fs');

const livereload = require('livereload');
const lrserver = livereload.createServer();

const compiled = path.join( __dirname, "dist");
lrserver.watch( compiled ); 

const connect = require('connect');
const stat = require('serve-static');

const server = connect();
server.use( stat( compiled ));

server.listen( 3033 );

console.log( 'Dev server on localhost:3033' );

Il démarre en fait deux serveurs sur localhost: le serveur livereload écoute sur :35729 et un serveur de fichiers statique sur :3033.

Livereload observe le répertoire dist qui contient les fichiers compilés (js, css, html). Vous devez ajouter cet extrait à chaque page HTML à recharger:

<script>
 document.write('<script src="http://' + (location.Host || 'localhost').split(':')[0] +
                ':35729/livereload.js?snipver=1"></' + 'script>');
</script>

Si vous ne transpilez/compilez/prétraitez pas votre code js/css/html (c'est-à-dire que vous modifiez directement les fichiers qui sont servis) alors observez le répertoire source et vous avez terminé. Sinon, vous avez besoin d'une tâche qui surveille les modifications du répertoire source et se compile dans le répertoire dist qui est observé par livereload :)

Parties pertinentes de mon package.json:

"scripts": {
    "build": "npm run build:js && npm run build:css",
    "prewatch": "node livereload.js &",
    "watch": "node ./node_modules/watch-run/bin/watch -p './src/**' npm run build",
  },
"devDependencies": {
    "connect": "^3.6.2",
    "livereload": "^0.6.2",
    "serve-static": "^1.12.3",
    "watch-run": "^1.2.5"
  }

$ npm run watch construit le projet et démarre les serveurs de fichiers livereload + static. (le build:* tâches omises par souci de concision).

3
pawel

Si grunt est utilisé, il existe un package npm grunt-contrib-watch pour le rechargement en direct.

Découvrez un autre appelé grunt-express-server qui peuvent fonctionner ensemble.

1
themefield

Utilisez le package npm appelé livereload .

Utilisez-le en conjonction avec nodemon pour que le côté client et le côté serveur fonctionnent parfaitement.

npm install livereload nodemon --save

-- save-dev. Je sais, je sais !

Ajouter une extension de navigateur. Disponible pour Safari, Firefox et Google Chrome. Obtenez-les ici .

Assurez-vous d'avoir ces scripts dans package.json.

  "scripts": {
"start": "nodemon server.js && livereload"

}

server.js est mon point d'entrée.

À l'intérieur de server.js ajoutez ce qui suit:

const livereload = require('livereload');
const reload = livereload.createServer();
reload.watch(__dirname + "/server.js");

server.js est le fichier que je veux que livereload regarde. Vous pouvez également ajouter n'importe quel répertoire au lieu d'un fichier.

reload.watch(__dirname + "/public");

Dans le terminal: npm start

Cliquez sur l'icône d'extension dans le navigateur pour vous connecter.

Vous pouvez également utiliser livereload et nodemon séparément dans différents terminaux.

"scripts": {
    "start": "nodemon server.js",
    "livereload": "livereload"
  }

npm start

npm livereload

npm livereload -p PORT_NUMBER si le port par défaut est déjà utilisé.

Mise à jour: parfois, cela ne fonctionne pas sur l'enregistrement une fois. Un couple de Ctrl + S se recharge à nouveau et apporte les modifications. Je ne sais pas s'il s'agit d'un problème de mise en cache du navigateur ou d'un package.

0
therj

Vous pouvez utiliser nodemon .
Il surveillera les fichiers de votre projet et redémarrera le serveur lorsque vous les modifierez.

Vous pouvez l'installer globalement:

npm install -g nodemon

l'exécuter sur votre répertoire de projets

cd ./my-project
nodemon

Vous pouvez également l'ajouter aux dépendances de développement de votre projet et l'utiliser à partir d'un script npm:

npm install --save-dev nodemon

Ajoutez ensuite un script simple à votre package.json:

"scripts": {
    "start": "node server.js",
    "dev": "nodemon"
}

alors vous pouvez simplement exécuter la commande suivante:

npm run dev
0
Kayvan Mazaheri