Express combined with browser-sync with node

browsersync express
gulp browser-sync
browsersync proxy
how to use browser-sync
in order to install browser-sync what must be installed first
browsersync proxy not working
browsersync config file
gulp-express

I am very new to the world of JavaScript and i am trying to build my development environment for the first time what i want to achieve should be simple...

I want to run an Express server along with browser-sync for hot reloading i am not using gulp or grunt

but i keep getting this error:

Starting the application in the development mode...
[BS] Proxying: http://localhost:3000
[BS] Access URLs:
 ------------------------------------
    Local: http://localhost:3000
 External: http://10.111.234.196:3000
 ------------------------------------
[BS] Watching files...
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::3000

this is what my my scripts look like in the package.jason file

"scripts": {
"prestart": "babel-node buildScripts/startMessage.js",
"start": "npm-run-all --parallel security-check open:src",
"open:src": "babel-node buildScripts/srcServer.js & browser-sync start --proxy 'localhost:3000' --files 'src' --no-ui",
"security-check": "nsp check"
},

in the srcServer.js :

import express from 'express';
import path  from 'path';
import open  from 'open';

const port = 3000;
const app = express();


app.get('/', function(request, response){
response.sendFile(path.join(__dirname, '../src/index.html'));
});

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

and in the bs-config.js file is the default one i just changed ui to false

This question gave me the hint to use the proxy but i still get that error that i have no idea why ...please enlighten me i want to understand what's wrong

That error means you already have something running on port 3000. Likely another instance of the same project running in a different window. :)

javascript - Express combined with browser-sync with node, That error means you already have something running on port 3000. Likely another instance of the same project running in a different window. :). @schmittyjd the callback function is basically the task function for the browser-sync task. We ask gulp to execute the nodemon task before executing the body of the browser-sync task. The callback ensures that the task function of browser-sync is called after the express server is started.

I faced the similar issue. Looks like BrowserSync is not working with Express on the same port anymore. I managed to run both of them on different ports with connect-browser-sync middleware.

It is my server.js:

var express = require('express'),
    bodyParser = require('body-parser'),
    http = require('http'),
    path = require('path'),
    cors = require('cors');


// Express server
var app = module.exports = express();
app.set('port', process.env.PORT || 3000);


// BrowserSync at development host
if (app.get('env') === 'development') {
    var browserSync = require('browser-sync'),
    var bsconf = {
        host: 'localhost',
        port: 3001,
        https: false,
        notify: false,
        open: false,
        online: false,
        ui: false,
        server: {
            baseDir: path.join(__dirname, '/public')
        },
        files: [path.join(__dirname, '/public/**/*.{html,css,js,json}')]
    };  
    var bs = browserSync.create().init(bsconf);

    app.use(require('connect-browser-sync')(bs));
}

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));
app.use(cors());


// Route index.html
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});


// Starting express server
http.createServer(app).listen(app.get('port'), function () {
    console.log('Listening on port ' + app.get('port') + '...');
});

On port 3000 there is an Express server (with no page auto reload). And on port 3001 there is BrowserSync server serving the same content with page auto reload.

Express with Nodemon & Browsersync, Express with Nodemon & Browsersync. Auto restart ExpressJS server and auto reload browser on file changes. Functionality. This setup uses file watchers when​  browser-sync + nodemon + expressjs A gulp recipe using vanilla browser-sync and gulp-nodemon to run an ExpressJS server app with live-reloading. With the combination of these two, we can achieve the following use-cases: Inject changes into loaded page, when CSS or images are modified, without reloading the whole page.

I don't know why but without npm-run-all browser-sync automatically shifted the port to 3001. After I tried using npm-run-all it seemed to not automatically shift the port. So I think you have to specify it like this:

"browser-sync": "browser-sync start--proxy=localhost:3000 --port=3001 --files=views"

Or at least that worked for me :)

Gulp, BrowserSync, Node, and Nodemon all working in harmony , Gulp, BrowserSync, Node, and Nodemon all working in harmony. ;). app.js. /**. * World's simplest express server proxy: "localhost:3000", // local node app address I can combine all 3 to get CSS stream reloading and html reloading. Building a REST-Backend for Angular with Node.js & Express. Angular is a single page application framework. Unfortunately, that does not mean that you don't require a server for certain tasks. After all, your data has to be served from somewhere But don't worry, setting up a server is easier than you might think.

gulp + expressjs + nodemon + browser-sync · GitHub, gulp + expressjs + nodemon + browser-sync simple express server function of browser-sync is called after the express server is started. Express.js or Express is a Web application framework for Node.js designed for building Web applications and APIs. It is the de facto standard server framework for Node.js. Express is also the back-end part of the MEAN stack, together with the MongoDB database and the AngularJS front-end framework.

Setting up Nodemon, Browsersync and Gulp to work together, Setting up Nodemon, Browsersync and Gulp to work together browserSync.init(​null, { console.log(`Express server listening on port ${config.port}`); });. Express Overview. Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based Web applications. Allows to set up middlewares to respond to HTTP Requests.

Setting up Browsersync with Gulp 4 and Express, In the book, there is a great example, of setting up Browsersync to get live reloading of which means you need to also have gulp start a server, eg with nodemon. So, I decided to combine the knowledge from these sources and create a  Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy. Express provides a thin layer of fundamental web application features, without obscuring Node

Comments
  • I have killed all instance of node and tried again all what i get is an infinite loading on the browser and that error on the console... and BTW is my logic fine with having express and browser-sync all together what attracted me to browser-sync is the ability to keep hot reloading feature even when sharing is there an alternative to this?
  • it's finally working! but it's on a different port so now i have two tabs open one on 3000 and the other one on 3001 how to get both on the same port?