ConnextCMS.com is a front end extension for KeystoneJS. It uses the Backbone.js framework to structure the code and Require.js to modularize it (Here's a great book on both). The client side code interacts with KeystoneJS via a REST API, allowing development and debugging of your Content Management System (CMS) to take place in the browser. The main features include:
This page describes the three ways of installing ConnextCMS on your own server:
ConnextCMS has been developed for operation on a Digital Ocean Droplet or similar Ubuntu Linux server. A fully operational server with both ConnextCMS and KeystoneJS installed has been prepared for those interested in trying out the software. You'll need to create a Digital Ocean account in order to receive a copy of the Droplet. By singing up with this affiliate link, you will recieve a $10 credit to your account. The $5/month Droplet is more than capable of running a website.
~/docker-connextcms/theme/site-template-connextcms. Read more about [the site-template here](https://github.com/skagitpublishing/site-template-connextcms).
The demo droplet is pre-configured to launch the Docker container at boot up. Nginx is also installed and pre-configured to serve the site on port 80. You can follow the instructions here to learn how to configure Nginx with an free SSL certificate from Let's Encrypt.
Because the installation of KeystoneJS and ConnextCMS is so complex for beginners, the project has focused on using Docker containers to manage the complexity and provide a consistent installation experience. A Docker Compose file has been created that allows installation with a few simple commands. Please read the installation instructions in the docker-connextcms GitHub repository. This is the same Docker image used to generate the demo droplet.
After you get KeystoneJS running successfully, installing ConnextCMS consists of the following steps. It's assumed that you are running on Ubuntu or similar *nix flavor of operating system:
git clone https://github.com/skagitpublishing/ConnextCMSand rename the newly created directory
./merge-connextcms-keystone. This will create a new directory called
myCMSthat contains the combined code of KeystoneJS and ConnextCMS.
myCMS. Install the node dependencies for ConnextCMS by running
node keystone.js &
Port 80 is the normal http port used to serve webpages. Calling
is the same thing as calling
http://ConnextCMS.com:80. If you clone the demo droplet,
your installation will already be configured to use Port 80. If you build from source, you'll
need to follow these instructions.
By default KeystoneJS runs on Port 3000. The Docker container assumes you will use Nginx to proxy port 80 to port 3000. If you do not want to use Nginx, node will need special permissions to run keystone.js on port 80. The instructions below assume you are running the software on a Digital Ocean Droplet running Ubuntu Linux OS.
The instructions below are modified from this Digital Ocean tutorial on using PM2.
sudo npm install -g pm2. PM2 will restart your application as a service when the server reboots or if your software crashes.
sudo apt-get install libcap2-bin
sudo setcap cap_net_bind_service=+ep /usr/bin/nodejs
sudo env PATH=$PATH:/usr/bin pm2 startup -u demouser
connextCMS/keystone-files/keystone.jsand add the line
'port': 80to the end of
keystone.init()to tell KeystoneJS to operate on port 80 instead of port 3000.
pm2 start keystone.js
Weather you start your installation from a clone or build from source, it's best to follow the
Droplet File Structure and keep your software installations
and operational website software in separate directories. In the Docker container, you'll notice that
KeystoneJS lives in its own directory
keystone4 and ConnextCMS lives in its own
connextCMS. A third directory,
myCMS is created by running
./merge-connextcms-keystone scripts in the
connextCMS directory. These two scripts combine the two software projects.
When creating and customizing your own site, it is best to mimic this setup by creating your
own directory. For example, let's call this directory
theme. By copying the
various files you need to modify from the
directory and putting them in the
theme directory, you can keep the (now)
three software projects separate. Copy and modify the
script file to overwrite the files in the
myCMS directory with your modified
files stored in
By following this scheme, you'll be able to independently update the ConnextCMS and KeystoneJS
software and easily merge those updates into your website. You can also create your own git
repository in the
theme directory that only contains your modified code. No
need to copy redundant code from ConnextCMS or KeystoneJS. Copy the
or plugin template
to better isolate your code projects from one another.
There are two primary directories:
keystone4contains the KeystoneJS files
connextCMScontains the ConnextCMS files (this repository)
myCMSdirectory, which is the functional directory where code is executed.
Weather you clone the Demo Droplet or build from source, it is recommended that you follow the same file structure scheme used on the Demo Droplet and described in this video. This allows the individual software projects that make up a functional website to each co-exist on their own and be easily combined to make a functional, custom web site or web app.
|--keystone4 | This is where the KeystoneJS files live. | |--node_modules/keystone/ | | Executing `git pull` and `npm install` will update KeystoneJS with the latest code from their 'master' branch. |--connextCMS | This is a local copy of the ConnextCMS repo. Execute 'git pull' to get the latest code from the repo. | |--copy-keystone | | This script file will delete the myCMS directory, then replace it with a copy of the keystone4 directory | |--merge-connextcms-keystone | | This script file will overwrite the KeystoneJS files in the myCMS directory with files from the ConnextCMS repo, resulting in a working copy of ConnextCMS. |--myCMS | This directory contains the working code. | |--keystone.js | | This is the file you execute to get ConnextCMS up and running with the command `node keystone.js`
Instead of changing the files in the
keystone4 or the
directory directly, the script files in the
connextCMS directory combine the
files into the
myCMS directory. You then run the ConnextCMS
software by executing the command
node keystone.js in the
When creating and customizing code for your own website, it is recommended to create a new directory
for your own code. You can then create a script file similar to the
script in the
connextCMS directory to merge your code into the
That way all three code repositories (KeystoneJS, ConnextCMS, and your code) can co-exist and are easy
to update by executing
git pull in their respective directories.
In this scenario, the order of operation (which scripts get run in which order) matters.
Below is a modified version of the file layout structure depicted in the KeystoneJS Getting Started Guide:
|--models | Your application's database models |--public | Static files (css, js, images, etc.) that are publicly available` |--routes | |--api | | Your application's api controllers | |--views | | Your application's view controllers | |--index.js | | Initialises your application's routes and views | |--middleware.js | | Custom middleware for your routes |--templates | |--views | | Your application's view templates |--updates | Data population and migration scripts |--package.json | Project configuration for npm |--keystone.js | Main script that starts your application
The KeystoneJS file system above is heavily modified to support new models and API routes for ConnextCMS.
models directory contains all of the same default models that come with KeystoneJS. It
also includes several new models like FileUploads.js, ImageUploads.js, Page.js, and PageSection.js.
routes/index.js file has also been heavily modified to open up API access to
these models. The API interface for each individual model is stored in
Because ConnextCMS is a front end Backbone.js application, it also contains an extensive file structure independent of KeystoneJS. The files below make up the ConnextCMS back end. You'll find the files controlling this part of the application as follows: