The story of Meteor Admin

Once upon a time, I swore by WordPress. I had got pretty good at using advanced custom fields and using custom post types to do pretty much anything I wanted. I built lots of complex web apps, writing terrible AJAX functions to try and make the user experience as slick as possible.

I bounced about in Berlin making MVPs and whenever anyone said I should use a different framework, I was all like:

“But WordPress does so much for me!”

I was prepared to forgive WordPress for pretty much anything because it provided me with pre-built features like a great user system, rooting and most importantly an admin dashboard. 

Eventually, I made the switch to Meteor thanks to Kasper and others. I was completely blown away by how simple it was to achieve the results that I’d been striving for with WordPress. Ok, there was a bit of a learning curve, but I knew that I’d found the one. Still, there was one question:

Where’s my admin dashboard at?

Admin dashboards are really important. They

  • Let you quickly (and safely) create/edit/remove data
  • Allow administrators privileged access 

If you’re building for yourself, great. You can probably get away with not using an admin dashboard and instead use something like Robomongo. However, if you’re producing something for a client, they’re almost certainly going to demand an admin dashboard

I found myself creating 2 admin dashboards in 2 weeks for 2 different clients. That was 1 too many.

The three pillars of Meteor Admin

Clarity

Information should be displayed and accessed in the most simple of ways. It should be intuitive. In my opinion, it should also be beautiful (especially if a future customer service agent will spend hours looking at it).

Meteor Admin’s solution: AdminLTE.

AdminLTE is open source and is fricking awesome. I’m sure that the agency behind it is raking in new clients because of their open source efforts.

CRUD functionality

Not a nice word, but extremely important. CRUD stands for Create, Read, Update and Delete. In Meteor speak this:

Collection.insert

Collection.find

Collection.update

Collection.remove

Meteor Admin’s solution: Autoform.

Autoform is a truly awesome package of Meteor badass, Eric Dobbertin, and should be used in every frickin’ app that contains a form.

Without Autoform, Meteor Admin would not have been a possibility. By defining and attaching a schema to each collection, it’s possible to automatically generate a form. By defining the form’s operation (insert, update or  remove) we get the CUD of CRUD. Does that sound better or worse..?

Exclusivity

You can think of your Admin Dashboard as a member’s only exclusive club which only lets that exclusive *cough* administrator *cough* type of person in.

Meteor Admin’s solution: Roles.

Roles let’s you create roles for your Meteor app and check a user’s _id against those roles.

Putting it all together

This was the first ‘serious’ package I built, but effectively the development process went like this:

Brainstorm

  • Figure out what was good and bad about the 2 meteor admin dashboards I’d done before
  • Think about the admin dashboard I’d want for various web apps
  • Look at limitations of Autoform and Roles package and play around with LTE

Plan

  • Routes & their parameters
  • Subscriptions & publish functions
  • Templates – how to minimize and reuse as much as possible
  • What kind of API (AdminConfig) to use?

Development

  • Break up LTE Admin dashboard and meteor-ify it using ‘dummy’ routes with no meaningful parameters
  • Implement Autoform’s for the create / update pages
  • Add Roles and prevent non-admin users from viewing 

Testing

  • Tentatively post on Meteor talk
  • Implement with existing Meteor apps

Making it developer friendly

I like idiot-proof software for personal reasons.

Replacing allow rules with methods

Originally, you had to set your own allow rules such that an admin user could create, update and remove from the collection.

This is necessary because Autoform (intelligently) does as much on the client side as it can. To get round this, I needed to hijack the submit button for my own nefarious purposes: now it calls a method.

CRUD behaviour running server side skips the allow and deny rules. It was only necessary to check that the method was coming from an admin user.

adminUpdateDoc: (modifier,collection,_id)->
  if Roles.userIsInRole @userId, ['admin']
    #Do update

Allow for customisations

Once you’ve got your dashboard up and running, you need to be able to change it. 

So far the list of the major customisations include:

  • Adding collections
  • Assigning collection a colour and an icon
  • Controlling which columns you see when looking at collection data
  • Customizing widgets on the home page
  • Hide fields from the forms (like createdAt for exmample)
  • Adding links to the sidebar

Next steps…

What I really want to see happen in 2015:

  • Solve the problem of collection dependencies
  • Lots of widgets
  • Add-on packages for showing user stats etc.

Please let me know if you have any feature requests or bugs on Github or in the comments.

2016-11-20T15:16:24+00:00

17 Comments

  1. Roderick Silva January 22, 2015 at 1:18 pm - Reply

    I like this! I’m going to play around with it and learn it as best I can. I’m learning Meteor but I’ll try to help out with this as much as possible. Yes, I’m ready to replace WordPress.

  2. yogiben January 26, 2015 at 3:19 pm - Reply

    This week we’ll be release an ‘AdminSettings’ package which allows an admin to save values in the backend. Another feature I really miss from WP.

  3. Craig February 26, 2015 at 5:20 am - Reply

    Love the AdminSettings…
    do you have any widgets as examples..

    • yogiben February 26, 2015 at 7:08 pm - Reply

      Nothing worth sharing yet. I’d love to see Google Analtyics and Keen.io in there.

      Do you have any suggestions of what you’d like to see?

      • Craig February 27, 2015 at 2:12 am - Reply

        A chart example would be great.
        Keen.io also looks good.

        • Craig February 27, 2015 at 6:46 am - Reply

          How can add an onWait event to the AdminDashboard, can i so how use the AdminController… I need to load some js files with dependencies for a chart

          • yogiben February 27, 2015 at 5:28 pm

            If it’s just static js, it should be available whenever the page has rendered.

            If you’re creating your own custom templates, you should be able to use customTemplate.rendered = function(){…

            and load the chart like that?

          • Craig February 28, 2015 at 1:23 am

            Template.fred.rendered = ->
            node = document.createElement(‘script’)
            node.type = “text/javascript”
            node.src = “http://localhost:3000/js/morris-data.js”
            $(‘body’)[0].appendChild( node )

            nice..

          • yogiben February 28, 2015 at 5:16 pm

            It’s also possible to just include the morris-data.js somewhere in your client folder. Then the library should be available on the frontend.

  4. Remco Veldkamp March 5, 2015 at 9:04 am - Reply

    I’m currently evaluating Meteor Admin for a new project and I like it very much. Does anyone have any examples for creating wholly custom edit forms? Anyway good job and keep it up!

    • yogiben March 5, 2015 at 2:08 pm - Reply

      This is possible, but it’s much more comfortable to use the SimpleSchema to define a schema and then add the `autoform` options object.

      • Remco Veldkamp March 5, 2015 at 10:21 pm - Reply

        Thx for your reply! Yes I’m, aware of that but it will only allow me to customize the editor for a specific property. Sometimes you just want to have something extra on the edit screen. Come to think of it, that is still possible with a custom property editor but it would be hackish.

        Anyway, I did figure out how to create my own autoform by going through the source code.

  5. Craig March 25, 2015 at 12:12 am - Reply

    Are you planning any new releases?

    • yogiben March 25, 2015 at 3:08 pm - Reply

      Yes. Small release this week. Big updates by mid-April.

  6. Jake Muller March 30, 2015 at 1:26 pm - Reply

    Hi Yogi, first of all thank you so much for this package. It’s maing my life a lot easier. I was wondering, how would I go about adding any other buttons to the list page? Other than edit/delete. I want to be able to call a custom Meteor.method when clicking a button that I add in a column.

    • yogiben April 1, 2015 at 9:42 am - Reply

      Hey Jake,

      At the moment, this is not possible through the APIs. I suggest that you download the package from Github to your packages folder and then start to hack the code.

      Good luck!

  7. Alex Muraro September 2, 2015 at 3:05 pm - Reply

    This is interesting, I’m also coming from a WordPress background and falling in love with Meteor. They maybe share an underlying “feeling”, i dunno…

Leave A Comment