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)
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
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 the
package.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.
- Replace the browser path with “\”C:\\Program Files\\Firefox Developer Edition\\firefox.exe\”
- Upgrade your browsersync package to 2.26.3