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
Comments
@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. |
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? |
Why this is a must have for a designer/developer like myself:
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. |
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 |
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. |
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. |
Splitting your app into packages will help a lot. On Monday, September 2, 2013, Brandon Hall wrote:
|
Dupe of #1361 |
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 |
+10 |
+1 |
1 similar comment
+1 |
+100 |
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... |
Doesn't work because as long as the CSS file is served by Meteor, |
PLUS ONE MILLION (seriously) Maybe look at the way it's done with yeoman ? (http://yeoman.io/) |
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. |
+1 , this would be great. |
+1 |
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
And then in my settings file:
When starting Meteor, remember to add 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. |
OMG even better, with source maps, I can now finally code live in the browser and save it to disk. niiiiiiice |
+1 |
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 |
👍 like everyone else, our app reload time is getting ridiculous :( |
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. |
This is now fixed on devel, thanks to @arbesfeld ! Targeting 0.9.0 release. |
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 |
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 |
The autoupdate package, as well as some support in the build tool. |
any update on this for 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 |
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.
The text was updated successfully, but these errors were encountered: