What is Chisel? Here's a preview

jamstack

#1

Chisel is a headless, API-first CMS built on top of Parse Server (node.js, express.js and mongoDB).

Video Walkthrough: (turn your volume up, sorry the audio is rubbish)

Intro

It’s a react.js application that we will be releasing free and open source to the community, continuing to build on the great work that the core team at Facebook and the extended community have done with Parse Server this year.

Chisel will join our suite of beautifully designed developer tools (once it itself is beautiful enough). In the meantime I’d love to share our early progress and invite you to give it a try, report all the bugs, make all the suggestions and generally get involved in the project.

Background

The idea for Chisel was seeded a while back, after playing around with existing API-first CMS solutions.

We integrated Contentful into Hammer. These guys are the market leaders, with more than $16.8m raised to date from investors like Point9 Capital, Balderton Capital, Benchmark and others. Contentful offer an entirely hosted/managed solution that ranges from free for small personal sites, to $249/month, $949/month up to god-knows-how much for the larger enterprise clients. It’s a great service, truly. But there are some concerns among developers I spoken to over pricing, the black box / vendor lock-in of the hosted service and inability to work offline in development, with a self hosted database.

We also integrated Cockpit. Cockpit is a project bootstrapped by one developer, Artur Heinze, it’s a great app too. I seriously considered how we could help grow the project, but being PHP based, it didn’t really fit our core stack preference. I really hope Cockpit continues to develop and we should support Artur’s work. Cockpit can be run locally, so it’s great for working offline when required (train, countryside, whatever).

Meanwhile, over the past couple of years, I’ve been working on our Nuwe product. Nuwe has evolved into a much larger application that can be used as a company’s core dev platform. One of it’s key features is the ability to easily, with a single-click, spin up new Parse-Server instances to enable rapid creation of back-end server environments for any purpose. You can self-host Parse Server too, it’s free and it’s open source. I like Parse Server and use it quite a bit for rapid build projects.

Since Parse Server was released in January 2016, I’ve really enjoyed watching the project evolve, out the back of the Parse.com wind down. The community is growing and here’s one way I can think of to do contribute to the project - I think Chisel can be extremely powerful for the Parse Server community.

How it’ll Work

We would build a lightweight client application, using React, that could be easily installed via npm.

npm install -g chisel

It can be initialised with your parse-server credentials:

chisel --appId 123456789 --masterKey 123456789 --serverURL "http://localhost:1337/parse"

or for a remote Parse Server instance:

chisel --appId 123456789 --masterKey 123456789 --serverURL "http://parse.beach.io/parse"

You could feasibly build this Chisel app to static and host it on a service, like our own Forge.

Potentially, it could be installed as express middleware on your Node / Express app.

For those that don’t need all the Developer options, we can provide a one-click install, hosted / managed service.

What does this get me?

Out of the box, Chisel enables:

  • Beautiful, fast UI for quickly defining your custom content Models
  • A place for content editors to write and enjoy creating new content
  • JSON REST API output for your content, to be read or managed
  • Access to content via Parse Server Client SDK’s - JS, iOS, Android, PHP, Ruby
  • Ability to self host everything
  • Ability to run locally and offline
  • Run multiple sites from a single Chisel instance
  • Multiple users with different roles, like admins, editors etc.
  • Helpful field types, like Slugs, Dropdowns, URLs, Images, References to other content entries.
  • Easily deployed on fast, reliable static hosting

In the near term, we will integrate Chisel into Hammer in a similar, but much more considered way than we have with Contentful and Cockpit.

Chisel should be useable within all static site generators too, including but not limited to Jekyll, Middleman, Hugo etc.

Current Progress

We’ve made a good start on the development, mostly thanks to the work of @Nessi and @Tumasov.

Check out these screenshots…

A good ol’ login screen… nuff said

:desktop: You can see a Demo here

Login: editor / editor

I’d love for you to try it and let me know what you think in this thread. Bear in mind, this isn’t an official release, it’s a preview of an early work in progress.


Chisel for MacOS
#2

Wow, has it really been that long since I posted about Chisel? Well, I guess there’s no time like the present to give an update as to what is happening with this project - is it dead? is it happening? if so, when?

Rest assured, Chisel is coming. We had a somewhat unexpectedly busy start to the year with some client projects and before you know it, half the year has gone. Meanwhile, in the background, we’ve been quietly chipping away at the Chisel roadmap and silently building out the app to get ready for an initial public launch.

That’s right, it’s coming!

The initial proof of concept, which was indeed very real but not quite complete enough, has been built on to the point where, aside some bugs here and there and a number of UI updates needed, we’re almost ready for you keen early adopters to get your hands on the Open Source Project and start giving some opinions, feedback and advice on how we should move forward with Chisel.

##Updates

March

  • Added Site Settings view
  • Deleting Sites
  • Improvements to User Roles
  • React Router
  • Setup ACLs for sites, models and collaborations
  • Multiple References Support
  • Updates to React, Parse-Server etc.
  • UI and interactions improvements
  • Lots of bug fixes

April

  • Support for Lists
  • User Profile / Settings view
  • Sign In / Reset Password flow
  • Collaboration invite flow
  • Webhooks for content modifying
  • Media handling
  • Restore from Archive
  • UI Animations
  • Parse Server 2.3.x support

I’m going to try and keep the updates a little faster flowing over the coming weeks…


#3

The Chisel project once again took a bit of a backseat for a couple of months, whilst we worked on some big client projects, but we’ve continued to chip away and here’s the latest updates, as we get closer to opening up the project for beta testing.

  • Lots of bug fixes
  • Drag and drop for model fields list
  • NPM Publishing support
  • WYSIWYG Editor fix
  • Update to Webpack 3
  • Update all dependencies

I’m trying to make it as simple as possible to get up and running with Chisel, even in what I would call “Developer Mode”, which means running chisel locally and setting up from the Github repo and/or command line.

The first step is get a Parse-Server instance up and running.

Fortunately, with Heroku this is very simple and can be done in a few clicks.

  1. Create a Heroku Account
  2. Visit our pre-configured Parse-Server Starter repository
  3. Click the “Deploy to Heroku” button
  4. Give your Heroku app a name
  5. Provide and AppID, MasterKey, Parse Mount, Server URL and Site URL
  6. Click “Deploy App” and watch the magic happen

:arrow_down: see below for further description of these config variables

Heroku Config Vars

App Name

Give your Heroku app a name, this will be used when you configure your ServerURL config param and will be the location of your Heroku instance e.g. if the app name is ‘chisel-parse-server’, then it’ll be available at https://chisel-parse-server.herokuapp.com

AppId

Any unique identifier for your app. Make it long enough and random generated to be secure.

Tip: In my experience, Heroku doesn’t like special characters, e.g. ‘>’ in this identifier.

Master Key

Any unique identifier for your app. Make it long enough and random generated to be secure.

Tip: In my experience, Heroku doesn’t like special characters, e.g. ‘>’ in this identifier.

Parse Mount

You shouldn’t need to change this from the default for a basic implementation

Server URL

This is the location of your Parse Server app, which is basically made up from the App Name and Parse Mount variables. For example: https://chisel-parse-server.herokuapp.com/parse

Tip: Heroku provides free SSL out of the box, use the https version for your Server URL.

Site URL

This is where you are running your Chisel-CMS app.

If you run Chisel locally: http://localhost:9000 (default)

You can also build your Parse-Server instance and host it, for example on our Forge service. In this case, use your hosted site URL here.

:camera: Heroku Setup Screenshots

1. Heroku Deploy will automagically setup the Node.js app, MongoDB, Express.js framework - all you need to run Parse Server.


2. Creating configuration variables.

Setting Up Chisel

Now that Parse Server is running, the rest is dead easy…

Chisel is available via NPM. To install it, simply open terminal and…

$npm install -g chisel-cms

Test that install worked

$chisel-cms --help

You will see the available options…

Usage: chisel-cms [options]


  Options:

    --appId [appId]          the app Id of the app.
    --serverURL [serverURL]  the server url.
    --JSkey [JSkey]          the JS key.
    --RESTkey [RESTkey]      the REST key.
    --port [port]            the port to run Chisel
    -h, --help               output usage information

To run Chisel, all you need us your APP_ID and SERVER_URL from your Parse Server instance.

$chisel-cms --appId <APP_ID> --serverURL https://<APP_NAME>.herokuapp.com/parse

Successful response and running app will return:

==> Listening at http://localhost:9000/

Open this in the browser and start using Chisel.

:money_with_wings: Parse-Server Bonuses

Because we’re using Parse Server, we are super amped up to do some great things…

:iphone: Client SDKs

As soon as you define your content models and create some content entries (another tutorial to follow), then you have a massively feature rich RESTful API to access this data, wherever you need it.

Moreover, Parse-Server gives us Client libraries and SDK’s galore, making plugging your Chisel content into any mobile or web platform an absolute dream.

MacOS, TVOS, iOS - https://github.com/parse-community/Parse-SDK-iOS-OSX
Android - https://github.com/parse-community/Parse-SDK-Android
Javascript - https://github.com/parse-community/Parse-SDK-JS
.NET, Xamarin - https://github.com/parse-community/Parse-SDK-dotNET
Unity - https://github.com/parse-community/Parse-SDK-dotNET
PHP - https://github.com/parse-community/parse-php-sdk
Arduino - https://github.com/parse-community/Parse-SDK-Arduino
Embedded C - https://github.com/parse-community/parse-embedded-sdks

:cloud: Cloud Code

Through Cloud Code, you can further customise behaviour of your Parse Server.

Some ideas…

Add Webhooks for created content to trigger automated notifications or build processes

Run custom functions in the cloud, rather than on your client application, such as counting Blog Posts that need to be published

Schedule automated Jobs to run on your content, like cleaning up old draft entries that are no longer required

Adding BeforeSave triggers to catch validation issues in newly created content or modifying data prior to saving

For Developers, Chisel + Parse-Server provides a wealth of opportunities to customise and extend easily :fist: