Express and BrowserSync without gulp?
I'm working on an express app. I used browserSync only to watch static files but now, I want to do the same with an express app.
I saw a lot of examples using Gulp. But i wonder if there is any solution to manage only with npm scripts? (and nodemon?)
My current scripts:
"scripts": {
"start": "npm run start-server & npm run watch-js",
"build-js": "browserify -t babelify -t aliasify -t partialify src/ | uglifyjs > public/app.js",
"start-server": "browser-sync start --server 'public/' --files 'public/' --port 9000 --no-ui",
"watch-js": "watchify -vd -t babelify -t aliasify -t partialify src/ -o public/app.js",
},
Answer
Thank you to @lim-h for help, indeed it's possible to add the param --proxy (-P) to browser-sync start browsersync.io/docs/command-line
You can download the demo here https://github.com/damienromito/express-sync
After start the express server, add the --proxy option to browser-sync start
Example
node app & browser-sync start --proxy 'localhost:9000' --files 'public'"
corresponding app.js :
var express = require('express'),
app = express(),
router = express.Router()
app.use(router)
app.use('/public', express.static('public'));
router.all('/', function (req, res, next) {
res.send('<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<title>Whyd Store</title>' +
'<link rel="stylesheet" type="text/css" href="public/style.css">' +
'</head>' +
'<body>' +
'<p>Hello World</p>' +
'</body>' +
'</html>')
});
app.listen(9000);
module.exports = app;
NOTE: To test browser-sync with this sample project, I update a style.css file in the /public folder