search

geerlingguy / drupal-vm

A VM for Drupal development
https://www.drupalvm.com/
MIT License
1.37k stars 647 forks source link

unable to get zen's browsersync to work with drupalvm #740

Closed frob closed 8 years ago

frob commented 8 years ago

I was digging into the latest zen release and I was unable to get the browser sync option to work with drupalvm.

I was working locally and syncing files via nfs

This is drupal7 running on ubuntu1404/nignx/php5.6

I read there was a bug with the sendfile paramater and virtualbox. But even after disabling it, it still doesn't work.

oxyc commented 8 years ago

Did you configure options.drupalURL = 'http://drupalvm.dev';?

kevinquillen commented 8 years ago

Not sure how it works in Zen, but it works for me with my theme. Same setup (except apache vs nginx). How is your Browser Sync configured?

geerlingguy commented 8 years ago

I'm wondering if this is something that should be approached in the Zen project—I know there was significant refactoring in the latest release, and maybe it's just something that needs fixing/docs upstream?

frob commented 8 years ago

There is an issue in d.o https://www.drupal.org/node/2742965

All my googling has told me about issues using various configurations of vagrant as causing problems with browsersync so I wanted to post here as well to see if there is something configuration wise I could do.

I have the options.drupalURL set.

oxyc commented 8 years ago

I'm using browsersync with rsync on most of our projects. Haven't had any issues.

frob commented 8 years ago

The drupalvm default is nfs, does anyone have it working with nfs?

oxyc commented 8 years ago

Ah apparently zen doesn't convert @import to <link>-tags. BrowserSync doesn't work with @import afaik. There's https://www.drupal.org/project/link_css at least.

kevinquillen commented 8 years ago

That would be correct. You need the Link CSS module.

On Thu, Jun 16, 2016 at 3:23 PM, Oskar Schöldström <notifications@github.com

wrote:

Ah apparently zen doesn't convert @import to -tags. BrowserSync doesn't work with @import afaik. There's https://www.drupal.org/project/link_css at least.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/geerlingguy/drupal-vm/issues/740#issuecomment-226587261, or mute the thread https://github.com/notifications/unsubscribe/AAWGwDFiZoyT6bicnykvvjZwljRtAQlAks5qMaLLgaJpZM4I3E-1 .

frob commented 8 years ago

I tried installing that and it still isn't working.

oxyc commented 8 years ago

Can you confirm that the HTML output, if you view source on http://localhost:3000, has <link> elements instead of @import or aggregated versions.

oxyc commented 8 years ago

Works for me with Link CSS.

frob commented 8 years ago

I can verify that they are using links and not @import. I have tried apace, nginx, nfs, and rsync. This is just not working. I can even see the polling failing when I cancel the gulp watch in the inspector. But when I change files nothing happens.

oxyc commented 8 years ago

Could you try and see if it works with node 0.12? That's what I'm using. Except for sass taking enormous amounts of time to compile, it works out of the box with all defaults. Steps I did:

vagrant up # build new vm
composer require drupal/zen:8.7.0-alpha14
composer require drupal/components:8.1.0
composer require drupal/link_css:8.1.x-dev

drush en components link_css zen -y
drush zen zomg_amazing "Amazing name"

... disable all caching ...
... switch to the new theme ...

gulp watch
# editing files stream the css versions to the browser through browsersync.

Do you see these types of events in the watch output?

[BS] 34 files changed (base.css, layouts.css, chroma-kss-styles.css, kss-only.css, autocomplete.css, collapsible-fieldset.css, form-item.css, form-table.css, progress-bar.css, progress-throbber.css, resizable-textarea.css, table-drag.css, breadcrumb.css, more-link.css, nav-menu.css, navbar.css, pager.css, skip-link.css, tabs.css, box.css, clearfix.css, comment.css, footer.css, header.css, hidden.css, highlight-mark.css, inline-links.css, inline-sibling.css, messages.css, print-none.css, responsive-video.css, visually-hidden.css, watermark.css, wireframe.css)

frob commented 8 years ago

I am using zen 6 for drupal 7

frob commented 8 years ago

Are you sure you are using node v0.12? kss shouldn't be able to run in that version. I have just used nvm to switch to 0.12 and it indeed does fail on kss.

✔ ~/repos/drupal/drupal7/vagrant/drupal/web/sites/all/themes/finished_turkey [7.x ↓·2|…44126]
09:51 $ gulp watch
/Users/fanderson/repos/drupal/drupal7/vagrant/drupal/web/sites/all/themes/finished_turkey/node_modules/kss/lib/kss.js:47
const KssBuilderBase = require('../builder'),
^^^^^
SyntaxError: Use of const in strict mode.
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/fanderson/repos/drupal/drupal7/vagrant/drupal/web/sites/all/themes/finished_turkey/node_modules/kss/index.js:3:18)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
oxyc commented 8 years ago

Oh, you are correct, I'm running 0.5.6! I wonder when I upgraded hehe.

Ah I didn't try the d7 version of zen, but the gulpfile looks pretty much identical so it should work. I don't see how Vagrant or NFS could cause problems (rsync on the other hand would cause problems out of the box). Our team has been using browsersync/livereload without problems since we adopted Drupal VM a year ago.

Maybe try with debug logging to see if that mentions during what step it fails. https://www.browsersync.io/docs/options/#option-logLevel

frob commented 8 years ago

0.5.6? you mean 5.6?

Yeah, I commented out the kss and still a no go. Switching back to v5.

I found this thread https://github.com/BrowserSync/browser-sync/issues/955

Looks like this is a permissions issue. I have no idea why this is a permission issue, if someone could explain it to me, that would be great.

I ran this command:

sudo chown -R $(whoami):admin /usr/local

I know what it does, but I don't know why it fixed the issue. Seeing as how I just changed the ownership of /usr/local and that could have far reaching consequences I would like to know more about why this was the fix.

oxyc commented 8 years ago

Guessing it's something similiar as the homebrew chaos that happened when El Capitan came out: https://news.ycombinator.com/item?id=10309576. I haven't seen that issue since I installed it while in beta though (on my third laptop since then).

frob commented 8 years ago

The odd thing is that broswersync worked, except in this case and I am using Yosemite.

geerlingguy commented 8 years ago

One note is that there have seemingly been myriad issues with not using the latest OS X release (10.11) with some versions of Vagrant; NFS mounts seem to have weird issues in that case.

Things should be better with NFS/Mac OS X 10.9/10.10/Vagrant 1.8.5 now... but even if not, this looks like it could be a rabbit hole of an issue, and since other versions of browsersync/Zen/etc. seem to work okay, I'm going to close this issue and refer people upstream—it sounds like an issue where if the upstream project could upgrade it's dependencies, things could just fix themselves.

geerlingguy commented 8 years ago

(Also closing since I don't personally use browsersync so I can't begin to offer any depth of support for it; upstream project issue trackers are probably the best channels for further support, unless an issue can be tracked specifically to Drupal VM's configuration).