Isomorphic alt with react-router and AltIso

[command-tab]

I'd love to see an isomorphic example combining react-router and AltIso (specifically, the recently added @AltIso.define component decorator). I find that I can't use AltIso.render on the client side because I have to call react-router's Router.run, so I end up replacing the AltIso.render call with something like:

import Iso from "iso";
import * as Render from "alt/utils/Render";

Iso.bootstrap(function (state, _, container) {
  alt.bootstrap(state);
  Router.run(routes, Router.HistoryLocation, (Handler) => {
    Render.toDOM(Handler, {}, container);
  });
});

It's very much like the client-side portion of AltIso.js, but allows for calling Router.run where necessary.

However, when I do that, I find that only my server side rendering works, and the client side route changes don't fire. Yet, if I omit usage of the @AltIso.define decorator in the relevant components, the client side route changes happen fine. So, there's some interaction going on there that's not emitting any warnings or errors.

I'm happy to pack up my example and submit a PR with it once I can get the remaining issues worked out.

Thoughts?

Thanks so much for these great tools!

[Jyrno42]

Can confirm i'm having the same issue, currently i just nopped the @AltIso.define blocks out from my clientside code with webpack.

Looking forward to your solution though.

[command-tab]

@Jyrno42 I'm not sure if this solution is correct, but I just found a possible solution (in app/app.js of geoshare). Instead of calling Iso.bootstrap like in the example above, calling Iso.on('react', ...) seems to work. Here's what my client.js looks like now:

import Router from "react-router";
import Iso from "iso";
import * as Render from "alt/utils/Render";

import alt from "./alt";
import routes from "./routes";

Iso.on('react', true, function (initData, _, node) {
  alt.bootstrap(state);
  Router.run(routes, Router.HistoryLocation, (Handler) => {
    Render.toDOM(Handler, {}, container);
  });
});

I'm still quite new to React, Alt, and ES6, so I'm interested to hear input from others on how to tackle the client side of the process, or if this is even a valid approach.

[command-tab]

Bah, still not having success. Render.toDOM seems to get wedged client side after the first react-router transition.

[goatslacker]

This will probably fix the react-router stuff: https://github.com/goatslacker/alt/pull/364

but there's still some work left to do, you can follow along in that PR though

[Jyrno42]

I currently sneak past the problem like this: https://gist.github.com/Jyrno42/4b376968bd15a6b4809a

[kkotlarski]

Just forked master merged #364 and still doesn't work