CSS and JS changes not registering

[jackbeckwith]

Has anybody had trouble getting changes to their CSS and Javascript files to show up on craft.dev? Even when I run gulp watch, my edits seem to show up sporadically, if at all. However, changes to my HTML show up right away.

A quick Google search gave me back this:
https://www.irwansetiawan.com/2014/07/static-files-in-vagrant-are-not-updating/

And from the Vagrant website:
https://www.vagrantup.com/docs/synced-folders/virtualbox.html

Has anybody dealt with this issue?

[jackbeckwith]

It appears as though vagrant_webroot.conf under puppet/manifests already includes the line EnableSendfile Off. So now I'm really at a loss.

[nickautomatic]

Hmm, that's strange @jackbeckwith. Firstly, what OS (platform / version) are you on? And secondly, what happens if, instead of using gulp watch, you just run gulp (which should compile everything) after making a change to your CSS / Javascript, then refresh the browser? Do you see the updates?

[jackbeckwith]

I'm on MacOS Sierra, 10.12.6.

No, running gulp and then refreshing the browser doesn't solve the issue. Still not seeing the changes render.

[jackbeckwith]

Sorry to prod... but still having trouble. Any help here would be much appreciated 👍

[nickautomatic]

Hmm, the next thing I would try is to make sure you're on the latest stable version of both Vagrant and VirtualBox. In the past we've had some issues that have come from people being on older versions of VirtualBox, which were fixed by upgrading from 5.0 to 5.1

[jackbeckwith]

Got it - I'm on VirtualBox 5.1.26.

I'm not using rsync though... I think that might help? Would I need to modify this line in the Vagrantfile to use rsync?
config.vm.synced_folder "app/", "/vagrant/app/", :owner => "www-data", group: "www-data", :mount_options => ["dmode=777", "fmode=666"]

Or is this handled by default if I install rsync?

[ccbeyer]

@nickautomatic I'm getting the same issue - making CSS changes and nothing is updating on the site (but html changes show up). Adding the EnableSendfile Off line didnt help. I am not using gulp or gulp watch, but previously css changes WERE getting updated even without using them. I'm thinking maybe some weird config got out of sync.

A couple questions:
Where does the site actually load the css from? Is this on the vagrant VM? Is it in a shared folder?
How do css files and html files get transferred over to wherever they are being loaded by the website from?

Thanks!
Chris

[ccbeyer]

Just narrowed it down even more, When i make a change to a file on my local machine, the new file does show up on the Vagrant machine (accessed via Vagrant ssh) at /vagrant/app/public/css/somefile.css, but the website doesnt change and looks to be loading an older file. So I guess my main question is - where is the websites css file being loaded from?

[ccbeyer]

also, to be clear, I'm accessing the site by going to craft.dev, not localhost:3000

[jackbeckwith]

Alright so I think I've figured out the issue and a (hacky) way around it.

First, my previous suggestion that rsync would somehow solve this was incorrect. As @ccbeyer notes, this is not an issue of files syncing between the local host and virtual machine. When I looked closely at the CSS files on VirtualBox, I also found that the changes were being reflected there, just not in the browser.

That led me to believe it had something to do with the interaction between the VM and my browser. I think the browser is using a cached version of the files in vagrant/app/public by default. To prevent this, I inserted two lines into the file puppet/manifests/vagrant_webroot.conf:

ExpiresActive on
ExpiresDefault "access plus 1 second"

If I understand correctly, this tells Apache to retrieve a new version of any document directly from the source after 1 second has elapsed, instead of using a cached version.

I added those lines, and ran vagrant halt and vagrant up. CSS changes are now registering consistently for me after I reload the page.

[nickautomatic]

Interesting - I'm not sure why your browser would be using a cached version (out of interest, which browser / version are you using? Let me know and I'll see if I can replicate this), but glad you've got it working.

I'm surprised that you'd be experiencing this problem even when running gulp watch, because BrowserSync (which runs as part of the watch task) adds a query string to the stylesheet URL, which updates when you edit the styles, which should bust the cache and cause the sheet to be reloaded. Can you confirm whether when you're running gulp watch the stylesheet is requested with a query string? (eg. main.css?rel=[some number]). Does the number change when you save an update to one of your stylesheets?

@ccbeyer To be honest, using Crafty Vagrant without gulp watch isn't really the intended usage, so while it should work / be useful as a starting point for new projects, unfortunately it's not a use case that we can really spend much time debugging / supporting. Sorry! I'd be interested to know if you're also having this problem while running gulp watch though. Re: where the file is loaded from - Vagrant has a concept of "synced folders", which allows the app folder to be shared between your host machine and the virtual machine that Vagrant creates. So any changes in your app folder should also be showing up on the VM (because they are essentially the same files).

[ccbeyer]

@nickautomatic I tried with gulp watch as well and still didnt update the files. It looks like browsersync detects the changes, but still nothing updates on the browser. I am using regular css, not scss, but i updated the gulpfile to reflect that (it seems correct at least, since its detecting the css changes).

I ask where the files are loaded from because when i login to the vagrant machine, i can see the files and see that they are changing, and yet the website is loading the old files (i can inspect the files and they dont match those on the vagrant machine).

[nickautomatic]

Ah, ok. I'm wondering if you're directly editing the CSS files that are in the app/public directory? That would probably cause the issue you're seeing, since there would be no cache-busting via browser sync, and gulp watch would have no effect (because it's watching the app/src directory, or - for styles - the app/src/styles directory)

Either way, if you've changed the Gulpfile and it's not working, and you're not using Sass then I'm afraid there's not much we can do to help. I'm keen to fix issues that occur with a fresh install of Crafty Vagrant, but once people have started modifying Gulp tasks / server configuration then I'm afraid it becomes impossible to support. To be blunt, it becomes an issue you may have introduced rather than a problem with Crafty itself.

However, since CSS is a subset of Sass, you should be able to use plain CSS without any modification to the default Gulpfile: you just need to write it in app/src/main.scss. If you put your styles there and run gulp watch then any subsequent changes to the styles should instantaneously appear on your site on save (with no page refresh required). You don't have to use any of the features of Sass if you don't want to (other than the fact that it will have to go through Gulp's compilation process), but you'll still get the other advantages of the Gulp task (BrowserSync, autoprefixing, a custom Modernizr build, minification, etc).

[ccbeyer]

Hey @nickautomatic, quick question thats probably obvious for you. Say we clone crafty-vagrant and want to get started writing files from a fresh install. Would I put a javascript file in /app/src/scripts as, say scrolling-nav.js, and then not have to change anything in the gulp file to get this to work? Then, if I want to include this file in a craft template, say in /app/craft/templates/_layout.twig, do i just add to _layout.twig {% includeJsFile "/scripts/bundle.js" %} and run gulp. This seems to be what we did, but the file /app/public/scripts/bundle.js does not seem to include any of that scrolling-nav.js code (and im assuming gulp just appends all js files in that directory into one file, bundle.js, right?)

[ccbeyer]

Also, similar question for css, in an effort to not have all css in one file, main.scss, can we have other .scss files in the same directory as main.scss and not change the gulp file, or if so, what changes would that require?