Meteor + React + Reapp

mobile
1

Has anyone gotten Reapp working with Meteor?

would love to know ! :smile:

1 Like
2

Waiting to hear more on this too.
I’ve been using Meteoric for ALL mobile projects and its pretty great. But Meteoric is tied to Blaze and Ionic is tied to Angular.

So for building Meteor + React mobile apps, do we simply use only the CSS part of Meteoric? The navigation screen transitions that work out of the box with Blaze/Meteoric are gone when you start using React. Reapp seems to have that covered. Is there a better way? Any advice?

3

+1 for wanting to hear thoughts on this

4

I guess you have to apply the beautiful transition by react also, right?

5

I have been looking at this as well, without success :frowning: Firstly, I’m not using the build tool or routing or any other reapp package. I am focused on getting reapp-ui into Meteor. I’ve tried 3 ways to integrate Reapp with Meteor, but no luck.

  1. Use cosmos:browserify. The 1st issue I ran into was Meteor complaining about an icon file with a : (colon) in the filename. There is an npm module (reapp-ui-meteorcompat) that fixes this issue. After using that, and following the package directions exactly, I get no errors, but nothing from Reapp is visible in the client.

  2. Create a wrapper Meteor package depending on the reapp-ui npm module. (The izzilab:material-ui Meteor package does this for Material UI). My browserify.json file can’t see the npm code at all. I am trying to emulate that Material UI Meteor package but no luck.

  3. Use webpack via webpack:webpack. I think this is actually working, but Reapp themes are doing something funky that is not playing well, so they are not working at all. Any component I attempt to render ends up as plain DIVs.

There is a Github issue in the reapp repo to track this: https://github.com/reapp/reapp/issues/98

I’ve got experimental code spread all over, but I can pull it into a github repo if there is interest.

Any ideas?

2 Likes
6

I think you’re going to need to use webpack to have a nice experience. Have you tried it in webpack outside of meteor yet? Perhaps the theming is not a Meteor issue.
https://github.com/gaearon/react-hot-boilerplate

Also you may want to try jedwards’ version of webpack to see if that makes any difference. It’s less Meteor specific so if it works in the hot-boilerplate than it should work in his meteor-react-boilerplate too.

I would avoid the regular built tool + browserify like the plague… there be dragons :laughing: I was getting 30+ second build times with certain NPM modules (pre 1.2).

7

@SkinnyGeek1010 Thank you. That was helpful. I loaded it up in the react-hot-boilerplate and I am seeing the same issue. So it is either a Reapp issue or a me issue. I might be in the wrong forum…

8

Let us know how it works! I tinkered with it a bit ago for kicks and it seemed pretty nice for a Cordova app.

9

I’m interested! :smile:

1 Like
10

Also posted on https://github.com/reapp/reapp/issues/98

I have reapp-ui (minimally) loaded into Meteor using the webpack:webpack Meteor package. I was stumped initially by, I believe, an unrelated theme bug in Reapp itself that appears to be fixed now.

So I now seeing Reapp components and themes. I am trying to get the kitchen sink into Meteor, but I am getting a blank screen at the moment. It’s probably an issue with the router, so I think next step is to discard the reapp-routes package and go to react-router directly.

4 Likes
11

I am interested too :smiley: A blog post will be awesome :smiley:

12

i’m interested too , pls share a github repo of your wip, maybe we can help :wink:

1 Like
13

I managed to get the first bit working (the red button example). Nothing impressive, but at least Meteor, Webpack, React-router and Reapp-ui work together: https://github.com/pors/meteor-reapp.

Next step is to get the kitchen sink working. To avoid doing double work, @hellogerard, how is it going with your effort?

14

I’ve put my experimental repo here: https://github.com/Differential/meteor-reapp

I copied all the kitchen-sink components into this app. I believe I’ve successfully ripped out all the reapp-routes stuff and am using the latest, stock react-router. The issue now is the kitchen-sink is written with an older version of react-router. So I am getting an error regarding the use of RouteHandler in App.jsx, which was removed from react-router in 1.0.

By all means, please chip in. I think we are all anxious to get a good mobile, React-based UI kit.

15

Cool! Yes there are some changes in react-router that are documented here: https://github.com/rackt/react-router/blob/master/CHANGES.md

Would you like me to give it a shot to apply the changes?

1 Like
16

Thought I had said already, but :thumbsup:

2 Likes
17

Hi, @hellogerard I had a closer look and I think it is easier to keep on using reapp-routes (after it is working with react-router@1.0.0).

I resolved the issue with RouteHandler in a fork of your repo, but the remaining errors are remains of the use of reapp-routes:

ERROR in ./client/components/Kitchen.jsx
Module not found: Error: Cannot resolve module 'reapp-routes/react-router/RoutedViewListMixin' in /Users/mark/dev/meteor-reapp-1/client/components
 @ ./client/components/Kitchen.jsx 21:49-105

ERROR in ./client/components/kitchen/Twitter.jsx
Module not found: Error: Cannot resolve module 'reapp-routes/react-router' in /Users/mark/dev/meteor-reapp-1/client/components/kitchen
 @ ./client/components/kitchen/Twitter.jsx 25:30-66

Unless you see an easy way to fix this, I’ll focus on making reapp-routes work with react-router@1.0.0

18

Thanks for spending time on it. I glanced at that RoutedViewListPlugin helper but I couldn’t figure out what it does right away. I wonder what happens if you just remove it?

You are of course free to do what you like, but as a user I know I’d much rather not be tied to the other parts of the Reapp system as possible.

1 Like
19

Just removing it won’t work unfortunately, somewhere deeper in the code it is relied on:

Uncaught TypeError: this.routedViewListProps is not a function

Pointing to:

  <NestedViewList
    {...this.routedViewListProps({
      onViewEntered: this.props.onViewEntered,
      onViewLeft: this.handleViewLeft
    })}

Yeah, maybe we are better off without reapp-routes. Especially now it is running behind on react-router.

20

Any forward movement on this project? I’m also taking look at it.