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.

TLDR;

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

Leave a Reply

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