Help with routing

help
1

I’m new to Meteor and the recent changes made things pretty confusing to me.

Right now, I want to create and admin page, with basic layout and template, but I don’t know what and where to import.

I’m using FlowRouter.

Can you guys show me a sample file structure, with the imports?

2

Here’s a really quick step by step example showing you how to setup a simple admin layout (no auth) with a welcome page, using Meteor 1.3 and Flow Router (assuming Blaze).

  1. meteor create admin-layout-example
  2. cd admin-layout-example
  3. meteor add kadira:flow-router
  4. meteor add kadira:blaze-layout
  5. Create directory and file imports/startup/client/index.js with contents:
import './routes.js';
  1. Create file imports/startup/client/routes.js with contents:
import { FlowRouter } from 'meteor/kadira:flow-router';
import { BlazeLayout } from 'meteor/kadira:blaze-layout';

import '../../ui/admin/layout.js';
import '../../ui/admin/welcome.js';

FlowRouter.route('/admin', {
  name: 'adminWelcome',
  action() {
    BlazeLayout.render('adminLayout', { main: 'adminWelcome' });
  },
});
  1. Create directory and file imports/ui/admin/layout.js with contents:
import './layout.html';
  1. Create file imports/ui/admin/layout.html with contents:
<template name="adminLayout">
  <header>HEADER</header>
  <div class="content">
    {{> Template.dynamic template=main}}
  </div>
  <footer>FOOTER</footer>
</template>
  1. Create file imports/ui/admin/welcome.js with contents:
import './welcome.html';
  1. Create file imports/ui/admin/welcome.html with contents:
<template name="adminWelcome">
  <div class="admin-welcome">
    Welcome to the admin!
  </div>
</template>
  1. Remove client/main.html.
  2. Replace client/main.js contents with:
import '/imports/startup/client';
  1. Start your app and access http://localhost:3000/admin
1 Like
3

Thank you so much for the help!

Can you explain why importing the routes through index.js is necessary? By using import '/imports/startup/client'; in the main.js file am I not importing routes.js also?

4

Behind the scenes import statements are converted to CommonJS require statements. If you’re requiring a directory (like you are with import '/imports/startup/client') and you don’t have a default index.js file defined, then the require will fail.

5

I see.

Unfortunately, I’m getting an error: Cannot find module '/imports/startup/client'

Do you know how to fix this?

6

I created a quick runnable demo app with the steps I outlined above. You can get the source here. Maybe take a look and compare your work against this one.

7

Stupid mistake: I created the files at imports/client/startup/ instead of imports/startup/client

Thanks!

1 Like