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)

Answer 1

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

Question

1 answers

solution1
1 2016-05-05 20:50:59

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

Question

1 answers

solution1 1 2016-05-05 20:50:59

solution1
1 2016-05-05 20:50:59