Folder Structure with React and Flow Router

react
1

Hi,

I was curious as to how you guys organize your folder structure with React. Are all the components under /client/components? What about methods that the component depends on?

I’m just starting to use Flow Router but not sure where the best place to put that code is. All in client/router maybe or part of the component that uses that route?

This forum is great resource. Really helpful, thanks.

3 Likes
2

Hey there!

That’s a great question. I’ve been changing it up a little bit myself. What i’m using now is the following.

client/
  /lib
    browserify.stuff.js
both/
  router.jsx
  models/
    user.js (Meteor methods)
    post.js (Meteor methods)
  components/
    Posts/
      _Posts.scss
      _PostItem.scss
      PostsContainer.jsx
      PostItem.jsx
      PostItemHeader.jsx
    Header/
server/
  publications/
    posts.js
  startup.js

I share as much code as I can in the both folder now so i’m somewhat prepared for when FlowRouter 3 has serverside rendering or bootstrapped data. You could put all of the components in client/ and that works but the server can no longer access them.

The one con of doing this is when you make a typo, it crashes the server.

I’m just starting to use Flow Router but not sure where the best place to put that code is. All in client/router maybe or part of the component that uses that route?

I put the router.jsx file in the client/ folder and keep it very basic so it’s only handling the routing and making an analytics call. All other logic (like authorization and subcribing) is in the template root. By placing it in the root of client it should be loaded after the components.


However… within the last week i’ve switched new projects over to using webpack to load everything using ES6 modules (no more file order issues!). This project is mostly ironed out but is still in progress. For now I would say this is an advanced setup unless the extra config doesn’t bother you.

(alt-structure and minimal branches to be PR to main project soon)

with webpack:

webpack/
meteor_core/
app/
  models/
    user.js (Meteor methods)
    post.js (Meteor methods)
  components/
    Posts/
    Header/
  publications/
    posts.js
  main.client.js
  main.server.js

This gives you a very flat structure and you determine what goes on the client/server by requiring the files in starting at main.client.js and main.server.js.

Using the structure at the top is prob. best for now though :smiley:

3 Likes
3

What do you mean by template root?

I see you put you css along side the component as well. How do you ensure that the css style applies just to the corresponding component. Do you have a class at the root element of the render function that identifies this component?

4

Yep! Here’s an example app of mine that shows how you can use drop it in with the component and also how to setup the Sass import (under styles/components.scss).
https://github.com/AdamBrodzinski/react-ive-meteor/tree/master/both/components/FeedItem

Oh sorry that’s confusing. What I meant was the parent template for an area… In a simple app it might be the blogs page, the about page, etc… In a large complex app, like Facebook, Chats.jsx might be the topmost parent for chats and then in that template you setup subscriptions and deny a user if they’re not an admin. Then for posts, there would be a posts topmost template and it handles post relating subscriptions and stuff.

1 Like