Meteor 1.3 + React Boilerplate

announce
1

Hey all,

I’ve just finished putting together my Meteor/React boilerplate, and wanted to share it publicly:

Quick instructions:

  1. Clone it
  2. npm install
  3. npm run scaffold

There’s also an example app (for learning purposes!) which you can get to by running npm run example. Running npm run exit will take you back to the boilerplate.

My brain’s been a bit scrambled this past week due to juggling too much stuff, so I apologize if anything in the boilerplate is broken or doesn’t make sense! Comments, questions, and feedback are welcome—just please open an issue on GitHub.

I’ve done my best to settle on a middle ground between bleeding edge and a “safe place.” :slight_smile: A few things that are missing, or of note:

  • No testing set up in the boilerplate: because I’m not really sure which direction to go with this yet, and I’m kinda waiting to see what the Meteor Guide will officially recommend for React.
  • I’ve gone with Astronomy instead of SimpleSchema. Both are great packages, but for me personally, Astronomy just feels right.

I’m also toying with the idea of structuring apps by putting features in their own folders, to make it easier to find things. I’m not sure how this’ll work out in practice, so the boilerplate will definitely be updated as I come up with better ways to do things.

Hope it helps!

Update 3/29/2016:

The boilerplate is now opinionated with regards to unit testing React components. I’ve gone with Enzyme due to its simplicity compared to other options I considered.

14 Likes
2

So, how are you planning to pass data?
Containers or Mixins?

I myself is currently using mixin with es6 syntax so that down the road it would be easier to refactor them with into containers

3

Yep, the example code talks about (and uses) containers, as well as reactMixin to inject ReactMeteorData into the class. The two aren’t mutually exclusive.

4

Excellent example code comments!!
You should really extract them into a blog post. Your comments about containers/ mixins/ and just modern React architecture and how it fits in with Meteor are the best I’ve read.
Thanks for doing this!

2 Likes
5

Thanks for the kind remarks! I’m glad you found it helpful. I’ve toyed with the idea of writing something on Medium, but so much has already been covered already. Maybe once my SaaS eventually launches, I’ll write up a post-mortem on it.

6

Only combed through the code, but thank you for this.
Firstly, for what will be a really useful boilerplate.
Secondly, for the quality of the coding, exemplified by the standard (not just the number) of comments.

Ive always felt all code should be written like this -> more like an academic paper, with rationales, thoughts, judgements and even with external references.

Really generous and a thing of beauty.

2 Likes
7

It’s nice to see an example app that’s so well commented, makes it much easier for someone like me, who’s just now learning Meteor (and prefers to focus on 1.3 and React), to figure out how everything is tied together. I have done a lot of reading on React components/containers, but struggled to figure out how to to get it all working within Meteor. This has been my favorite learning resource thus far.

Thanks ffxsam!

1 Like
8

Thanks for putting this together. How are you handling inserts with 1.3?

9

Thanks for all your work on this. Now, how about a future documented example with Mantra app architecture ? It would be awesome.

10

You mean Mongo DB inserts? I’m using Astronomy. (check out the example code to see how)

Not yet, IMO Mantra is too early in development. Plus (for the most part) the example app will always reflect whatever tools I’m using in my projects, and Mantra is not one of them at this point in time.

11

I was looking through the code but couldn’t find any examples of a insert occurring in the repository.

12

saveCurrentColor method in ColorSetterContainer.jsx calls the saveColor method to write new colors into the db.

1 Like
13

ah thanks, sorry i was looking in the wrong branch

14

BTW, the boilerplate apparently doesn’t work on Windows. If any Windows devs can help fix this, it would be greatly appreciated! I’m not sure how npm scripts would work.

15

Boilerplate updated to include Redux, along with a very barebones setup (store, reducer, etc).

1 Like
16

Thanks ffxsam,

This is really useful case. I was struggling for a few days how to switch from blaze and meteor 1.2 to react and 1.3 and your boilerplate is the best tutorial for this, because for example mantra uses technology, which is quite far from the plain meteor path and it’s difficult to switch.

Thanks a lot and if you’ll will have time to record a video or write a blog post, how to build more complex stuff, it will be perfect. Really like your comments style.

1 Like
17

Really Great. This is exactly what we need:) … @sashko Should this end-up in Meteor Guide?

1 Like
18

@tmeasday is working on something for React! Maybe it will include some or all of this stuff.

19

It probably won’t be part of the Guide, since I’m only following some of those standards and not others. The boilerplate and example code is basically a structure that works for me, and typically what I’m using on professional projects. It’s also subject to change as new developments arise. :slight_smile: (such as Apollo!)

20

Just pushed a major update to the example app branch. It now uses Redux, and has very detailed comments on how Redux works. Enjoy!

4 Likes