How to Create a Node.js CMS 'KeystoneJS' App and Deploy it to Heroku

Tadashi Shigeoka ·  Sat, August 12, 2017

I tried creating an app with the Node.js CMS “KeystoneJS” and deploying it to Heroku, so I’ll introduce the steps.

KeystoneJS Setup and Hosting Environment

I’ll use Node.js LTS latest version 6.11.1.

$ nvm use v6.11.1
Now using node v6.11.1

Also, for deploying KeystoneJS, Heroku is convenient so I’ll use that.

Starting KeystoneJS Following the Getting Started Guide

The KeystoneJS official site has introductory content called Getting Started, so I’ll follow that to begin.

KeystoneJS · Getting started

Installing generator-keystone and yo

npm install -g generator-keystone
npm install -g yo

npm install -g yo

Creating Application Directory

generator-keystone can generate directories, but you can’t specify the directory name, so I’ll create it myself first.

mkdir my-test-project
cd my-test-project

Generating Application Template with yo keystone

yo keystone

Welcome to KeystoneJS.

? What is the name of your project? keystonejs demo
? Would you like to use Pug, Nunjucks, Twig or Handlebars for templates? [pug | nunjucks | twig | hbs] pug
? Which CSS pre-processor would you like? [less | sass | stylus] sass
? Would you like to include a Blog? Yes
? Would you like to include an Image Gallery? Yes
? Would you like to include a Contact Form? Yes
? What would you like to call the User model? User
? Enter an email address for the first Admin user: [email protected]
? Enter a password for the first Admin user:
 Please use a temporary password as it will be saved in plain text and change it after the first login. admin
? Would you like to create a new directory for your project? No
? ------------------------------------------------
    Would you like to include Email configuration in your project?
    We will set you up with an email template for enquiries as well
    as optional mailgun integration Yes
? ------------------------------------------------
    If you want to set up mailgun now, you can provide
    your mailgun credentials, otherwise, you will
    want to add these to your .env later.
    mailgun API key: 
? ------------------------------------------------
    mailgun domain: 
? ------------------------------------------------
    KeystoneJS integrates with Cloudinary for image upload, resizing and
    hosting. See http://keystonejs.com/docs/configuration/#services-cloudinary for more info.
    
    CloudinaryImage fields are used by the blog and gallery templates.
    
    You can skip this for now (we'll include demo account details)
    
    Please enter your Cloudinary URL: 
? ------------------------------------------------
    Finally, would you like to include extra code comments in
    your project? If you're new to Keystone, these may be helpful. Yes

...

------------------------------------------------

Your KeystoneJS project is ready to go!

For help getting started, visit http://keystonejs.com/guide

We've included the setup for email in your project. When youwant to get this working, just create a mailgun account and putyour mailgun details into the .env file.

We've included a demo Cloudinary Account, which is reset daily.
Please configure your own account or use the LocalImage field instead
before sending your site live.

To start your new website, run "cd keystonejs-demo" then "node keystone".

Starting the keystone App

$ node keystone
----------------------------------------
WARNING: MISSING MAILGUN CREDENTIALS
----------------------------------------
You have opted into email sending but have not provided
mailgun credentials. Attempts to send will fail.

Create a mailgun account and add the credentials to the .env file to
set up your mailgun integration
------------------------------------------------
Applying update 0.0.1-admins...

------------------------------------------------ 
KeystoneJS デモ: Successfully applied update 0.0.1-admins. 

Successfully created:

*   1 User
 

------------------------------------------------
Successfully applied 1 update.
------------------------------------------------

------------------------------------------------
KeystoneJS Started:
KeystoneJS デモ is ready on http://0.0.0.0:3000
------------------------------------------------

Let’s continue by reading the KeystoneJS official documentation and customizing it.

Deploying Keystone App to Heroku

Creating Heroku App

First, I’ll create a Heroku app with a specified name.

heroku apps:create keystonejs-demo

Adding Heroku App to Remote

Add the newly created Heroku app to remote.

heroku git:remote --app keystonejs-demo

Adding MongoDB Add-on to Heroku App

Heroku has several MongoDB add-ons, but I’ll use mLab (formerly mongolab).

heroku addons:add mongolab:sandbox

Creating mongolab:sandbox on ⬢ yourapp... free
Welcome to mLab.  Your new subscription is being created and will be available shortly.  Please consult the mLab Add-on Admin UI to check on its progress.
Created mongolab-rigid-12345 as MONGODB_URI
Use heroku addons:docs mongolab to view documentation

Cloudinary Registration and Environment Variable Setup

Cloudinary has a Heroku add-on, but it’s good to create an account individually from the main site.

Adding Mailgun Add-on

heroku addons:add mailgun:starter

Adding Papertrail Add-on

You can check logs from the Heroku Console, but I’ll introduce a more advanced log collection tool.

heroku addons:add papertrail:choklad

Finally, with the familiar

git push heroku master

you can deploy the app to Heroku and you’re done.

Reference Information

That’s all from the Gemba.