CodeSync not available

[jurgenhaas]

Just followed the instructions given on http://www.browsersync.io/ on my Ubuntu 15.04 laptop and BrowserSync is working for scrolling and links.

What's missing is the CodeSync option. It doesn't show up in the UI and hence code changes are not reloaded. However, when starting browser-sync from the command line using browser-sync start --proxy "mysite.localhost" --files "css/*.css" the console recognizes the file changes but they are not applied to any of the browsers.

I guess the fact that CodeSync doesn't show in the sync options of the UI is the reason why code changes are not applied to active browser sessions. But what can I do to make it available?

[shakyShane]

Can you try this recipe.

If you get css injection/reloading with that recipe, but not within your project then it's likely a configuration problem.

If you cannot get the recipe running either then please report back and we'll reopen the issue

[jurgenhaas]

@shakyShane unfortunately there is no recipe in your comment, maybe a copy & paste issue?

[shakyShane]

Fixed :)

[jurgenhaas]

Thanks, tried it and ended up with the exact same problem. The only sync options listed are Clicks, Scroll, Forms: submit, Forms: inputs, Forms: toggles. But CodeSync is still missing.

Some output during npm install:

npm WARN package.json bs-recipes-server@1.0.0 No repository field.
npm WARN optional dep failed, continuing fsevents@0.3.6

The missing fsevents is due to Ubuntu as far as I could find from Google searches. But I don't think that FS events are missing because the npm console is showing that it recognizes FS events, just the UI doesn't show them as options.

So, what's next that we could try?

[jurgenhaas]

I think this issue should be re-opened but I don't seem to have permission to do so.

[jurgenhaas]

What could be the reason of the problem, any help appreciated. I'm also willing to debug and providing more details shouldn't be a problem - but I need some guidance.

[shakyShane]

A short screencast showing the bug along with the source code would be really helpful as a start :)

[jurgenhaas]

Got it to run with that static sample from the recipe. Not sure what's different to last time.

Next, I then copied the package.json into a Drupal root directory:

{
  "name": "bs-recipes-server",
  "version": "1.0.0",
  "description": "Let me see this is working",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "license": "MIT",
  "dependencies": {
    "browser-sync": "^2.1.6"
  }
}

Also, I created a new app.js in the same directory:

/**
 * Require Browsersync
 */
var browserSync = require('browser-sync');

/**
 * Run Browsersync with server config
 */
browserSync({
  proxy: "http://crcfax.localhost",
  files: ["modules/system/*.css"]
});

Then I ran npm install and npm start which loaded http://localhost:3000 into my browser.

Now, when I edit the file modules/system/system.base.css that modification is indicated on the console: [BS] File changed: modules/system/system.base.css

But nothing gets changed in the browser. When reloading the page manually, the change is visible.

So, I looked into the HTML source and the edited file is referred to from within the head element like this:

<style>
@import url("//localhost:3000/modules/system/system.base.css?nrhdkt");
</style>

So, it's the correct file but still I don't get a live update. Any idea what could be the problem now?

[jurgenhaas]

Found the solution. @import is not supported obviously and I have to change the usage of CSS files while in development mode to <link type="text/css" rel="stylesheet" href="//localhost:3000/modules/system/system.base.css?nrhhuw" media="all" /> instead, then it's working.