Cannot get BrowserSync to work on Cloud9

[blipps199]

I have been trying for hours to get BrowserSync running on Clould9 which is a cloud based IDE within AWS. When I run "gulp watch-bs" it's watching for file edits and does see them. However, my Cloud9 development domain is not reloading. I assume it's trying to connect to a browser on the Cloud9 VM. Is there a way to get this working?

[0dp]

Have you configured the browsersync options in the config file?

[blipps199]

Have you configured the browsersync options in the config file?

Thanks for the reply. Yes, but only the proxy setting. This is what I have and it's 99% the default config file. Apologies for the formatting. It's not formatting the same as what's in the file.

I want to note a correction as well in my original comment. I meant to type out "cloud" but typed "browser" instead. Cloud9 is a cloud IDE so it's not running locally on my PC.

{ "browserSyncOptions" : { "proxy": "https://MYC9INSTANCE.vfs.cloud9.us-east-1.amazonaws.com/", "notify": true, "files": ["./css/*.min.css", "./js/*.min.js", "./**/*.php"] }, "paths" : { "js": "./js", "css": "./css", "fonts": "./fonts", "img": "./img", "imgsrc": "./src/img", "sass": "./sass", "node": "./node_modules/", "composer": "./vendor", "dev": "./src", "dist": "./dist", "distprod": "./dist-product", "vendor": "" } }

[0dp]

And when you execute gulp watch-bsdo you get console output reporting the browsersync is running on that address and port number?

[blipps199]

This is what I get when I run "gulp watch-bs"

`[12:34:49] Using gulpfile ~/environment/Projects/mywebsite/wp-content/themes/understrap-child/gulpfile.js [12:34:49] Starting 'watch-bs'... [12:34:49] Starting 'browser-sync'... [12:34:49] Starting 'watch'... [Browsersync] Proxying: https://MYC9INSTANCE.vfs.cloud9.us-east-1.amazonaws.com [Browsersync] Access URLs:

   Local: https://localhost:3000
External: https://xxx.xx.x.xxx:3000

---

      UI: http://localhost:3001

UI External: http://localhost:3001

[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)`

[0dp]

And what happens if you open your siteurl with :3000 appended in the browser?

Update: It might be worth checking if the default port is available in the service. I read a post who mentions using port 8080 and 8081 on cloud9. Might be worth to test out

[blipps199]

If I append the port to the end of the siteurl it just hangs. Not much is happening.

Edit: I did just learned that ports 3000 & 3001 are closed in my C9 instance. I'm wondering if that is the issue? Is there a way to change the port to 8080 or 8081 for browsersync?

[0dp]

add "port": 8080 to the config.

{
  "browserSyncOptions" : {
    "proxy": "localhost/",
    "port": 8080,
    "notify": false,
    "files": ["./css/*.min.css", "./js/*.min.js", "./**/*.php"]
  },
  "paths" : {
    "js": "./js",
    "css": "./css",
    "fonts": "./fonts",
    "img": "./img",
    "imgsrc": "./src/img",
    "sass": "./sass",
    "node": "./node_modules/",
    "composer": "./vendor",
    "dev": "./src",
    "dist": "./dist",
    "distprod": "./dist-product",
    "vendor": ""
  }
}

[blipps199]

We have made a bit of progress but it seems like the js script is 404ing or pending in the network tab when trying to connect through my local siteurl. However, when running through the external IP browsersync appears to work but that won't work as I need to develop through the c9 siteurl. Trying to troubleshoot now...

[0dp]

and you've tried to proxy to the URL that you want to view the changes on?

[blipps199]

We got it working.

browser-sync needs to be at version 2.24.7

Ports had to be modified to use 8081 and 8082 (This was cloud9 specific, AWS doesn't allow other ports through the vfs connection) and the hosts needed to be set to localhost (Another cloud9 specific issue)

Thanks for the help!

[0dp]

Happy to hear you made it work.

Please close if the issue is resolved 😉