Search code examples
javascriptmeteoriron-routerstderr

Why does Meteor get cranky with this IronRouter code?


In response to the comment by AutumnLeonard here, I tried a minimalistic implementation of the idea. I first added the iron router package via "meteor add iron:router" and then tried this code:

blogtest.html:

<head>
  <title>blogtest</title>
</head>

<body>
  <h1>This is really something, isn't it!?!</h1>

  {{> thought}}
  {{> anotherthought}}
</body>

<template name="thought">
  <p>THis is a random thought.</p>
</template>

<template name="anotherthought">
  <p>THis is another random thought.</p>
</template>

blogtest.js:

Router.route("/:blog_post_title", {template: "thought", name: "thought"});
Router.route("/:blog_post_title", {template: "anotherthought", name: "anotherthought"});

if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault('counter', 0);

  Template.hello.helpers({
    counter: function () {
      return Session.get('counter');
    }
  });

  Template.hello.events({
    'click button': function () {
      // increment the counter when button is clicked
      Session.set('counter', Session.get('counter') + 1);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

(the top two lines are the only ones I added; the rest are superfluous but harmless "boilerplate" code left over from the default meteor app)

...but on trying to run it, it fails with throbbing blue and purple growlings emanating from the command prompt, to wit:

W20151007-09:25:00.634(-7)? (STDERR) Error: A route for the path "/:blog_post_ti
tle" already exists by the name of "anotherthought".

(why does it complain about "anotherthought" but not about "another" if my IronRouter syntax is wrong here?)

W20151007-09:25:00.635(-7)? (STDERR)     at blogtest.js:2:8

(line 2, char 8 is the "r" in "Router.route" on the second line...???)

W20151007-09:25:00.635(-7)? (STDERR)     at C:\Misc\blogtest\.meteor\local\build
\programs\server\app\blogtest.js:37:4

(there is no line 37 in blogtest.js ...???)

UPDATE

Okay, so I changed the HTML to:

<head>
  <title>blogtest</title>
</head>

<body>
  <h1>Here's a thought:</h1>

  <!-- {{> thought}}
  {{> anotherthought}} -->
</body>

<template name="thought">
  <p>This is a random thought.</p>
</template>

<template name="anotherthought">
  <p>This is another random thought.</p>
</template>

...and the routing code to:

Router.route("/thought", {template: "thought", name: "thought"});
Router.route("/anotherthought", {template: "anotherthought", name: "anotherthought"});

...and it no longer fails to run; in fact, I do see what I would expect to when I enter "http://localhost:3000/thought", namely:

Here's a thought:

This is a random thought.

...and what I expect with "http://localhost:3000/anotherthought", too, namely:

Here's a thought:

This is another random thought.

However, I see this at localhost:3000 (the default URL):

Here's a thought:

Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/."

So what do I need to enter so that the "Oops" goes away? What Route.route() is needed?


Solution

  • It turns out that it's easier than what I was trying; most of that fancy-pants stuff was effluvia.

    All I need in the *.js file is:

    Router.route('/');
    Router.route('/thought');
    Router.route('/anotherthought');
    

    And the following HTML works as expected (showing just the H1 for "localhost:3000", and showing the appropriate template in addition to the H1 when I append "/thought" or "/anotherthought" to that base URL.

    <head>
      <title>blogtest</title>
    </head>
    
    <body>
      <h1>Here's a thought:</h1>
    </body>
    
    <template name="thought">
      <p>This is a random thought.</p>
    </template>
    
    <template name="anotherthought">
      <p>This is another random thought.</p>
    </template>
    

    So to create a meteor app to which I can add content that I can share, all I need to do is:

    0) At the command prompt, enter "meteor create <projectName>", such as: "meteor create thoughts"

    1) After cd'ing to the directory (which is the projectName), as directed, enter "meteor add iron:router"

    2) So that your "raw" URL doesn't throw an iron exception, add this to your .js file:

    Router.route('/');
    

    3) Add a new template to the .html file each time I want to make something public.

    4) Then (each time), add a routing directive in the .js file with the name of the template; e.g., if you add this template:

    <template name="thought">
      <p>This is a random thought.</p>
    </template>
    

    ...you would add this line to the .js file:

    Router.route('/thought');
    

    5) Make your meteor app public by, at the command prompt, entering "meteor deploy "; e.g., you could enter "meteor deploy thoughts" or "meteor deploy rompecabeza" (the deployed name doesn't have to match the project name).

    6) Advise whoever you want to see it to "point their browser at" your URL, such as, "Hey, gang! Go czech out '<your URL, with the appended template name>'! You can give me a penny later!"

    That's all there is to it.

    For example, I created a static site that serves up a few of my photos. They can be seen via these links:

    http://dplatypus.meteor.com/pinnacles
    http://dplatypus.meteor.com/garrapatabeach
    http://dplatypus.meteor.com/garrapataturnout
    http://dplatypus.meteor.com/mcwayfalls
    http://dplatypus.meteor.com/pfeifferbeach
    

    Alternatively, you can just click the links above from dplatypus.meteor.com