search

angular-fullstack / generator-angular-fullstack

Yeoman generator for an Angular app with an Express server
https://awk34.gitbook.io/generator-angular-fullstack
6.12k stars 1.24k forks source link

Gulp + Browsersync on Vagrant VM does not work #2202

Open samsfisher opened 8 years ago

samsfisher commented 8 years ago
Item Version
generator-angular-fullstack 4.0.4
Node 5.12.0
npm 3.10.6
Operating System Ubuntu VM on windows 7 host
Item Answer
Transpiler Babel
Markup HTML
CSS SCSS
Router ui-router
Client Tests Jasmine a
DB SQL
Auth N

In the current setup i am able to see the development website on localhost:3000 in the host machine. However, i dont see the UI in localhost:3002 and the polling call in localhost:3001 is failing. I have forwarded the ports (3000,3001, 3002 and 9000) from VM to host machine.

After reading through broswer sync support here is what i found

https://github.com/BrowserSync/browser-sync/issues/318 https://gist.github.com/HPieters/88dd18e99c8925b2cabb

The browsersync and watch task need to be running on the same process for it to work through VM. Is there an alternative? i really like the generator and have been using for many projects. I had good success with livereload and grunt/gulp. While i like gulp and browsersync need to figure out a way to solve the shared ports..

Awk34 commented 7 years ago

I'm not familiar with Vagrant. I use Docker w/ HyperV on Windows :/

Maybe make sure port 8080 is forwarded as well?

samsfisher commented 7 years ago

Hey, yes 8080 is forwarded as well.

I believe the browsersync init needs to happen with gulpfile.js rather than in express.js.

Any reason why the browsersync needs to be started in express.js

Awk34 commented 7 years ago

I moved the old livereload code into express.js because there were issues with the webpack dev server and trying to trigger livereload changes, due to the full-stack nature of the apps produced, whereas almost all of the tools/examples of similar solutions are meant for front-end only applications. So instead, we use the webpack dev middleware for Express.