Hot Module Replace für Node Web Server

Question

Also, ich habe Webpack und React läuft mit HMR. Funktioniert wirklich gut, bar einige der Probleme.

Um die Entwicklung zu beschleunigen, füge ich grundlegende APIs, die in JavaScript geschrieben sind, dem Express-Webserver hinzu, der das React HMR bereitstellt.

Ich hätte das vielleicht sehr, sehr sehr schwierig (Lüftung auf unmöglich) .. aber ist es möglich, den Webserver neu starten und neu laden alle API-Dateien (und möglicherweise wieder mit der zuvor geöffneten Registerkarte) wenn einige Backend APIs werden geändert ??

Aktuelle Express-Konfiguration:

import express from 'express'; 
import webpack from 'webpack'; 
import path from 'path'; 
import config from '../webpack.config.dev'; 
import open from 'open'; 
import bodyParser from 'body-parser'; 
import session from 'express-session'; 
import cookieParser from 'cookie-parser'; 

import clientApi from '../backend/client.api'; 
import sessionApi from '../backend/session.api'; 
import profileApi from '../backend/profile.api'; 
import * as loginApi from '../backend/login.api'; 
import IdentityService from '../backend/identity-service'; 
/* eslint-disable no-console */ 

const port = 5003; 
const app = express(); 
const compiler = webpack(config); 

app.use(bodyParser.json()); // parsing application/json 
app.use(cookieParser()); // parsing cookies 

app.use(require('webpack-dev-middleware')(compiler, { 
    noInfo: true, 
    publicPath: config.output.publicPath 
})); 

app.use(require('webpack-hot-middleware')(compiler)); 

app.set('trust proxy', 1); // trust first proxy 

app.use(session({ 
    secret: 'keyboard cat', 
    resave: false, 
    saveUninitialized: true 
})); 

app.get('/login', function (req, res) { 
    res.sendFile(path.join(__dirname, '../src/login.html')); 
}); 

loginApi.configureUnsecure(app); 

app.get(/^\/(?!api).*$/i, function(req, res) { 
    res.sendFile(path.join(__dirname, '../src/index.html')); 
}); 

const identityService = new IdentityService(); 
app.use(function (req, res, next) { 
    let authenticated = identityService.checkAuthentication(req); 

    if (authenticated) { 
     next(); 
    } else { 
     res.sendStatus(401); 
    } 
}); 

clientApi(app); 
sessionApi(app); 
profileApi(app); 
loginApi.configureSecure(app); 

app.listen(port, function(err) { 
    if (err) { 
     console.log(err); 
    } else { 
     open(`http://localhost:${port}`); 
    } 
}); 

Möchten Sie möglicherweise diese von einer Gulp Aufgabe ausführen?

Like:

gulp.task('watch-backend',() => { 
    gulp.watch('./backend/**/*.*',() => { 
     // close down old server in node 
     // spin up new server in node 
    }); 
}); 

Nicht wirklich sicher, was die Kommentare wie in Code aussehen würde ?!

Answer 1

Ein üblicher Ansatz besteht darin, nodemon zu verwenden, der den Node-Prozess neu startet, wenn sich eine Datei ändert, es ist ein direkter Ersatz für den Node CLI z.

$ nodemon server.js 

Allerdings, wenn Ihre APIs auf demselben Express-Server als Webpack Vermögenswerte montiert sind, werden Sie finden es sehr langsam sein, neu zu starten, da die Webpack Kompilierung wird von Kälte wieder laufen.

Sie könnten es daher besser finden, zwei Server an verschiedenen Ports zu starten, einen für Ihre Webpack-Assets und einen weiteren für Ihre Node-API.