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 startscript 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/cpath. Although I’m certain I tried to just copy over the Windows path already included in thepackage.jsonWes 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.