Inject CSS-only changes into page without reload

[cmalven]

For most non-Meteor projects I use LiveReload to monitor my project folder for changes, pre-compile Sass & Coffeescript, and reload the browser windows as necessary.

Obviously, Meteor takes care of all of this for me. But LiveReload (and CodeKit, I believe) does one really nice thing that saves me a ton of time: if it detects that the only changes to the project are CSS/Style, it instantly injects the updated styles into the current page without requiring a full page reload.

This might not seem like a big deal, but at roughly 2-3 seconds per reload multiplied by hundreds (thousands?) of style changes and saves over the life of a project, that's some serious time and frustration savings.

I know this is not a high priority for the project, but this might be an easy win for developer happiness.

[gschmidt]

@cmalven, this is a great idea, thanks (though I'd also like to improve our Hot Code Push to make it a lot faster.) I agree that this would be really nice. I'm a little concerned about not getting a 100% clean reload if new CSS is just loaded over the old CSS, but we can look at LiveReload to see how it handles that.

I don't think the core team will get to this anytime soon (unless someone picks it off as a hackathon project) but we'd be happy to take a high quality pull request.

[Primigenus]

We wrote livejs.com for our product which does the same thing LiveReload does but in Javascript. It's hosted on Github: https://github.com/q42/livejs

One important thing Live.js also does is animate the live CSS changes by adding a class to the body and setting a global CSS transition on it. That ends up looking pretty awesome in practice.

I don't really know enough about Meteor's project structure to work on this myself. Would I need to look at the liverange package?

[littke]

Why this is a must have for a designer/developer like myself:

• A reload in Meteor development mode can be slooooooow
• Meteor takes a long time to even notice a file change has happened
• I constantly pixel-tweak by saving tiny changes, previewing in the browser.

So sometimes increasing a margin with 1px can take up to 6-7 seconds. Feels like I'm debugging IE through VNC :(

Only reloading the CSS would be awesome. OR simply a way to disable Meteor's built-in autoreleoad, then we could take care of this ourselves.

[Munter]

@gschmidt You can take the express middleware we made in livestyle and use in your server. It will inject a javascript on each served html page, which in turn opens a socket connection to the server so it can get notifications instantly when a file changes on disk.

It should plug right in.

[littke]

One of the reasons this is so slow, I've figured, is because a change in a single file causes Meteor to restart and to clear the cache. So all my JS-files (there are many!) are now fetched as 200s instead of 304s.

See #437

[cmalven]

Yes, this has only gotten worse for me as my Meteor apps have gotten more complex. On a few projects I'm waiting almost 10 seconds between saving a change and the browser refresh.

[brandonhall]

I can't believe I'm finding this as an open issue. We have a large Meteor app and the reloads are painful after CSS tweaks.

[timhaines]

Splitting your app into packages will help a lot.

On Monday, September 2, 2013, Brandon Hall wrote:

I can't believe I'm finding this as an open issue. We have a large Meteor
and the reloads are painful after CSS tweaks.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/490#issuecomment-23687156
.

[stephantual]

Dupe of #1361

[ghost]

[ghost]

I made a general less/css autoreload tool a while ago, maybe useful? => https://github.com/jvanveen/lessio also has some code for browserify code and clientside templates

[dalgard]

+10

[Lauricio]

+1

[ghost]

+1

[faceyspacey]

+100

[ghost]

Maybe chrome devtools' workspaces are a good place to start. Just needs to make sure that all files map correctly to filesystem. Also supports css sourcemaps nowadays...

[littke]

Doesn't work because as long as the CSS file is served by Meteor,
Meteor will restart whenever the file changes. Not to mention it will
refresh the entire page.

[fabien-h]

PLUS ONE MILLION (seriously)

Maybe look at the way it's done with yeoman ? (http://yeoman.io/)

[kmmathis]

I'd say this is a pretty important feature for all designers working with Meteor. Potentially, some designers could be turned away from the project simply because of this issue. It makes good sense to me to remove CSS files from Meteor's watch, and instead inject them on the fly to avoid the page reload.

[AdamBrodzinski]

+1 , this would be great.

[oobgam]

+1

[littke]

Guys, I was just able to get this working with CodeKit 2 (https://incident57.com/codekit/). It has the ability to do browser refreshes with a delay. I've set it to 0.5s delay. This lets the Meteor server detect the change and restart before CodeKit injects the change.

You'll also need to make sure Meteor doesn't refresh the entire page. I've done so with the following code I've put in client/lib/disable-hcr.js:

/*
 * A settings option to disable auto reload during development.
 */
Meteor.startup(function() {
  if (Meteor.settings && Meteor.settings.public && Meteor.settings.public.DISABLE_AUTO_RELOAD) {
    Meteor._reload.onMigrate(function(reloadFunction) {
      return [false];
    });
  }
});

And then in my settings file:

{
 ...
  "public": {
    "DISABLE_AUTO_RELOAD": true
  }
}

When starting Meteor, remember to add meteor --settings debug-settings.json.

TADA! Injecting only CSS changes. Plus, it refreshes the entire page when HTML changes (as it should) AND generates LESS source maps which Meteor supports since 0.7.2.

[littke]

OMG even better, with source maps, I can now finally code live in the browser and save it to disk. niiiiiiice

[fpaboim]

+1

[Slava]

I am just linking it here for anyone curious how to implement this feature outside of Meteor (if you really want): http://stackoverflow.com/questions/22755209/realtime-css-scss-edition-with-meteor-avoiding-server-restart

[allaire]

👍 like everyone else, our app reload time is getting ridiculous :(

[glasser]

We do not use GitHub to track feature requests (other than for Blaze). The core team's current roadmap is at https://roadmap.meteor.com/. Discussions about features that users desire are great topics for the meteor-talk mailing list, where the community can help come up with solutions that don't require core changes.

[glasser]

This is now fixed on devel, thanks to @arbesfeld ! Targeting 0.9.0 release.

[Primigenus]

This is a must have feature for designers and will dramatically increase iteration speed. Thank you for getting it into 0.9.

If you're curious how this works under the hood, @arbesfeld gave a talk at a recent devshop about it: https://www.youtube.com/watch?v=NBp72NFzHL0

[bitspook]

Can someone point to where in devel branch is the code to do live CSS injection? I'd love to see how core devs are doing it, I couldn't find it in places I though it would be.

Here's a rather silly way I do it. https://github.com/channikhabra/meteor-live-update
I'd be doing something horribly wrong since nobody else has tried doing it this way. But never mind, it works. My silly package has js/html live update too, which I am sure is broken in meteor 0.8.3, so in case you wanna try it, please do LiveUpdate.configure({cssOnly: true}) in your app.

[glasser]

The autoupdate package, as well as some support in the build tool.

[wcj3]

any update on this for 2017?

[wcj3]

Although this issue has been dead for a few years, i'm dropping this to help future travelers: https://atmospherejs.com/wcj3/sass-hot-loader