Hello Everybody,
I have 5 different CSS files which represents different themes for my site. If I place them in the client folder meteor will load them, and one will override the other (with all sorts of funny bugs).
Let’s say I don’t want to place them in the public folder to protect the source. Is there a way to create a folder which is accessible by the app, but not loaded at startup?
be it for css, JS, or anything else.
Why not put it in /public? It’s CSS, it will end up being sent down to the browser when needed no matter where you put it. Same thing for JS, if it’s going to be run in the browser then there is no way to protect the source.
that’s what I did till now but let’s say there is some privileged content, e.g.: premium content? Secure code?
I also thought that maybe the new load order API in meteor 1.2 could fix this.
It depends on what you mean by premium content? Is the code itself is the content (i.e. you are selling the app source code)?
If you mean that the code is for premium features in a app, then it doesn’t matter that it’s sent to the client even to non premium members. How would they use it? Presumably the code would be performing interactions with the server. The server is responsible for checking if the user has the right to do what they are trying to do (i.e. are they a premium member?). If they don’t have the right, then the server sends back an error, and thus, the premium code is useless to non premium members.
If the code itself needs to stay secret, then you put it in /server (which is not sent to the client). You can create Meteor methods in /server and call them from the client. For CSS, that makes no sense because it needs to be public in order to be used.
For displaying different themes, if you put the theme CSS files in /public/themes, I think you could do something like:
<link href="/themes/{{themeName}}.css" rel="stylesheet">
I’m not 100% sure that would work, but I don’t see why it wouldn’t. (maybe you already have it working)
Probably a better way to do it (unless the theme files are very large) is just load all the themes together, and make their styles have a parent:
.darkTheme .button { ... }
.lightTheme .button { ... }
Then on in your HTML you can have a parent div that wraps everything else and apply the theme class to it:
<div class="{{themeName}}">...</div>
If the themes themselves are the premium content, you could do something like:
<style>
{{themeCss}}
<style>
The themeCss could be stored in the database or read from a file on the server and sent down to the client only if they are allowed to access it. That would be a pretty weird case though.
PS: To control file load order, you can put your code in packages. In each package there is a package.js file in which you describe which files to load, and in what order.
my approach is a little different. I’m writing an app to help people learn jquery. They have several tasks to achieve by dynamically loading the css. Until now I did everything with jQuery. Thanx for the idea though, very nice way to use template helpers, I will use it for sure.
Anyhow if I leave the CSS (or JS) in the public folder, I’m afraid they might understand it and use it to find all the solutions. The solution I’m using now is to serve content via encrypted REST api (written in python and flask), then load it via jquery but I was wondering if there is a meteor way to do it.
I think there might be other use cases for this, but the generic idea of private code loadable but not loaded by default is a scenario that meteor should cover by itself, using a single instance. (right now is doable, with 2 instances of meteor running).