Server-side rendering via react-router?

[karldanninger]

Hey there! This is an amazing project, thank you for maintaining this. #LongLiveMeteor

There are some articles floating around how to do server rendering with react-router following this short guide on the react-router repo https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md

I'm not really sure how to string this up using your base. You mentioned SSR briefly in this post but I don't think SSR is really working with a freshly cloned version on base.

Any tips or help would be appreciated. 😘

[themeteorchef]

Hey Karl :) This is the jam for SSR in Meteor w/ React Router: https://github.com/thereactivestack/meteor-react-router-ssr. It's not perfect (e.g., can only have server rendered routes, not mix-and-match) but does work well enough.

[karldanninger]

Okie dokes! I saw that, but I didn't want to add more deps than I needed to since the state of things are still a bit wacky. I'll check it out nonetheless 👍 Thanks!!

[karldanninger]

@themeteorchef how do you know it's even working? when I curl localhost (base app) using ReactRouterSSR it still has an empty body

[karldanninger]

@themeteorchef gosh this shit is so painful. physically ill. 😷

Any other anecdotes other than that package? not a fan of it right now at all.

[themeteorchef]

Something that got me: make sure to move your routes file—routes.js—outside of any nested client or server directories (e.g., instead of /imports/startup/client, move it up to /imports/startup). As soon as I did that and made sure the routes were loaded on both the client and server, I got markup on a curl and in view source.

[karldanninger]

Weird, I did exactly that, and I'm getting the following error (I was working in base)

W20160808-10:55:21.232(-4)? (STDERR) /Users/karl/.meteor/packages/meteor-tool/.1.4.0.1mehvoc++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:280
W20160808-10:55:21.233(-4)? (STDERR)                            throw(ex);
W20160808-10:55:21.233(-4)? (STDERR)                            ^
W20160808-10:55:21.233(-4)? (STDERR)
W20160808-10:55:21.234(-4)? (STDERR) TypeError: $.extend is not a function
W20160808-10:55:21.234(-4)? (STDERR)     at /Users/karl/dev/base/node_modules/jquery-validation/dist/jquery.validate.js:19:3
W20160808-10:55:21.234(-4)? (STDERR)     at /Users/karl/dev/base/node_modules/jquery-validation/dist/jquery.validate.js:13:20
W20160808-10:55:21.234(-4)? (STDERR)     at Object.<anonymous> (/Users/karl/dev/base/node_modules/jquery-validation/dist/jquery.validate.js:17:2)
W20160808-10:55:21.235(-4)? (STDERR)     at Module._compile (module.js:409:26)
W20160808-10:55:21.235(-4)? (STDERR)     at Object.Module._extensions..js (module.js:416:10)
W20160808-10:55:21.236(-4)? (STDERR)     at Module.load (module.js:343:32)
W20160808-10:55:21.236(-4)? (STDERR)     at Module.Mp.load (/Users/karl/.meteor/packages/babel-compiler/.6.9.0.bvhig4++os+web.browser+web.cordova/npm/node_modules/reify/node/runtime.js:16:23)
W20160808-10:55:21.236(-4)? (STDERR)     at Function.Module._load (module.js:300:12)
W20160808-10:55:21.236(-4)? (STDERR)     at Module.require (module.js:353:17)
W20160808-10:55:21.237(-4)? (STDERR)     at require (internal/module.js:12:17)
=> Exited with code: 1
=> Your application is crashing. Waiting for file change.

and this is what the change looks like to your imports/startup/routes.js file:

// core
import { Meteor } from 'meteor/meteor';

// react
import React from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { ReactRouterSSR } from 'meteor/reactrouter:react-router-ssr';

// templates
import { App } from '../ui/layouts/app';
import { Documents } from '../ui/pages/documents';
import { Index } from '../ui/pages/index';
import { Login } from '../ui/pages/login';
import { NotFound } from '../ui/pages/not-found';
import { RecoverPassword } from '../ui/pages/recover-password';
import { ResetPassword } from '../ui/pages/reset-password';
import { Signup } from '../ui/pages/signup';

const requireAuth = (nextState, replace) => {
  if (!Meteor.loggingIn() && !Meteor.userId()) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname },
    });
  }
};

export const AppRoutes = (
  <Route path="/" component={ App }>
    <IndexRoute name="index" component={ Index } onEnter={ requireAuth } />
    <Route name="documents" path="/documents" component={ Documents } onEnter={ requireAuth } />
    <Route name="login" path="/login" component={ Login } />
    <Route name="recover-password" path="/recover-password" component={ RecoverPassword } />
    <Route name="reset-password" path="/reset-password/:token" component={ ResetPassword } />
    <Route name="signup" path="/signup" component={ Signup } />
    <Route path="*" component={ NotFound } />
  </Route>
);

ReactRouterSSR.Run(AppRoutes);

[karldanninger]

OKAY. I took 2 minutes and stripped it way down to a really simple app. I got it to work with a stupid simple example and it's actually rendering just fine the way you explained. Party! 🎉

Okay, back to real work now.

Thanks Mr. RubberDuckChef™

[LazerJesus]

@karldanninger could you post the solution? i am having the same problem... or rather breakdown.

[binaryme]

Regarding this error TypeError: $.extend is not a function I discovered a difference between pup base and the ssr pup repo.

and that part of the code is not mentioned in the SSR tutorial on themeteorchef.

the difference is on import/api/OAuth/server/methods.js import $ from 'jquery'; import 'jquery-validation'; if (Meteor.isClient) { import $ from 'jquery'; import 'jquery-validation'; @FinnFrotscher

[cleverbeagle]

@nubestra and others, it's important to note that this repo (Base) has been deprecated in favor of Pup here: https://github.com/cleverbeagle/pup. Recent tutorials (like the SSR one) have relied on Pup and not Base, so make sure to confirm any issues with that codebase (and report issues on there as well if you find them).

[binaryme]

The error was using base, not pup, you are right, cheers!