What is the recommended folder structure for Meteor 1.3?

Showcase
1

I’m aware of the following repos:
(1) https://github.com/thereactivestack/kickstart-hugeapp
(2) https://github.com/rackt/react-router/tree/master/examples/huge-apps

But, I don’t want to use webpack. At the moment, I just want to thinker around with 1.3, React Router and React. What would be the recommended way to structure my app?

What do you guys think about this:

app
└───client
    │   index.html
    │   routes.jsx   #define routes here
    └───components  #global components like button, drawer
    └───routes
        └───route
            └───components  #route-specific components
            │   index.js  #route configurations
            └───routes  #children routes
└───server
└───both
└───public
2 Likes
2

Webpack is hipster tier. Really! Don’t use it unless you really really know what you’re doing.

I’m going to record a good tutorial on the ‘golden path’ for Meteor and React integration. With the help of this forum and various resources online I have cracked the puzzle.

In the meantime, here’s a screenshot:

351×1280 118 KB

Why did you want to use webpack initially?

4 Likes
3

We’re going to have a section about this in the Meteor Guide, which will be released alongside Meteor 1.3.

Please help us investigate different folder structures and figure out what is best!

10 Likes
4

Seriously anything straight from the horses mouth is fantastic. :rocket: Looking forward to it.

5

Yo, what’s inside those views subfolders? Most interesting part right there.

6

440×552 19.5 KB

The jsx template, and any specific styles that apply to that component. React fits really really well with Meteor.

2 Likes
7

Ooh I see you’re one of those hipsters that uses sass instead of scss… :stuck_out_tongue:

But yeah I think SASS is winning against LESS these days, I think this year we’ll probably start recommending that over LESS. Bootstrap was probably the last straw for me.

6 Likes
8

Thanks for your tip. Look forward to your tutorial!

No, I said I don’t want to use webpack. Too much to take in at the moment. =)[quote=“skaxwng, post:1, topic:15828”]
But, I don’t want to use webpack
[/quote]

1 Like
9

I blame my brother, he hates curly braces and he’s making things pop on the UI/UX side. :stuck_out_tongue:

1 Like
10

Stylus is even better!

2 Likes
11

I’ll say it: I love brackets…

5 Likes
12

LMAO. And you guys need a chat room :wink:

1 Like
13

I am very very excited to see this @sergiotapia!

14
1 Like
15

heloo, @sergiotapia what is archives folder…?? is that to store the depreciated code but maybe you need someday…?? if that so, how you manage to prevent meteor to load file inside archives folder…??

thank You,

16

Hi @karina “archives” is just a bad translation of “archivos” to English. It’s just a simple view meant to draw a list of all the files the user has uploaded.

17

ohhh i see, i have a lot of depreciated code but don’t know where to store, uncommenting looks dirty…

18

You should use version control for this! Create a branch with the old code for later. Alternatively, you can put it in the private directory of your app.

Also, in Meteor 1.3 files aren’t going to be loaded by default in the imports directory, so it will be possible to have unused files, although I wouldn’t recommend it.

2 Likes
19

I’ve been experimenting with a folder structure like this:

295×640 6.96 KB

I’m currently developing a CLI tool that does all this scaffolding for you, but I’m still working on what the best scaffolding would be.

3 Likes
20

@idmontie Even better! We are in dire need of a good scaffolding tool for React + Meteor modules

1 Like