Creating a single page application using Keystone from a typical Jade Express website - snowkeeper/keystonejs-site GitHub Wiki

The goal of this guide will be to take a current ExpressJS website built with Jade templates and convert it into a React based SPA integrated with Keystone. The current jade templates will remain and be included via plugin. A route config file will be used to designate the process for compiling each page.

We will perform this excercise with source code from the current website for KeystoneJS.com. Since the final output will need to be a gh-pages deployment, this guide will also document that process as well.

In place of webpack / browserify we will use System.js and build based on ES6 making use of babel.

Goals

  • ES6 with System.js and babel
  • SPA using React and React-Router
  • Add Keystone to current express setup
  • Build process to deploy static version to gh-pages branch

Conventions

Throughout we will make reference to our source repo KeystoneJS.com. Remember to replace these instances with your own repo.

Prepare

We will start by cloning our repo and creating a new branch.

git clone [email protected]:keystonejs/keystonejs-site.git
cd keystonejs-site
git checkout -b spa