Mike Riethmuller

Posted on Aug 30, 2019 • Updated on Nov 5, 2019

Introducing Keystone 5

#graphql #javascript #react #wordpress

I want to introduce you to a new tool for building stuff on the web. It's called Keystone 5.

It can be used as a CMS and is a great replacement for WordPress when you need a little customisation and flexibility with less overhead.

It can also be a great tool for building modern web applications with React, Vue, Angular or any other JavaScript framework.

Getting started requires a few lines of configuration and you're good to go. The getting started guide and CLI should help.

Once configured, you'll have access to an extensible Admin Interface and a powerful GraphQL API. These tools, and the building blocks Keystone provides, will allow you to create any type of application.

We're working hard to make it friendly for beginners, and fast for experienced builders, all without making assumptions about the type of application you're building. To facilitate this, Keystone has Apps.

The rest of Keystone is made from small composable building blocks, but Apps provide a sometimes more opinionated starting point for different types of application.

To give you an idea of what is possible with Apps, the Admin Interface and GraphQL API are both Keystone Apps.

Keystone also has a Static App that serves a public directory, and a Next.js App. These are helpful starting points for front-end development. But you can of course, build and host a front-end application anywhere you like, without making a Keystone App.

BTW: We're looking to add more Apps in future and welcome feedback and contributions.

Did I mention Keystone is proudly open-source? The code is freely available on GitHub. Please give us a star or get involved with the community.

If you're a JavaScript developer looking for the perfect CMS and API for a modern front-end application, we think you are going to love it!

Keystone 5 is in Alpha at the moment so your feedback is really important. It's ready to use, so please have a try and let us know what you think. We'll do our best to answer any questions and are working hard to add more documentation and features in the coming months.

Top comments (6)

peachp • Nov 13 '19

Sounds really promising! I looked into your docs and Keystone 5 seems to hit the sweet spot of features we need for our project.

I'm new to the whole Node.js world. I'm struggling to understand how I can pass some data from a List to a "view", as in to render it into HTML? I understand Keystone doesn't include any template engine or similar, and that I can basically just call the API from anywhere and render into into HTML. However I'm interested in using Next.js and the only docu I found is:

module.exports = {
  keystone,
  apps: [
    new GraphQLApp(),
    new AdminUIApp({ enableDefaultRoute: false }),
    new NextApp({ dir: 'app' }),
  ],
  distDir,
};

Maybe this is some common knowledge for Node.js / Next.js developers. Is it just the matter of calling a Keystone / GraphQL query and returning the JSON object within the .getInitialProps in Next.js?

So somehting along the lines of this?

Index.getInitialProps = async function() {

  return query {
    allTodos {
      task
      createdBy
    }
  };
};

Thanks a lot!

Ramon Gebben • Aug 30 '19 • Edited

It looks like this link is broken; https://v5.keystonejs.com/guides/creating-a-static-website

Mike Riethmuller • Aug 30 '19

Yep! That page is definitely a draft\WIP. I'll get it fixed first thing next week. I imagine there will still be a few broken links and missing pieces for a little while as I re-organise the documentation.

My apologies for that. At the moment I'm the only one working on that and the truth is development work has been outpacing my ability to document everything. I guess it's a good problem to have.

Sung M. Kim • Aug 30 '19

I am able to get to the site.

Could anyone else confirm?

Timothée Clain • Nov 4 '19

awesome work folks ! One think that prevented me to use keystone in the past, was that I felt like in front of a monolith. The new decoupled approach feels very right and I will definitely give it a try again !
how is the support for typescript ?

Mike Riethmuller • Nov 5 '19

Keystone isn't written in TypeScript although you can BYO types.

DEV Community

Introducing Keystone 5

Top comments (6)

Read next

A Complete Guide to React useEffect vs useLayoutEffect for Beginners

Cloud Computing Beyond Containers: How Cloudflare’s Isolates Are Changing the Game

9 Steps for JWT Authentication in Node.js Application

5 Steps You Must Follow to Deploy a React App on Hostinger