• Skip to primary navigation
  • Skip to main content
  • Skip to footer

She's Gotta Develop It.com

Notes on web development and programming

  • About
  • Blog
  • Projects
  • code snippets

@snippets | Wednesday // December 12, 2018

Browsersync setup on Windows Ubuntu (WSL)

Helpful if you're taking Wes Bos's CSS Grid course

Browsersync CSS Grid Windows 10 WSL

4

I called myself spending maybe 1 -2 hours after work trying to learn CSS Grid and instead found myself in WSL hell trying to get my local CSS Grid learning environment identical to the instructors – SMH.

For anyone using Wes Bos’s CSS Grid course who is also on a Windows 10 machine and using Windows Ubuntu (WSL), you may run into issues in video #2 trying to run Browsersync. The program would load but for some odd reason, the browser window would not open from the command-line, I had to manually enter the localhost URL. So of course I went down the rabbit hole and I want to say …2 hours later figured out what may be the issue.

Old config that wasn’t working (based on package.json)

  • Ran npm iand installed the modules locally instead of symlinking like I usually do (e.g.npm link <package>)
  • Was running an older version of Browser-sync:  2.24.7
  • The npm start script automatically runs the linux script since you’re in WSL and not in a Windows shell, so you’ll need to add in a path to your Firefox Developer program. This might be where I made some mistakes because I was using the /mnt/c path. Although I’m certain I tried to just copy over the Windows path already included in the package.json Wes Bos prepared for course users.

How did I fix it?

  • Update Browsersync to latest version: 2.26.3
  • Replace the browser path for start:darwin:linux with this: “\”C:\\Program Files\\Firefox Developer Edition\\firefox.exe\”. FYI – this is the exact path Wes Bos included for Windows OS, but since you’re not running Git Bash, it is not recognized.
  • After a lot of tries, this worked and when I ran npm start, the browser window automatically opened.

Apparently a new update to a dependency of the Browsersync package was needed to fix this issue, and was reported… so maybe I was not trippin.

  • GitHub issue #1581

TLDR;

  • Replace the browser path with “\”C:\\Program Files\\Firefox Developer Edition\\firefox.exe\”
  • Upgrade your browsersync package to 2.26.3
  • Fin.

Post navigation

Previous:
Using the mklink command in Windows Ubuntu (WSL)
Next:
This Week in Coding: #012

Reader Interactions

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

Footer

Archives

  • April 2019
  • March 2019
  • January 2019
  • December 2018
  • November 2018
  • June 2017
  • May 2017
  • December 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016

Categories

  • @snippets
  • ~/notes
  • Code Reviews
  • Meetups & Events
  • Starter Packs
  • Weekly Updates
  • What I Learned Series
Copyright 2023 ❤ She's Gotta Develop It.com