Building a CMS-powered website with MeteorJS

In this tutorial I’m going to show you how to add a CMS to a website using . The finished code for this tutorial is . MeteorJS ButterCMS available on Github is a free and open-source web framework written using Node.js. Meteor JavaScript is a hosted that lets you build CMS-powered apps using any language. Referred to as a “ ”, 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 . ButterCMS API-first CMS and content API programming headless cms sign into ButterCMS with your Github account Getting Started We’ll start with a basic Meteor website that uses and for routing. You can swap in another templating solution like React if you prefer. Blaze templates Iron Router Get the and make sure it runs: starter code git clone cd meteor-cms-website-boilerplatemeteor npm installmeteor https://github.com/buttercms/meteor-cms-website-boilerplate.git If you’re new to MeteorJS, check out their for an introduction. quick start guide Setting up a page template The first thing we’ll do is create a basic page template in . Using ButterCMS, your client will be able to create custom pages that use this template. client/main.js Meteor Website Hello world! {{page.title}} {{page.summary}}

{{{page.content}}} Notice that we use three brackets around . Triple-braced template tags in 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. page.content Blaze templates Setting up ButterCMS Now we’ll setup so that our client can create and manage pages using this template. ButterCMS and click the “New workspace” link on the sidebar. We’ll call this workspace “Custom Pages”. Sign into Butter with Github 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 and you should see the content from ButterCMS displayed. [http://localhost:3000/first-page](http://localhost:3000/first-page) 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 and make sure we have good HTML titles and descriptions. ms-seo helper package 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 method for configuring tags. You can verify that tags are getting set properly by inspecting the DOM. SEO.set 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 , which provides an integrated pre-rendering service (Prerender.io). The Prerender.io service is included as part of Galaxy at no additional cost. Meteor’s hosting platform, Galaxy Follow Meteor’s . To turn on the built-in Prerender.io integration, add the package: guide for deploying to Galaxy Galaxy SEO 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 or alpha release of SSR support. Meteor SSR Flow Router’s 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 , a and blog engine that lets you build CMS-powered apps using any programming language including , , , , , , , , , , , , , and . ButterCMS hosted API-first CMS and content API Ruby Rails Node.js .NET Python Phoenix Django React Angular Go PHP Laravel Elixir 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 or . roger@buttercms.com on Twitter