New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inject CSS-only changes into page without reload #490

Closed
cmalven opened this Issue Nov 19, 2012 · 33 comments

Comments

Projects
None yet
@cmalven

cmalven commented Nov 19, 2012

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

This comment has been minimized.

Member

gschmidt commented Nov 28, 2012

@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

This comment has been minimized.

Contributor

Primigenus commented Dec 24, 2012

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

This comment has been minimized.

littke commented Jun 18, 2013

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

This comment has been minimized.

Munter commented Jun 18, 2013

@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

This comment has been minimized.

littke commented Jun 18, 2013

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

This comment has been minimized.

cmalven commented Jun 18, 2013

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

This comment has been minimized.

brandonhall commented Sep 3, 2013

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

This comment has been minimized.

Contributor

timhaines commented Sep 3, 2013

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

This comment has been minimized.

stephantual commented Sep 4, 2013

Dupe of #1361

@ghost

This comment has been minimized.

ghost commented Sep 7, 2013

Code Bounty

@jvanveen

This comment has been minimized.

jvanveen commented Oct 2, 2013

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

This comment has been minimized.

dalgard commented Oct 9, 2013

+10

@Lauricio

This comment has been minimized.

Lauricio commented Dec 6, 2013

+1

1 similar comment
@jvanveen

This comment has been minimized.

jvanveen commented Dec 7, 2013

+1

@faceyspacey

This comment has been minimized.

faceyspacey commented Dec 24, 2013

+100

@jvanveen

This comment has been minimized.

jvanveen commented Dec 25, 2013

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

This comment has been minimized.

littke commented Dec 25, 2013

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

This comment has been minimized.

fabien-h commented Jan 16, 2014

PLUS ONE MILLION (seriously)

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

@kmmathis

This comment has been minimized.

kmmathis commented Jan 17, 2014

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

This comment has been minimized.

AdamBrodzinski commented Jan 28, 2014

+1 , this would be great.

@oobgam

This comment has been minimized.

oobgam commented Mar 19, 2014

+1

@littke

This comment has been minimized.

littke commented Mar 19, 2014

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

This comment has been minimized.

littke commented Mar 19, 2014

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

@fpaboim

This comment has been minimized.

fpaboim commented Mar 25, 2014

+1

@Slava

This comment has been minimized.

Member

Slava commented Mar 31, 2014

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

This comment has been minimized.

allaire commented Mar 31, 2014

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

@glasser

This comment has been minimized.

Member

glasser commented Apr 18, 2014

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 glasser closed this Apr 18, 2014

@glasser

This comment has been minimized.

Member

glasser commented Aug 7, 2014

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

@Primigenus

This comment has been minimized.

Contributor

Primigenus commented Aug 7, 2014

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

@channikhabra

This comment has been minimized.

channikhabra commented Aug 8, 2014

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

This comment has been minimized.

Member

glasser commented Sep 5, 2014

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

@wcj3

This comment has been minimized.

wcj3 commented May 19, 2017

any update on this for 2017?

@wcj3

This comment has been minimized.

wcj3 commented May 29, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment