Meteor 1.3, Mantra, and the Document Head

I recently started to adopt the Mantra application architecture for my Meteor 1.3 apps. Mantra is still in it’s early stages (0.2.0) so I ran into a situation that the spec and the current examples didn’t cover.

Prior to Meteor 1.3, I would just keep all the <head> stuff in an html file in /client/index.html. But we have no index.html in Mantra anymore. What do we do?

It’s a pretty simple solution. Kadira comes to the rescue with their Meteor package; DocHead.

First, add the Meteor package.

meteor add kadira:dochead

Then in a file on the client side:

// /client/main.js
import {createApp} from ‘mantra-core’;
import {DocHead} from ‘meteor/kadira:dochead’;
import initContext from ‘./configs/context’;
// modules
import module from ‘./modules/core’;
// init context
const context = initContext();
// create app
const app = createApp(context);
app.loadModule(module);
app.init();
// DocHead stuff
DocHead.setTitle(‘My Awesome App’);
DocHead.addLink({
href: ‘https://fonts.googleapis.com/icon?family=Material+Icons',
rel: ‘stylesheet’
});
DocHead.addLink({
href: ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css',
rel: ‘stylesheet’
});

Or you could just move the DocHead stuff into its own file and call it in main.js, like so:

// /client/dochead.js
import {DocHead} from ‘meteor/kadira:dochead’;
export default function () {
// head
DocHead.setTitle('My Awesome App');
DocHead.addLink({
href: 'https://fonts.googleapis.com/icon?family=Material+Icons',
rel: 'stylesheet'
});
DocHead.addLink({
href: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css',
rel: 'stylesheet'
});
}

And call it in main.js:

// /client/main.js
import {createApp} from ‘mantra-core’;
import insertHead from ‘./dochead.js’;
import initContext from ‘./configs/context’;
// modules
import module from ‘./modules/core’;
// init context
const context = initContext();
// create app
const app = createApp(context);
app.loadModule(module);
app.init();
// head
insertHead();

Apparently React Helmet is supposed to be implemented in the next Mantra release. But if you don’t want to until then, this is a quick and simple way to get stuff into the head.