browsersync/browsersync.github.io

Source code for http://browsersync.io

browsersync.github.io's Issues

No refresh for Internet Explorer 11

From: getting-started guide
node: v6.9.5
yarn: 0.21.3
(Presumably I pulled the master branch here in the next step)
Installed: git clone -o react-starter-kit -b master --single-branch https://github.com/kriasoft/react-starter-kit.git react-app
Next step: yarn install
Finally: yarn start
OS: Windows 7 Professional 64-bit
IE URL automatically started: http://localhost:3001/

Bring up second URL for browserSync: http://localhost:3002/
Refreshing first tab and visiting second indicates that IE - (11.0) is attached.

Bring up http://IPADDRESS:3001/ from iPad.
browserSync indicates Mobile Safari - (9.0) is attached.

1. With everything running, edit src\components\Header\Header.js to change the title
2. Note that Safari on the iPad instantly updates with the new information
3. Note that IE 11 does not.
4. Press F5 on IE 11 and see the update.
5. Return to browserSync tab and verify that both browsers are still listed.

'a potentially dangerous' cookie problem

I'm trying to use browser-sync on Woindows 10 and experiencing a strange issue with cookie security, both in Chrome and FF.

browser-sync adds some of its code, looks like the local BS settings, to one of my website's cookies

<<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_START>>

the web browsers go bananas thinking it is HTML and won't reload the page without clearing cookies

I have tried setting-up chrome://flags/ but no luck there,
I've updated the npm, and bs to latest versions npm 8.1.2 and bs 2.27.7
The project I'm working on is a quite large .net web application, I'm trying to use browser-sync in proxy mode. The localhost is set-up with IIS.

launching BS from command line like so
browser-sync --files ....

load files to browser from a folder external to the directory with gulp file

Is there a way to load files from another directory at a different level?

Example
browserSync.init({
server: {
baseDir: ['./src', '../new-module/src'],
index: 'index.html',
middleware: [
historyApiFallback()
]
}

Embedded CSS ?

Can I still use BrowserSync if my CSS is embedded or must the CSS files be external ?

Secure Connection Failed on Firefox 49 on Windows 10

I can't open https://www.browsersync.io/ with Firefox 49 on Windows 10.
The help link on the bottom of the message where it mentions:

If you experience this problem, contact the owners of the website and ask them to update their TLS version to a version that is still current and still secure.

So please tend to this issue.

Gulp 4

This documentation page includes the line:

This will be easier in gulp 4.x.x…

Could an example of reloading the JS appropriately be provided?

I think many of us have started using Gulp 4 and guidance on this particularly would be really helpful.

Thank you.

Doc parsing

In the API doc for browserSync(), the link to the options page is broken because the url {{site.links.options}} isn't getting parsed. I found that it comes from https://github.com/BrowserSync/browser-sync/blob/master/index.js#L27

[Feature request] Arbitrary URL wrapper

What I've been trying to do is have two machines load the same webpage (Google, YouTube, Reddit) and have the scrolls and clicks mirrored across the machines.

I've tried to load them in an iframe but still doesn't work.

My idea was, if it's possible, was to have a URL bar in the management console (3001 by default) where you could tell all the connected browsers to load.

External url does not work.

tldr; external url cannot be accessed from other devices.

Any help is much appreciated! - I can view the external url from my development machine but not from any other devices on the same wifi network. I have tried several configuration modifications but none have solved this. I appreciate any help on this!

Link in header is wrong

Is https://github.com/shakyShane/browser-sync but should be https://github.com/BrowserSync/browser-sync

Feature Request: Extended documentation and recipe for 'tunnel' feature and external url

a ) Been using this plugin for a while now. Awesome features, but could not get the tunnel feature to work. When I checked the documentation, I simply found that it is a boolean value. @wesbos on issue #978 in /browser-sync commented that it would not not in his case because:

I was compiling my JS before I started browsr-sync

It would be nice to tell the new users that they should prepare their gulpfiles accordingly. Still haven't been able to make it work in my project though.

b) Although there are many issues regarding this on /browser-sync, a more detailed documentation for external url along with a recipe and common mistakes, if added, would make this plugin even better than it currently is. Thanks in advance!

localStorage event triggers undesired browserSync reload

Browser = Firefox 46.0.1. Maybe others also.

The following line results in an undesired browsersync reload event when a localStorage change occurs:
gulp.watch(paths.source, ['build-system', browserSync.reload]).on('change', reportChange);

paths.source is from the following object:

module.exports = {
  root: appRoot,
  source: appRoot + '**/*.js',
  html: appRoot + '**/*.html',
  css: appRoot + '**/*.css',
  style: 'styles/**/*.css',
  output: outputRoot,
  exportSrv: exportSrvRoot,
  doc: './doc',
  e2eSpecsSrc: 'test/e2e/src/**/*.js',
  e2eSpecsDist: 'test/e2e/dist/'
};

This seems to be a bug because that source file which is referred to does not change when a localStorage event fires.

If I'm not mistaken this renders BrowserSync incompatible with an entire pattern which is pretty common which is using localStorage messages to communicate between tabs/windows/pages in an app.

Here's a specific repo if you'd like to look at the wider code context: https://github.com/Vandivier/card-game-aurelia/tree/master/client

Middleware Override Option

I was perusing through the BrowserSync code, checking for why middleware don't activate when in serve-static mode. I think I found the answer: there is an undocumented optional switch in each item in the array of middleware that are added with the middleware option, called "override", that determines whether the middleware comes before or after the built-in middleware. I just tested and this works.

Could this amazing functionality be better documented, so no one else has to spend time looking for it like me?

Erroneous command line example

I'm pretty sure the example from https://browsersync.io/docs/command-line $ browser-sync start -s 'app' '.tmp' -f 'app' '.tmp' doesn't work but should be $ browser-sync start -s 'app' -s '.tmp' -f 'app' '.tmp'

BrowserSync crashing the OS

Am using browser sync with proxy mode in my MVC based angular app.
It works fine, but some times it crashing the OS , all of sudden i see blue screen(watch dog violation).It happened 4 times in one week.
OS:windows 10
browsersync version:2.18.12
below is the usage of browser sync

var bs = require('browser-sync').create('DevServer');

bs.emitter.on("init", function () {
console.log("Browsersync is initilizing..!");
});
bs.emitter.on('service:exit', function () {
console.log('exiting');
});

bs.init({
proxy: 'localhost:36865',
reloadDelay: 2000,
browser: 'chrome',
files: [
{
match: ["./dist/.js"],
watchevents: ["add"],
fn: function (event, file) {
var eventname = event ? event : '';
var filename = file ? file : '';
console.log(eventname + ' :' + filename);
if (event === 'add' || event === 'change')
bs.reload();
},
options: {
ignoreInitial: true,
ignored: '.txt'
}
},
{
match: ["./content/less/*.css"],
watchevents: ["change"],
injectChanges: true
}
]
}, function () {
console.log('browser sync started');
});

Links to options broken on headers (options page)

/docs/gulp/index.html : 223 line

/docs/gulp/index.html : 223 line, it seems missed "init".

As is,

    <span class="hljs-comment">// Serve files from the root of this project</span>
    browserSync({
        server: {
            baseDir: <span class="hljs-string">"./"</span>
        }
    });

To be,

    <span class="hljs-comment">// Serve files from the root of this project</span>
    browserSync.init({
        server: {
            baseDir: <span class="hljs-string">"./"</span>
        }
    });

empty new lines are being stripped from highlighted code blocks

Blank meta description tag on every page

On every page there's a blank meta description page, prior to one a few lines down filled with a description. It could do with being removed.

Firefox [dev] not working with browswersync

I don't know if this is just a matter of finding the write settings on browsersync, but I cannot get Firefox Dev to work with browsersync. I have tried all the solutions I could find on the web and none seem to work. Issue is that it loads the initial page but then seems to keep reloading (redirecting or something) before pulling the page. I can log into my site, but then pages stop loading. If you click a link it just refreshes the page you are on. Dynamically created modals work though...

gulp.watch examples

Hi, I would like to submit a PR with an example for using browserSync.reload with gulp.watch, I noticed the existing examples are along the lines of:

var foo = require('gulp-foo');
var bar = require('gulp-bar');
var browserSync = require('browser-sync');

gulp.task('foo', function () {
  return gulp.src('foo/*.foo')
    .pipe(foo())
    .pipe(gulp.dest('dist'));
});

gulp.task('bar', function () {
  return gulp.src('bar/*.bar')
    .pipe(bar())
    .pipe(gulp.dest('dist'));
});

gulp.task('browser-sync', function () {
  browserSync({
    // ...
  });

  gulp.watch('foo/*.foo', ['foo', browserSync.reload]);
  gulp.watch('bar/*.bar', ['bar', browserSync.reload]);
});

But as there can be quite a few gulp.watches in a larger project, wouldn't this make more sense?

// ...

gulp.task('browser-sync', function () {
  browserSync({
    // ...
  });

  gulp.watch([
    'dist/*.foo'
    'dist/*.bar'
  ]).on('change', browserSync.reload);

  gulp.watch('foo/*.foo', ['foo']);
  gulp.watch('bar/*.bar', ['bar']);
});

browser sync

please how can i stop my browser from syncing

__bs_script__ not injected when theres a "commented out" body tag

I've noticed if i have a "commented out" body tag before the real body tag the script injection of the "bs_script" simply doesn't work

...

Updating _doc/*.json generates noisy diff

Like 881ca71#diff-f63bc924b61374f1fda1e1caa1070f49

When I build this site all the file properties will be updated, because my machine doesn't have /Users/shakyshane directory (of course).

@shakyShane Should _doc/*.json be included in the repository? Or can we add them to .gitignore?

Update the Google logo on homepage

Google changed their logo last year, would be good to update it.

sudo install -g

In your docs, you guys recommend against using sudo for a -g install. The site you point to recommends chowning /usr to the current user (or /usr/local)! From a security standpoint, this is an extremely bad idea - it lets anything the current user runs modify binaries and libraries for the entire system.

Even if I just chown /usr/lib/node_modules, that's still not a great idea.

Secondly, if I install browser-sync locally (no -g), there's no 'bin' directory under ~/node_modules/browser-sync, nor does it put its binary in ~/node_modules/.bin. I'm not an npm expert, but if I look at how bower installs itself, there's ~/node_modules/.bin/bower.

Maybe support for local installs is still in the making?

Default value of option "open"

When reading about the option "open" I came across this part:

Defaults to "local" if none set.

But checking the spec it states: Default: true. So I was wondering if the default value is true or 'local'? Or is 'local' only set when declaring: open: ''?

Email signup form submission results in 'Missing Page' error

I tried to sign up to the email list using the submission form at the bottom of https://www.browsersync.io/

When I submitted the form with my email address it returned the mailchimp 404 page.

I could not sign up to the mailing list.

browsersync.io is down

Since 15. Jan. 2018 https://browsersync.io is not available. I think expired (Registry Expiry Date: 2018-01-15T12:13:55Z)

http://whois.domaintools.com/browsersync.io

EDIT: It's still available via https://178.62.65.113

/docs/options/ - default rendering issue

http://www.browsersync.io/docs/options/#snippetOptions

"rule.match - Default: /<body[^>]*>/i" is displaying as HTML entities and not rendering the tag output properly.

Note: Github just renders the text in this issue, which isn't hugely helpful so i've attached an image.

browsersync.io is down

Site's been offline for a few days

Available options link not working

The "Avaliable options" link in the docs under browserSync( config, cb ) config section is broken.

Firefox URL mangled when using browser sync

This doesn't happen if you use Firefox or Chrome alone. But if both Firefox and Chrome are oped at the same time. The Firefox URL will get manged after creating a record in a Jhipster app. I opened issue jhipster/generator-jhipster#1483 on JHipster, but they said it is a BrowserSync issue.

How to reproduce:

1. Created a new jHipster app
2. Added an entity
3. Use Firefox to add a record
4. Open Chrome, log in using the same account.
5. Firefox URL now looks like GET request with all the entity fields as request params.

Installation instructions fail in Debian Jessie

The installation instructions at http://www.browsersync.io say:

Get started in 5 minutes.

1. Install Node.js

Browsersync is a module for Node.js, a platform for fast network applications. There are convenient > installers for MacOS, Windows and Linux.

OK. I followed the link, which linked in turn to this page for installation on Debian, which says, "A Node.js package is also available in the official repo for Debian Sid (unstable), Jessie (testing) and Wheezy (wheezy-backports) as "nodejs"."

Great. # apt-get install nodejs reported no errors.

Your installation instructions continue:

1. Install Browsersync

The Node.js package manager (npm) is used to install Browsersync from a repository. Open a terminal window and run the following command:

npm install -g browser-sync

That didn't work:

$ npm install -g browser-sync
bash: npm: command not found

Hm, that's a bug in your instructions. OK, maybe there's a workaround? I tried # apt-get install npm, which reported no errors.

Now, though, when I run your suggested install command, I get this output:

$ npm install -g browser-sync
npm ERR! Error: EACCES, mkdir '/usr/local/lib/node_modules'
npm ERR!  { [Error: EACCES, mkdir '/usr/local/lib/node_modules']
npm ERR!   errno: 3,
npm ERR!   code: 'EACCES',
npm ERR!   path: '/usr/local/lib/node_modules',
npm ERR!   fstream_type: 'Directory',
npm ERR!   fstream_path: '/usr/local/lib/node_modules/browser-sync',
npm ERR!   fstream_class: 'DirWriter',
npm ERR!   fstream_stack: 
npm ERR!    [ '/usr/lib/nodejs/fstream/lib/writer.js:171:23',
npm ERR!      '/usr/lib/nodejs/mkdirp/index.js:46:53',
npm ERR!      'Object.oncomplete (fs.js:107:15)' ] }
npm ERR! 
npm ERR! Please try running this command again as root/Administrator.

npm ERR! System Linux 3.16.0-4-686-pae
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install" "-g" "browser-sync"
npm ERR! cwd /home/sampablokuper
npm ERR! node -v v0.10.29
npm ERR! npm -v 1.4.21
npm ERR! path /usr/local/lib/node_modules
npm ERR! fstream_path /usr/local/lib/node_modules/browser-sync
npm ERR! fstream_type Directory
npm ERR! fstream_class DirWriter
npm ERR! code EACCES
npm ERR! errno 3
npm ERR! stack Error: EACCES, mkdir '/usr/local/lib/node_modules'
npm ERR! fstream_stack /usr/lib/nodejs/fstream/lib/writer.js:171:23
npm ERR! fstream_stack /usr/lib/nodejs/mkdirp/index.js:46:53
npm ERR! fstream_stack Object.oncomplete (fs.js:107:15)
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /home/sampablokuper/npm-debug.log
npm ERR! not ok code 0

Running npm install -g as root/sudo seems like bad advice, so I'm not going to do that just yet. That leaves me without a working installation of BrowserSync, so the installation instructions have proven inadequate to get a Debian Jessie user to the point of having a working BrowserSync install.

(Also, this took more than 5 minutes.)

Hope a resolution for this can be found, as I'd love to try BrowserSync!

Visual Studio needed on Windows

I don't know why, but this seems an issue only to me with a 128Gb SSD only in my laptop and no need for VS.
The size of VS is HUGE, I can get a virtualbox + linux + docker + browser-sync + rsync stack in 1/19th of the size of VS but seems overkill for just creating a proxy + js that refreshes the page when a file is changed.

I first thought browsersync was a pretty good one install solution... I don't understand why everyone hates windows so much, this was probably done on purpose.

Even better this gave me an idea to create a browser-sync tunnel service for sublime text.

Gulp 4.x.x repo url moved

Check Browser Reloading section on the doc + Gulp.js, and the Gulp repository url (follow this documentation) not found, maybe changed to this url https://github.com/gulpjs/gulp/blob/master/docs/recipes/minimal-browsersync-setup-with-gulp4.md. Thanks!

Incorrect comments in reload command line examples

The comments that accompany the seconds two reload examples in the command-line docs (source command-line.hbs) are incorrect.

The text:

# Reload assuming standard address of http://localhost:3000

seem to have been copied/pasted from the first example but not changed accordingly.

Page intros need markdown parsing

http://www.browsersync.io/docs/gulp/