Browsersync, Windows and Double Quotes

Earlier today, I was recording a video on Redux for WintellectNOW. For this video, I decided to use Browsersync and its live reload capabilities. Ordinarily, I code up my own Express-based web server, and I do not use live reload. I prefer to reload manually. Nevertheless, I know how much developers love to code with live reload, and so I began to use Lite Server created by John Papa for my demonstration. I am familiar with Lite Server from the Angular 2 QuickStart page. As I was configuring the development environment for my demonstration application, I discovered that Lite Server is a simply a wrapper around Browsersync. So I decided to use Browsersync directly.

At first, all went well. On my Mac, I installed Browsersync locally in my project.

$ npm i -D browser-sync

I configured my package.json file to use Browsersync from the command line.

"scripts": {
  // omitted for clarity...

  "web": "browser-sync start --server --files 'index.html' 'styles.css' 'js' --no-inject-changes",

  // omitted for clarity...
}

I fired up my web script and all worked well. Using Visual Studio Code, I coded up my demonstration application, as I saved each change to my files, the browser reloaded the page and the world was a happy place.

Recording Begins...

While I develop on my Mac, I typically record videos of a Windows virtual machine running on VirtualBox. I cloned the repository to the Windows VM, started up Browsersync, opened Visual Studio Code, made my first edits and the world was no longer a happy place. The live reload did not work. After some investigation, I determined that Browsersync was not seeing my file changes. Which was odd because it worked great on my Mac.

I did some searching around the web, and found some StackOverflow and GitHub postings discussing issues with Windows 10, but none of those issues applied in my situation. Nevertheless, I observed some of the command-line examples they had listed for those unrelated issues... Guess what was different about my configuration? I used single quotes versus double quotes for the file paths for the --files option. I had this,

--files 'index.html' 'styles.css' 'js'

when really I needed this.

--files \"index.html\" \"styles.css\" \"js"

Crazy right? But it worked. An hour lost because of single quotes versus double quotes. I updated my package.json scripts section to look like this...

"scripts": {
  // omitted for clarity...

  "web": "browser-sync start --server --files \"index.html\" \"styles.css\" \"js\" --no-inject-changes",

  // omitted for clarity...
}

I am not sure if this is really a Windows issue, or a Browsersync issue or whatever. But, it does underscore the importance of writing solid cross-platform code which is consistent.

With all that said, Browsersync is very cool, and you should check it out for your next project. Just be sure to use double quotes...