Webpack Dev Server + espresso Web Server

Question

Sto avendo la creazione di un flusso di lavoro di sviluppo che farà entrambi i seguenti compiti contemporaneamente guai:

1. Ricompilare beni statici (js, css) sulla modifica di file. Servi queste risorse statiche. Notifica al browser che la pagina deve essere ricaricata ogni volta che vengono cambiate le risorse. Utilizzare reagire-hot-loader.
2. Utilizzare express per eseguire un server che serve un'API che le risorse statiche "consumano". Avviare questo server express ogni volta che i file del server cambiano.

È la procedura migliore per far sì che webpack-dev-server offra le risorse statiche e un server Web separato offra l'API su una porta diversa? In tal caso, le chiamate API nel javascript dovranno specificare l'host e la porta e dovranno essere cambiate prima di andare in produzione. Sembra che tutte le esercitazioni online si concentrino sul numero 1 e non configurino un server API. Qualcuno può indicarmi la direzione corretta?

Non sono contrario all'utilizzo di gulp e browserify o SystemJS invece del webpack, ma sembra che se voglio utilizzare react-hot-loader, ho bisogno di usare webpack.

Answer 1

Abbiamo utilizzato gulp + webpack per l'ultimo anno ed è stato fantastico. Abbiamo un gateway API che serve solo un file html statico (index.html) e tutto il resto sono solo punti finali REST. Quindi nel file index.html facciamo riferimento a un file css o due e un paio di script che vengono caricati dal nostro CDN (Cloudfront).

Se si esegue in questo modo la produzione, la configurazione locale, ha solo bisogno di utilizzare il server dev webpack come "CDN locale". Sei corretto, il tuo javascript dovrà sapere che cos'è l'api url dal momento che cambierà locale rispetto alla produzione. In realtà abbiamo locale, dev, stage e produzione - una volta installato per funzionare in 2 ambienti non è difficile aggiungerne altri (che è buono!)

Ora il nostro index.html ha alcune variabili di template che vengono riempite dal gateway API quando lo serve. Simile a questo:

<script> 
    var siteConfig = { 
    apiBase: '<%=apiBaseUri%>', 
    cdnBase: '<%=cdnBaseUri%>' 
    }; 
</script> 
<script src="<%=cdnBaseUri%>/assets/js/bundle.min.js"></script> 

Poi basta tirare in SiteConfig quando la vostra reagiscono applicazione si sta avviando e anteporre quelle variabili per tutte le chiamate API/CDN. Scambia le variabili a seconda del tuo ambiente, e bam, il gioco è fatto!

Un approccio un po 'più semplice è invece di riempire in quei Vars quando la pagina è servito si potesse fare al momento della compilazione. Questo è il modo in cui abbiamo iniziato, ma mentre le cose si evolvevano si è rivelato più facile da gestire in fase di esecuzione.

A proposito, io sono abbastanza sicuro che si può realizzare tutto questo utilizzando solo webpack - sorso probabilmente non è necessario, ma è stato più facile per noi al momento di utilizzare sorso per l'esecuzione di test di unità, rilascio di fibre, ecc

Answer 2

Si può fare qualcosa di simile:

• Creare un proxy
• espresso() Creare un webpack-dev-server di
• link dei beni con URL assoluto
• Inizio Bot h server.

Nota: assicurarsi di disporre di porte diverse per eseguire entrambi i server.

var proxy = require('proxy-middleware'); 
var express = require('express'); 
var url = require('url'); 

//----------------- Web Proxy-------------------- 
var app = express(); 
app.use('/assets', proxy(url.parse('http://localhost:8000/dist/assets'))); 
app.get('/api/url', function(req, res) {} 
app.post('/api/url', function(req, res) {} 

// ---------------Webpack-dev-server--------------------- 
var server = new WebpackDevServer(webpack(config), config.devServer); 

// ---------------Run both servers----------------------- 
server.listen(config.port, 'localhost', function(err) {}); 
app.listen(8080);