Overview

SonicJs is a modern, open source content management system and web application framework.

It is 100% Javascript based and leverages IBM's Loopback ORM for data access to most popular database systems.

SonicJs is architected to be extremely flexible. Modules are not just "bolt-ons" as they are in many other CMS'. In SonicJs, modules can alter core behavior and even alter/extend the behavior of other modules. See Hooks for more info. This is conceptually very similar to Drupal.

SonicJs' is not a Node.js based clone of Drupal, however the intension was to take the best aspects of Drupal, Wordpress, and many other CMS' and attempt to meld them into a high end CMS and enterprise application framework that is both powerful and enjoyable to work with.

For an explanation of why it was built and to read up on the project's underlying principals, please see here

Demo Videos

Part 1

Part 2

Part 3

Part 4

Getting Started

Prerequisites

Required:

  • Node.js (https://Node.js.org/en/download/)

Optional:

  • Database (Mongo is recommended, but several others are supported)

     

Database Support

SonicJs is optimized to leverage NOSQL databases but also seamlessly supports RDMS such as MySQL and SQL Server. Our core development team uses MongoDb and we strongly recommend you do the same unless you have a requirement to use another DBMS.

We use IBM's Loopback ORM project for data access (don't worry - no need to learn this unless you are working deep in the core), which is an open source project that generates a REST API based on schema configuration files. Here is a full list of supported databases:

  • Cloudant
  • DashDB
  • DB2
  • DB2 for iSeries
  • DB2 for z/OS
  • Informix
  • MongoDB
  • MySQL
  • Oracle
  • PostgreSQL
  • Redis
  • SQL Server
  • SQLite3
     

Local Setup

$ git clone https://github.com/lane711/sonicjs $ cd sonicjs $ npm install $ npm start

Here are the default url's:

Front End: http://localhost:3018
Back End: http://localhost:3018/admin
API: http://localhost:3018/explorer

Debugging

To debug the app, use the built in debugger from VS Code. The "Server"  debugger profile will allow you to set breakpoints and walk thru the code.

Core Concepts

Forms

SonicJs automagically generates user input forms based on the content types (defined in the admin UI). Content types are managed with a drag and drop style form editor.

Content Types

Content Types allow the admin user to construct custom data types to be used on their site/app. Examples include:

  • Page
  • Menu
  • Blog Post
  • Book
  • Movie
  • Employee
  • Customer


SonicJs' ability to manage content types is an extremely versatile and flexible solution fit for many common web application use cases. At a high level, content types can:

  • Manage the fields of the content type
  • Manage field level user input validations
  • Setup Views (both list and details) to display content on the site
  • Manage permissions
  • Manage overall settings


SonicJs' admin tool uses content types even for core CMS objects such as site settings, pages and menus. This enables these object to be customized out of the box to meet your requirements.

Field Types

Field types are the building blocks of a content type.

Each field has various settings specific to how the UI is rendered along with behavior and validations. Developers can easily add their own custom field types and reuse them across content types.

The out of the box field types include:

Basic


Advanced


Layout


Data

Media Management

SonicJs' built in media management server allows you manage assets (images, files, etc) from the admin UI.

Media assets are also accessible via the REST API.

Settings

The setting section in the admin interface is, not surprisingly just a content type and can be extended just like any content type.

Shortcodes

Shortcodes are small html-like tags that can be rendered on the server or client side. They allow for a great deal of UI/UX flexibility while building out website page. 

Generally, shortcodes are automatically generated when you add a module to a page. However, there may be more advanced scenarios where you might want to manually edit them (and their surrounding divs) to achieve a more highly customized UI. Here are a few examples:

<div> [HTML id="289"][TITLE id="266"][CODE-SNIPPET id="290"] </div>

Next Steps

Regardless of your intended use case with SonicJS, it is highly recommended that you head over to the User Guide and at least scan thru it.