Utilizzo della sincronizzazione del browser con l'app node.js

Question

Ho un'app di nodo esistente. La mia struttura di directory del nodo è configurato in questo modo:

./ 
    node_modules/ 
    src/ 
    views/ 
     index.html 
     ... 
    server.js 
    test/ 
    gulpfile.js 
    package.json 

posso iniziare con successo la mia app mia corsa node ./src/server.js dalla radice sopra indicato. Una volta avviato, posso visitare "http://localhost:3000" nel browser e vedere il contenuto di index.html come mi aspetto.

Voglio accelerare il mio sviluppo e di recente ho imparato a conoscere browsersync. Nel tentativo di includerla nel mio processo sorso, ho il seguente:

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

browserSync.init({ 
    server: { 
    baseDir: './src/', 
    server: './src/server.js' 
    } 
}); 

Quando eseguo gulp, vedo quanto segue nella riga di comando:

BS] URL di accesso:

-------------------------------------- 
     Local: http://localhost:3000 
    External: http://[ip address]:3000 
-------------------------------------- 
      UI: http://localhost:3001 
UI External: http://[ip address]:3001 
-------------------------------------- 

Il mio browser viene quindi aperto e tenta di caricare http://localhost:3000. A questo punto, vedo il seguente errore nella finestra del browser:

Cannot GET/

Cosa sto facendo male? Posso visitare con successo http://localhost:3000 se avvio la mia app utilizzando node ./src/server.js, tuttavia, è come se non fosse in esecuzione con BrowserSync. Che cosa sto facendo di sbagliato?

Answer 1

Hai già un server nodo, quindi penso che quello che ti serve è Proxy. E vorrei anche suggerire di utilizzare nodemon per fare un passo avanti nella tua cosa speed up development. In caso di eventuali modifiche, riavvierà automaticamente il server di sviluppo del nodo. Quindi un gulpfile campione nel tuo caso (con nodemon) potrebbe apparire come

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


gulp.task('browser-sync', ['nodemon'], function() { 
    browserSync.init(null, { 
     proxy: "http://localhost:3700", // port of node server 
    }); 
}); 

gulp.task('default', ['browser-sync'], function() { 
    gulp.watch(["./src/views/*.html"], reload); 
}); 

gulp.task('nodemon', function (cb) { 
    var callbackCalled = false; 
    return nodemon({script: './src/server.js'}).on('start', function() { 
     if (!callbackCalled) { 
      callbackCalled = true; 
      cb(); 
     } 
    }); 
}); 

~

Answer 2

Perché si desidera utilizzare il server integrato se si dispone di un proprio in ./src/server.js?

Controllare this, cosa server di in browsersync fa è creare un server statico per i siti web di base HTML/JS/CSS, quindi potrebbe essere necessario utilizzare il delega caratteristica come mostrato here. Ciò significa che è necessario eseguire il server normalmente e avvolgerlo nel proxy.