Develop Reference

Webpack DevServer host 0.0.0.0 not working on Windows

The following Webpack dev server configuration works without errors on macos system:
module.exports = {
// [...]
devServer: {
host: 0.0.0.0,
port: 8080,
contentBase: "/dist",
hot: true,
inline: true,
watchOptions: {
poll: true
}
},
// [...]
}
I can access the web app from mobile device connected to the same network and using the local ip of the machine (192.168.1.65:8080).
The same configuration does not work on Windows, it seems it can't open 0.0.0.0 on the browser. But using any other ip other than 0.0.0.0 does not let access from mobile devices. Does anyone know how to fix this issue on Windows?

0.0.0.0 is a non-routable meta-address used to designate an invalid, unknown, or non-applicable target (a ‘no particular address’ place holder).

How do I set up AWS Cloud9 to run an existing JavaScript app with webpack-dev-server (in development mode)?

I am trying to get my fairly typical JavaScript (React) app to run in dev mode on AWS Cloud9. I successfully cloned my repo (using https ugh), installed my npm packages, and can run scripts in the console. However, I don't know how to run and access the app in dev mode. There are a plethora of docs but they all seem to dance around the running part. My guess is I need to somehow set a custom host and port, but I also need to find what URL to use to see the app running.
Here is my devServer config:
devServer: {
// Display only errors to reduce the amount of output.
stats: "errors-only",
host, // Defaults to `localhost`
port, // Defaults to 8080
overlay: {
errors: true,
warnings: true,
},
}

If anyone comes across this, I wanted to share my solution because I know how frustrating this can be:
First, create a script in your package.json file:
"start": "webpack-dev-server --open"
Then, add the following to your Webpack config file:
devServer: {
contentBase: path.join(__dirname, 'dist'),
host: '0.0.0.0',
port: 8080,
compress: true,
}
Then, open the terminal in AWS Cloud 9, and run the script:
npm start
Finally, click on the link in the terminal: "Project is running at http://0.0.0.0:8080/" and your app will show in a new window.
**If it doesn't work, don't forget to allow port 80 on your Cloud 9 Security Group: https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/working-with-security-groups.html#adding-security-group-rule
If you want to view the project in the preview pane, you can add the following to your devServer config:
disableHostCheck: true,
However, it's important to note that when set to true, this option bypasses host checking. THIS IS NOT RECOMMENDED as apps that do not check the host are vulnerable to DNS rebinding attacks.

1) First thing you need to do is to run react app on port 8080. You can do this by setting environment variable PORT to 8080 and then just starting react dev server from AWS Cloud9 terminal.
export PORT=8080
npm start
For details look at this discussion on GitHub.
2) After starting your application you can preview it by clicking Preview -> Preview Running Application at the top of AWS Cloud9.
For more details check this AWS Cloud9 doc

In webpack.config.js:
devServer: {
historyApiFallback: true,
contentBase: './',
host: process.env.IP,
//https: true,
port: process.env.PORT,
"public": "your-project.c9users.io" //no trailing slash
},
Refer Link

Browser-sync not watching files

I am having problems with browser-sync. When I first installed, it was working, but now it no longer refreshs my index page when I make modifications to it and save. I noticed that when I start browser-sync, it no longer show the "[BS]Watching files..." message.
Have I missed any steps?
Prompt output

Just add the command "--watch" when using the command line.
Like this:
browser-sync start --server --watch --files "*"

Blisk browser was a great option, as suggested by Darren, but now it is paid.
Got browser sync working with gulp as suggested by this discussion https://github.com/BrowserSync/browser-sync/issues/646
Config:
gulp.task('browserSync', function() {
browserSync.init({
open: 'external',
host: 'coolab.dev',
proxy: 'coolab.dev/dashboard',
port: 3000
});
});

How to open a new browser window using gulp-connect?

I would like to open a browser window when my web-server is running, at the moment I am using this, but I am not able to open the browser, any idea what is wrong in my code?
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('webserver', function () {
connect.server({
root: "../../../www/",
livereload: true,
open: {
browser: 'chrome', // if not working OS X browser: 'Google Chrome'
url: 'http://localhost:8080/site/a/index.html?dev'
}
});
});

In my opinion, instead of a specific gulp task, you could just use a native node module, "opn" https://www.npmjs.com/package/opn
npm install --save-dev opn
Then in whatever callback your server module uses:
require("opn")("http://localhost:8080/site/a/index.html?dev",
{app: ['google chrome', '--incognito']})
gulp-connect doesn't look like it provides a callback, but you can probably just run the open task serially, or after a short wait. Other competitors to gulp-connect do provide a callback, which allows nice things like passing port/ip etc. dynamically to opn, allowing you to further configure what happens (browsersync, for instance, dynamically checks and uses an free port, and then passes along information about which port it used, which allows opn to open the correct local port automatically even if it changes from time to time. ).

gulp browser sync open chrome only

I am attempting to open Chrome and Firefox when browser-sync module initializes the web server.
My gulp task has the following:
browserSync.init(null, {
files: config.destination.root + '/**/*',
browser: ["google chrome", "firefox"],
port: config.port,
notify: false,
server: {
baseDir: config.destination.root
},
startPath: config.pocSuffix
}, callback);
My current default is set to IE.
It is still opening only IE. How do i troubleshoot this?

To me it seems that neither "google chrome" nor "firefox" was found in your instance, and that IE then kicked in as the default one.
In my scenario I have a Ubuntu 15.10 minimal install with openbox, and chrome set as default browser. Various configurations and results follows:
No browsersync browser set. spawns firefox
"google chrome" set. error: spawn google chrome ENOENT.
"chrome" set. error: spawn google chrome ENOENT.
"google-chrome" set in browsersync. spawns chrome
Using "chrome" solved it for you. Using "google-chrome" solved it for me.
Mentioning it as an answer, in case someone ends up here by googling the issue.