FSM 5: Routes and imports

Welcome to Part 5 of Fresh Start Meteor, a guide that walks you through creating a new Meteor project using ES6, React, Redux, FlowRouter, and Sass. Feeling lost? Start with Part 1.

Okay, so we know how to bring the Hello and Info components into the WelcomePage page, but how do we turn a web address (in this case http://localhost:3000/) into the WelcomePage using the ApplicationLayout? Our answer lies in FlowRouter, so let’s hook that up now.

In the routes/ directory, make a new file called welcomeRoute.jsx and paste the following JSX:

import React from 'react';
import {mount} from 'react-mounter';
import {FlowRouter} from 'meteor/kadira:flow-router';
import ApplicationLayout from '/imports/ui/layouts/application/ApplicationLayout.jsx';
import WelcomePage from '/imports/ui/pages/welcome/WelcomePage.jsx';
FlowRouter.route('/', {
    name: 'welcome',
    action(params) {
        mount(ApplicationLayout, {
            content: (
                <WelcomePage />
            ),
        });
    }
});

Let’s walk through this. First we import React, FlowRouter, and React Mounter. Then we need to import the layout and page templates we wish to associate with this route.

The FlowRouter.route() function takes the desired address and an object that defines the name of the route (for future reference) and the action that should be taken by the app at that URL. We use the mount() function to set the layout and pass to it a props object. You may recall seeing the line {this.props.content} in ApplicationLayout.jsx — this is where that content prop is defined. You can also pass any other props you might find useful in this same object. In this case, we pass an XML object containing the page we want to insert into the layout.

As you can imagine, quite a lot of logic (including authentication) could potentially happen for this single route. In order to easily find and modify individual route logic, it is my suggestion that each route be defined in a separate file in the routes/ directory. Many tutorials might have you put all routes in a single file, but I find this to quickly become unwieldy.

Importing everything

All of our UI files are taken care of, so all we need to ensure is that our route is imported into the client/ directory to be loaded. The MDG has an official recommendation that reinforces this architecture:

It is recommended that you create exactly two eagerly loaded [JavaScript] files, client/main.js and server/main.js, in order to define explicit entry points for both the client and the server. — Official Meteor Guide

Before we modify client/main.js, let’s look ahead for a moment. We can foresee that pretty soon we’ll have a lot of routes in the routes/ directory, as well as more files in startup/client/, and it would get annoying to keep scrolling up to the client/main.js file to import each new one. Luckily we won’t have to do that!

With ES2015, not only can we import JS and JSX files but we can also import whole directories as long as an index.js file is present. That means we can create a routes/index.js file to import all of the route files and then import that one file into client/main.js. We’ll do this for both startup/routes/ and startup/client/:

startup/routes/index.js:
-----
import 'welcomeRoute.jsx';
startup/client/index.js:
-----
// Leave this file blank for now

Now, we can replace everything in client/main.js with the following two lines:

import '/imports/startup/client';
import '/imports/startup/routes';

We will (likely) never need to touch this file again! Which is great, because our focus can remain in context when we add new features.

Let’s do the same thing with startup/server/. Add an empty startup/server/index.js file, then replacing the code in server/main.js with the following line:

import '/imports/startup/server';

And that’s it! Switch on over to that tab with your app and gaze upon the glory… of something that looks and behaves no differently from literally the first thing we did two articles ago. Congrats!

EXTRA CREDIT: Build a 404 page

You’ll need a NotFoundPage.jsx file, a notFoundRoute.jsx file, and a new import line in routes/index.js. In the page, you don’t need any component imports nor do you need a constructor or any other methods aside from render(). In the route definition you want to be able to catch any and all URLs that aren’t those you’ve otherwise defined, so you’ll use this line instead of directly copying welcomeRoute.jsx:

FlowRouter.notFound = {
    ...

You should be all set! See if it works by adding some random crap to the end of the app’s URL. We’ll double-check your new files in the next article :)

FSM 6: Getting stylish

You can help make this guide better by commenting when anything seems unclear, unhelpful, or plain wrong. Please be clear, detailed, and keep it positive! If you have suggestions for future articles or questions about the guide in general, feel free to tweet at me: @teaganatwater Thanks so much!