Meteor + React + Webpack

react
1

Hi.
First of all, I know about this two topics:

  1. Meteor + Webpack: ES6 modules, hot-code-patching, fixes load order & more, thanks to Adam
  2. Hot reload with React.js, thanks to Benoit

But I have a lot of questions.
In my opinion, both of these guys have made an React.js app with Meteor backend

Is it possible to make Meteor app with React.js frontend? (-:
And with webpack (-:

For exapmle:

-appfolder
   -react(client?!)
       -component1 folder
       -component2 folder
       -component3 folder
       -componentN folder
   -lib
       -routers folder
            -Flow-router renders component1
            -etc
   -collection
   -private
   -public
   -server
       -methods folder
       -pubs folder
       -startups folder

In Adam’s version I have no idea, how replace react-router to flow-router. And all logic in index.js…Is it possible without index.jsx, but with flow-router in lib folder in Meteor app??

Or is it impossible?
Or is it webpack restrictions?

2

Honestly, my ideal workflow is having everything inside the Meteor folder. But with Webpack, it’s just impossible because everytime you change a file, the Meteor server will restart and it would make the hot-reload with no browser refresh impossible. It’s the only reason.

It is actually using Meteor stuff inside the React folder. It has access to everything you normally would have access on the client.

If I could get hot module replacement (HMR) inside the Meteor isobuild, we could drop webpack and have everything inside Meteor. It would be really nice, but it is a lot of work :slight_smile:

3

Benoit, for me, honestly, your version is a little bit easier for understanding (-:
And no problem with react folder outside meteor folder.

Is it possible to make the app without your App.jsx and index.jsx, but with flow-routes inside meteor/lib folder? Honestly, I got used to iron-router and flow-router, and prefer make some checks in onBeforeAction or triggersEnter…

4

Hey,

You can easily use the FlowRouter. However, you would need to defined your routes inside react/index.jsx.

If FlowRouter is installed inside your meteor project, you will have access to FlowRouter global variable (or any Meteor global variable).

5

All my routes must be in one file index.jsx?
Not very convenient, but not very critical. I have to try (-:

6

Yep! I’m actually using FlowRouter in one of my apps too. It’s a bit tricky when using in Webpack because it’s loaded a bit late. However, there is a wait method you can call when all of your routes are defined:

You could also put it in meteor_core if that’s wanted.

7

No you don’t need. You can do that in any file but react/index.js is the entry point.

8

Not at all clear now (-:
If I have 20-30 routes, which of these should be in index.jsx?

9

It doesn’t matter in what files they are. If you are using react-router, you can have only a single root route and use childRoutes that are imported from other files. If you’re using FlowRouter, you could probably put it anywhere.

10

OK, here are some results of experiments
First of all, one small question: why size of kickstart folder more than 660 MB?! Is it normal??

It isn’t possible simply replace ReactRouter to FlowRouter, needs some hacks.

In result my index.jsx is:

import TodoApp from './todo/TodoApp';

FlowRouter.route('/', {
    action: function(params) {
	ReactLayout.render(TodoApp);
    }
});


FlowRouter.initialize();

Without App.jsx at all.

And, thanks to Adam, I’ve added /meteor/client/lib/routes.js with FlowRouter.wait();
And, of cause, FlowRouter.initialize(); in index.jsx.

Then I tried to register routes in different files - did not work.
I know, I’m doing something wrong, but can’t understand what…
I think, I need some more experiments…but even if I have to write all the routes in a one file, it’s not such a big price for convenience (-:

11

It did a fresh install and it was 244 MO, 600 MO is not normal.

12

It did a fresh install and it was 244 MO, 600 MO is not normal.

Could be an issue with NPM 2 vs 3 ?