In this tutorial I’m going to show you how to add a CMS to a MeteorJS website using ButterCMS. The finished code for this tutorial is available on Github.
Meteor is a free and open-source JavaScript web framework written using Node.js.
ButterCMS is a hosted API-first CMS and content API that lets you build CMS-powered apps using any programming language. Referred to as a “headless cms”, Butter is similar to WordPress except that you can build your website in your language of choice and plug-in dynamic content using an API. You can sign into ButterCMS with your Github account.
Getting Started
We’ll start with a basic Meteor website that uses Blaze templates and Iron Router for routing. You can swap in another templating solution like React if you prefer.
Get the starter code and make sure it runs:
git clone https://github.com/buttercms/meteor-cms-website-boilerplate.gitcd meteor-cms-website-boilerplatemeteor npm installmeteor
If you’re new to MeteorJS, check out their quick start guide for an introduction.
Setting up a page template
The first thing we’ll do is create a basic page template in client/main.js. Using ButterCMS, your client will be able to create custom pages that use this template.
<head><title>Meteor Website</title></head><body></body>
<template name="home">Hello world!</template>
<template name="page"><h2>{{page.title}}</h2><p>{{page.summary}}</p>{{{page.content}}}</template>
Notice that we use three brackets around page.content. Triple-braced template tags in Blaze templates are used to insert raw HTML. In general yu should be careful when allowing raw HTML since it exposes security threats such as cross-site scripting. Since our page content will be generated by our client and served from the content management system, we can assume it is safe.
Setting up ButterCMS
Now we’ll setup ButterCMS so that our client can create and manage pages using this template.
Sign into Butter with Github and click the “New workspace” link on the sidebar. We’ll call this workspace “Custom Pages”.
Next we’ll create a new content field. A content field lets provides a form field for editing content in ButterCMS, and an API key for accessing and displaying that content on website. We’ll create a new collection called pages.
On the next screen, we’ll setup the properties for items in the collection. Notice that we use the same keys as in our Meteor template.
Finally, click on the “Custom Pages” link in the sidebar and create your first page.
Integrating ButterCMS
We’ve created our first page in ButterCMS, now let’s display it on our website!
First install the ButterCMS Node.js API client:
meteor npm install buttercms
Then create a dynamic route that fetches the page’s content from ButterCMS and renders it with the template we created earlier.
import Butter from 'buttercms';import './main.html';
const butter = Butter('de55d3f93789d4c5c26fb07445b680e8bca843bd');
Router.route('/', function() {this.render("Home")});
// Dynamic pagesRouter.route('/:slug', function() {let slug = this.params.slug;
let resp = await butter.content.retrieve(['pages[slug='+slug+']'])
// Get first item in returned collection of pageslet page = resp.data.data.pages[0];
this.render('Page', {data: {page: page}});});
Browse to [http://localhost:3000/first-page](http://localhost:3000/first-page) and you should see the content from ButterCMS displayed.
SEO
Our dynamic pages are working, but crawlers from search engines and social networks do not execute Javascript so our blog has terrible SEO.
First we’ll install the ms-seo helper package and make sure we have good HTML titles and descriptions.
meteor add checkmeteor add manuelschoebel:ms-seo
Router.route('/:slug', function() {let slug = this.params.slug;
let resp = await butter.content.retrieve(['pages[slug='+slug+']'])
// Get first item in returned collection of pageslet page = resp.data.data.pages[0];
SEO.set({title: page.title,meta: {description: page.description}});
this.render('Page', {data: {page: page}});});
ms-seo provides a simple SEO.set method for configuring tags. You can verify that tags are getting set properly by inspecting the DOM.
Finally, we want to server render our blog so that its crawl-able by search engines and social networks like Twitter.
The easiest way to do this is to use Meteor’s hosting platform, Galaxy, which provides an integrated pre-rendering service (Prerender.io). The Prerender.io service is included as part of Galaxy at no additional cost.
Follow Meteor’s guide for deploying to Galaxy. To turn on the built-in Prerender.io integration, add the Galaxy SEO package:
meteor add mdg:seo
If you don’t want to use Galaxy, you can manually integrate Prerender.io. Another option is implementing server-side rendering into your app. At the time of this writing, server-side rendering isn’t natively supported by Meteor, but you can check out Meteor SSR or Flow Router’s alpha release of SSR support.
Wrap up
MeteorJS is a powerful development platform that solves a lot of pains of building Javascript apps for web, mobile, and desktop. However there aren’t many CMS options available.
Be sure to check out ButterCMS, a hosted API-first CMS and content API and blog engine that lets you build CMS-powered apps using any programming language including Ruby, Rails, Node.js, .NET, Python, Phoenix, Django, React, Angular, Go, PHP, Laravel, Elixir, and Meteor.
We hope you enjoyed learning how to use ButterCMS to build CMS-powered apps in Meteor. If you have any questions please reach our to me at [email protected] or on Twitter.