Server-side routing with Meteor.js + React.js

Question

My question is how to correctly set up routes on the server side that are connected with react.js on the client.

I'm working on an application built on Meteor.js, which I'm integrating with React.js. The application is going to require a number of routes. My main issue (so far), is that I anticipate a lot of server side api calls using their respective (secure) secret keys. The calls will be something like

Meteor.http.call("GET", "http://search.twitter.com/search.json?q=perkytweets");

Obviously, these should be server side for security reasons. I will then handle the data on the server and pass what I need over to react, to then be rendered on the DOM.

It seems that Flow Router is not ideal, although it seems to be the go-to for Meteor+React applications, since it focuses on client side routing rather than the server side routing that I require.

Typically, Meteor.js applications are built with Iron Router, but I've had some difficulty getting React to work alongside of Iron Router.

Please Note: the following code doesn't seem to indicate a need for anything server side, which is because I'm just getting everything set up with a tutorial, but it eventually will...right now just trying to get routes working.

I have been doing the following:

REACT CODE BELOW:

client/main.html

<head>
  <title>List</title>
</head>

<body>
    <div id="render-target"></div>
</body>

client/main.jsx

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';

import App from '../imports/ui/App.jsx';

Meteor.startup(() => {
  render(<App />, document.getElementById('render-target'));
});

imports/ui/App.jsx

import React, { Component } from 'react';
import Spot from './Spot.jsx';

// App component - represents the whole app
export default class App extends Component {
  getSpots() {
    return [
      { _id: 1, text: 'This is task 1' },
      { _id: 2, text: 'This is task 2' },
      { _id: 3, text: 'This is task 3' },
    ];
  }

  renderSpots() {
    return this.getSpots().map((spot) => (
      <Spot key={spot._id} spot={spot} />
    ));
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>List</h1>
        </header>
        <ul>
          {this.renderSpots()}
        </ul>
      </div>
    );
  }
}

imports/ui/Spot.jsx

import React, { Component, PropTypes } from 'react';

// Task component - represents a single todo item
export default class Spot extends Component {
  render() {
    return (
      <li>{this.props.spot.text}</li>
    );
  }
}

Spot.propTypes = {
  // This component gets the task to display through a React prop.
  // We can use propTypes to indicate it is required
  spot: PropTypes.object.isRequired,
};

Attempted Fix #1:

server/main.js

import { Meteor } from 'meteor/meteor';

Meteor.startup(() => {
  // code to run on server at startup
});
Router.route('/', function () {
  this.layout('homePage');
});

client/main.html

<tempate name="homePage">
    <head>
        <title>List</title>
    </head>

    <body>
        <div id="render-target"></div>
    </body>
</template>

Here is the result (the Iron Router message means that the routes have not been implemented alongside of react)

What do you mean by server-side API calls? (Meteor methods? Subscriptions? REST calls?) I have a hard time undestanding your problem, maybe since your post doesn't contain a question. :) — aedm, May 04 '16 at 21:15
fair point: My question is how to correctly set up routes on the server side that are connected with react.js on the client. Calls would be something like: Meteor.http.call("GET", "http://search.twitter.com/search.json?q=perkytweets"); — maudulus, May 04 '16 at 21:21
I still don't really understand. What do you mean by server-side routes? Do you want to achieve server-side React rendering? If yes, then [Flow Router SSR](https://github.com/kadirahq/flow-router/tree/ssr) might help you. — aedm, May 04 '16 at 21:31
Going along with this question (http://stackoverflow.com/questions/23975199/when-to-use-client-side-routing-or-server-side-routing) and this page (https://facebook.github.io/react/docs/environments.html), I'm wondering how I can build a react/meteor app that does a lot of server side api calls but then only sends specific data (data that is safe to be exposed) to be used/rendered client side. — maudulus, May 05 '16 at 14:36
There's no need for server-side routing to achieve this. Just create a Meteor method that performs the API call on the server, processes the reply, and then sends only as much data to the client that's required to render the page. — aedm, May 05 '16 at 17:43
How can you get react.js to handle the data sent from the Meteor method? — maudulus, May 05 '16 at 19:51

score 1 · Answer 1 · answered May 05 '16 at 20:50

No need to use server-side routing here, just create a server-side Meteor method to perform the API calls, and display their results.

This example component calls a method upon mounting, and handles its return value asynchronously.

export class Pony extends React.Component {

  // ...

  componentDidMount() {
    Meteor.call("call-pony-name-api", customPonyParameter, (error, result) => {
      if (error) {...}
      this.setState({ponyName: result.ponyName});
    });
  } 
}

Server-side routing with Meteor.js + React.js

1 Answers1