Where to put a separate admin interface for a Meteor app?

Question

I'm trying to build a smart package for Meteor app that provides some monitoring capabilities and other tools based on the features of the smart package. For more details read this question.

In any case, I'm trying to figure out the best way to create an admin interface for this package, which will of course be itself running in Meteor. Ideally, I'd like something similar to observatory, except on a separate part of the site that the package can control (or even on a different port.)

The way the observatory folks have tackled this problem is pretty ingenious - they just have a popup div on the main app page that provides the necessary information. That's fine, but not the optimal way for revealing the interface on an app, in my opinion. The problem with using routes is that the popular Meteor router that everyone uses doesn't support more than one "stack" of pages, and better Meteor routers that have been developed (such as by Chris Mather in Devshop 5) haven't been released yet.

Can anyone suggest a good approach to tackle this problem? Ideally my package would just be able to render its own admin templates on a separate part of the site such as /admin.

Bevel

Answer 1

As James Hatfield pointed out, Iron-Router now supports multiple layouts. For those hitting this thread now, this is the best way to handle the multiple layout scenario.

Router.map ->
  @route 'home',
    layoutTemplate: 'homeLayout'
    path: '/'

  @route 'dashboard',
    layoutTemplate: 'dashboardLayout'

Ichang

Yep, this is now the way to go. – Bevel

I think the OP’s Q can be applied to this as well (of which I can’t find an answer). Please correct where needed. My website has a public area selling the service. The ‘premium’ part is what is accessed with membership. 90% of codebase is for the ‘premium’ functionality. Meteor packages up all the appropriate code for the client which downloads it. That’s fine if you are getting ready to log in and use the premium section, but seems a waste for the shopper. Q: How would one separate these two codebases? Thanks. – Giguere

I've been actually separating the two code bases, admin isn't compiled in to the application. It exists as a separate application and I use a shared mongodb instance for data. In a live situation you would re-use the mongodb connection string and the admin code base and it's functions never get compiled in, no chance of reverse engineering whats not there. – Ichang

Answer 2

IronRouter supports multiple layouts.

https://github.com/EventedMind/iron-router

Router.configure({
  layout: 'layout',
  notFoundTemplate: 'notFound',

  loadingTemplate: 'loading',

  renderTemplates: { 
    /* render the templated named footer to the 'footer' yield */
    'footer': { to: 'footer' },

    /* render the template named sidebar to the 'sidebar' yield */
    'header': { to: 'header' }
  }
});

Router.map(function() { 

  this.route('admin', {
    layout: 'admin_layout',
    path: '/admin',
    template: 'admin',
    data: function() {
      return { page : 'admin'}
    },
    onBeforeRun: checkLoggedIn,
    renderTemplates: { 
    /* render the template named footer to the 'footer' yield */
    'admin_footer': {to: 'footer'},

    /* render the template named sidebar to the 'sidebar' yield */
    'admin_login_header': {to: 'header'}
    }
  });

this.route('home', {
    path: '/',
    template: 'home',
    data: function() {
      return { page : 'home'}
    }
  });


<template name="layout">
//this is where your standard view layout goes

</template>

<template name="admin_layout">
//this is where your admin view layout goes

</template>

Could work pretty well if you match it up with Meteor accounts UserID checks and onBeforeRun hooks. I haven't fully tested the security aspect but it looks like it will work.

Manson

Iron Router didn't exist when I posted my question. And no, it doesn't: github.com/EventedMind/iron-router/issues/41 – Bevel

Update, 4 months later: now, Iron Router does support multiple layouts (version 0.6.0+) – Bevel

Answer 3

Please take a look at my project at github. I have a solution for this. It might not be the best, but it is working so far.

github.com/voteapp

<head>
    <title>Index</title>
</head>

<body>
    {{> root}}
</body>

root template is using some other templates inside. I may use 2 different index files. 1 for site and 1 for management panel.

root template:

<template name="root">
    {{#if adminURL}}
        {{> adminLogin}}
    {{else}}
        {{> site}}
    {{/if}}
</template>

adminLogin template:

<template name="adminLogin">
    {{#if currentUser}}
        {{> management}}
    {{else}}
        admin login page.
            <div style="float: right">
              {{loginButtons align="right"}}
            </div>
    {{/if}}
</template>

management template:

<template name="management">
    <div id="header" class="navbar">
       ....
    </div>
    <div id="container" class="row-fluid">
       ....
    </div>

    <link rel="stylesheet" href="/css/admin.css">
</template>

site template:

<template name="site">
     <h1>Hello World!</h1>

     <link rel="stylesheet" href="/css/site.css">
</template>

This is not actually html from my project but it is something like this. With this way, CSS links will appear at the end of body tag. And for admin panel and site itself will have different html structure and css files. Also you may want to add javasctipt files also.

Millner

You may want to elaborate a bit with what you did exactly. – Bevel

Answer 4

Hi & thanks for referencing observatory! You are completely right in that eventually it would be nice to have management & monitoring separately and in fact we've been working in that direction lately, and this is going to be a primary direction as well - the goal is to monitor, analyze logs and provide some management capabilities in the cloud. It already has some basic functionality - check it out here: http://vega.observatoryjs.com/demo

BTW, the way we handled your problem in original observatory - just create a separate route in Pages or Iron Router etc and put just the observatory (or your admin panel) template there - in our case {{>logs_bootstrap}}. This way it'll be completely separate from the main app. But cloud is even better :)

Chub

@J_Ho That solution requires that the user be using a certain layout and router when you add it from a smart package, which is icky. – Bevel

Answer 5

Isn't this doable by simply using Meteor router and template helpers:

Specify your routes:

Meteor.Router.add({
    '/foo'  : 'foo',
    '/admin': 'admin'
});

Let's say you have a 3 column layout. Create your template like this:

<template name="body">
  <div class="container">
    <div class="span"4>
      {{renderPage LeftLayoutName}}
    </div>
    <div class="span"4>
      {{renderPage MiddleLayoutName}}
    </div>
    <div class="span"4>
      {{renderPage RightLayoutName}}
    </div>
  </div>      
</template>

Then specify your template helpers:

Template.body.helpers({
  LeftLayoutName: function() {
    switch (Meteor.Router.page()) {
      case 'foo':
        return 'foo_left';
      case 'admin':
        return 'admin_left';
    }
  },
  MiddleLayoutName: function() {
    switch (Meteor.Router.page()) {
      case 'foo':
        return 'foo_middle';
      case 'admin':
        return 'admin_middle';
    }
  },
  RightLayoutName: function() {
    switch (Meteor.Router.page()) {
      case 'foo':
        return 'foo_right';
      case 'admin':
        return 'admin_right';
    }
  }
});

Intrench

This is pretty clunky, right? First of all, your main page and admin page have to have the same layout. Moreover, you have all these repetitive logic statements. What if my admin page needs a completely different layout? – Bevel

admin panel and application must be seperate. that is the solution and how it should be. but problem is, how they will share and connect same database. – Millner

meteor-router has been superseded by iron-router. – Romaineromains

Answer 6

I had a similar question. There is less clunky example of doing this in the router meteor package example.

https://github.com/tmeasday/meteor-router/tree/master/examples/app-with-layout

Hope this helps.

Freebooter

meteor-router has been superseded by iron-router. – Romaineromains