node.js - How to setup gulp browser-sync for a node / react project that uses dynamic url routing -

i trying add browsersync react.js node project. problem project manages url routing, listening port , mongoose connection through server.js file when run browser-sync task , check localhost url http://localhost:3000 cannot /.

is there way force browser-sync use server.js file? should using secondary nodemon server or (and if how can cross-browser syncing work)? lost , examples have seen add more confusion. help!!

gulp.task('browser-sync', function() {     browsersync({         server: {             basedir: "./"         },         files: [             'static/**/*.*',             '!static/js/bundle.js'         ],     }); }); 

we had similar issue able fix using proxy-middleware(https://www.npmjs.com/package/proxy-middleware). browsersync lets add middleware can process each request. here trimmed down example of doing:

var proxy = require('proxy-middleware'); var url = require('url');  // base url forward requests var proxyoptions = url.parse('https://appserver:8080/api'); // route browsersync should forward gateway proxyoptions.route = '/api'  // ajax request browsersync http://localhost:3000/api/users  // sent via proxy http://appserver:8080/api/users while letting requests // don't have /api @ beginning of path fall default behavior.  browsersync({     // other browsersync options     // ....     server: {         middleware: [             // proxy /api requests api gateway             proxy(proxyoptions)         ]     } }); 

the cool thing can change proxy pointed, can test against different environments. 1 thing note of our routes start /api makes approach lot easier. little more tricky pick , choose routes proxy example above give starting point.

the other option use cors, if aren't dealing in production may not worth messing dev environment.