Search code examples
javascriptbrowserideheadlessbrowser-sync

Browsersync IDE error "Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)"

I'm stuck on lesson 19 of this course - https://javascript30.com/ - which uses Browsersync to provide access to the webcam.

These are the files I'm working with: https://github.com/wesbos/JavaScript30/tree/master/19%20-%20Webcam%20Fun

Having run npm install I get this error when trying to run the package that includes Browsersync and none of the URLs below work for me:

~/JavaScript30-master/JavaScript30-master/19 - Webcam Fun/ $ npm start

> gum@1.0.0 start /home/ubuntu/JavaScript30-master/JavaScript30-master/19 - Webcam Fun
> browser-sync start --server --files "*.css, *.html, *.js"

[Browsersync] Access URLs:
 ---------------------------------------
       Local: http://localhost:3000
    External: http://192.168.35.240:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.35.240:3001
 ---------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...
[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

I'm using an IDE that I've stuck with since doing Harvard's CS50 course in Chrome [Version 91.0.4472.77 (Official Build) (64-bit)] on a DELL laptop running 64-bit Windows 10 Enterprise. Also tried using Brave [Version 1.25.70 Chromium: 91.0.4472.77 (Official Build) (64-bit)].

I've checked Browsersync docs, searched the web, YouTube and Browsersync Slack, and looked at the following:

  1. Browser-sync Cannot GET /
  2. browser-sync not working with single page application
  3. BrowserSync Gulp doesn't open in Chrome
  4. Browsersync "browser" option in Ubuntu 16.04
  5. BROWSER SYNC headless environment ERROR
  6. https://github.com/BrowserSync/browser-sync/wiki/Working-with-a-Config-File

I'm still quite new to coding and suddenly feel very out of my depth!

Any help appreciated.

Thanks!

Solution

  • The CS50 IDE provides a "cloud-based Ubuntu environment", but that means "localhost" according to the browsersync output you're seeing isn't your localhost ― it's the localhost of that cloud environment.

    (And the "External" direct IP access will be incorrect too, since it references a local network that your computer isn't attached to.)

    The IDE might provide a way for you to access a server that's running in this way, but I suspect a simpler path is to run the start script directly on your local machine.