Meteor 1.3 App Structure: What to do with HTML / CSS

help
1

I am feeling a little bit confused since Meteor 1.3 was released. Specifically, I don’t understand how I’m supposed to move my Blaze templates and CSS files into /imports. I’ve looked at the todos example app and find it unhelpful for a few reasons. First, it’s using Kadira’s Flow Router package, which I am not. Second, it’s using Less, which provides an import syntax. And third, there isn’t a element defined in any of the template code.

I have an existing project I’m trying to migrate toward the new app structure, but I’m not using a client-side router, and I’m not using a CSS preprocessor. So my question is, does that mean I have to leave all of my Blaze templates and CSS files in /client? Is there any way to lazy load them? Or do I need to start using a router and CSS preprocessor if I want to take full advantage of the new app structure?

Thanks for any help you can offer!

1 Like
2

For example you have a small part of your app in example.html, example.js and example.css What you could do is to move all that files to imports folder and then in the client/main.js do something like:

clinent/main.js:

import '{}/imports/example.js';

then in your example.js file you can do something like:

imports/example.js:

import { Template } from meteor/templating;

import './example.css';
import './example.html';

// here are your Template.example.helpers(..) etc.

This is of course just a fragment, an example. I think you can see how it is connected now.

I have migrated my app too. Here is the code: https://github.com/juliancwirko/s-chat-app (just another example of such structure).

1 Like
3

Okay, so basically it looks like I can just import CSS/HTML files from JS code. For example, this works as expected:

client/main.js:

import '../imports/main.css';
import '../imports/main.html';

imports/main.css:

h1 {
  color: red;
}

imports/main.html:

<body>
  <h1>Hello, world!</h1>
</body>

So that clears up a lot of confusion for me. But I’m still confused about why we’re able to import non-JS code using ES6 import statements. Is this standard usage or is Meteor doing some magic to make this work?

Thanks again!

4

I gues there is a lot of magic to achieve this :wink: But hey, Webpack has it’s loaders too, you can also import styles and other files like html in your js files. So we probably can say that this is a standard now :wink: