Prevent to merge all assets in meteor.js

mobile
1

Hi,
I try to create mobile application with a web based admin dashboard using meteor.js and I want to use one app approach based on this question, because I have many code that share between clients (mobile or web) with server.

I try to separate clients layout for different view. (using iron-router facilities) like this:

        // set mobileLayout for all routes
        Router.configure({
            layoutTemplate: 'mobileLayout',
            notFoundTemplate: "notFound",
            loadingTemplate: "loading"
        });
    
    // add specific adminLayout for admin routes
    LoginController = RouteController.extend({
        layoutTemplate: "adminLayout",
    
        template: "login",
    
        action: function () {
            this.render();
        }
    });

I used meteoric for mobile view platform and bootstrap for my admin dashboard. But some conflict occurred in CSS (for example I set font for mobile app and it’s override web version fonts too and I need add specific CSS selector for almost everything) and also It’s not best solution because meteor merge all css and js together while mobile client don’t use bootstrap at all and admin web users also don’t use meteoric.

My question is:

How to tell meteor to merge mobile assets (CSS, and template JS) together and merge web assets together to have smaller mobile app and smaller web app and prevent CSS conflict?

What is your suggestion and best practice for similar projects?

2

What you want is called ‘code splitting’ and it is not currently possible using the standard Meteor setup. But it is a feature that is currently being worked on and should appear in the next few months or so (I guess). Once it does arrive it will be based around modules which is a feature that will land very soon in Meteor 1.3.

Note. Code splitting is not the solution to css conflicts, it’s simply more efficient.

Your options for code splitting are:

  1. Explore modules in 1.3, start adopting this pattern so that once code splitting arrives you are able to take advantage of it - I strongly suspect code splitting in Meteor will depend on you splitting you code into modules.
  2. If you can’t wait have a look at this thread which gives a custom approach to enabling code-splitting.
  3. Just relax. Build something that does what you need now based on the guide and trust in the guide’s authors to make the right decisions for you to ensure upgrading to code-splitting later will be easy.

Regarding your css conflicts:

You need to scope things. Just wrap mobileLayout in a css class, like mobile-layout, and then wrap all your css in the same class:

.mobile-layout {
  .myapp.widget {
    background: rgb(239, 239, 239);
    // etc. etc.
  }
  .some-other-thing {
    // etc.
  }
}

This won’t stop all css being sent to all clients but it will prevent conflicts.

1 Like
3

In the thread you linked the only answer is one where splitting up the app into separate ones is advocated. That’s what I’d suggest as well. Use either symlinks as per the SO answer, or put all shared things into Meteor packages and reuse them across both apps. The first approach is the simpler one though probably since it’s just much less overhead.

The CSS conflict itself you could likely fix with scoping your custom CSS as oliverlloyd suggests, but having both Meteoric and Bootstrap CSS in there for both apps is potentially still going to be an issue, beyond just increasing app size and asset download size for the webapp.

1 Like