free web hit counter
System Administration
Posted By 1001 Tips

Developing for Oracle Content and Experience Cloud (CEC) using Sites Toolkit


CEC Sites Toolkit 3.0 was released this month (May 2018). The goal of this blog post is to provide an overview of Sites Toolkit and its benefits. Sites Toolkit helps the developers to quickly develop templates, themes, components and content layouts for Content and Experience Cloud. Sites Toolkit is written using Node.js. Sites Toolkit consists of the following:

  • Command line interface (CLI) cec. This provides powerful commands to create, copy, import, export template, components and content layouts.
  • Node.js based development server to immediately preview your templates, components and layouts as you edit them in your favorite editor.
  • Best practices to optimize the component javascript and css files by minimizing them and combining them using RequireJS optimizer
  • Best practices to write unit tests using Mocha and Chai and sample unit tests.
  • Rich set of starter components, templates and content layouts.

Sites Toolkit is available in Oracle Developer Cloud Service (DevCS) as a project template. In your DevCS, create a project choosing Content and Experience Cloud template. This project contains the cec-components.git repository. Copy this git repository url. Now, run the following commands in your local computer / laptop to clone the git repository and install the Sites Toolkit.

git clone <your_project_url>.git
cd cec-components
npm install
npm run install-cec
npm start&

Now the local development server will be up and running at http://localhost:8085

cec CLI

You can invoke the cec CLI by typing ‘cec’ in the command line to see the  list of commands. Running each command with -h provides detailed help and examples. This CLI was written using Node.js.

cli

Local development server

The components and templates created by you are listed in the local development server. You can edit the javascript, html and css in any editor and see the changes immediately in the local server. This renders the components and templates, the same way a site is rendered in CEC cloud server. The local server speeds up the development time. After you complete the development you can use ‘cec export-component’ and ‘cec export-template’ command respectively to create a zip file for the component and the template. These can be imported into CEC cloud server using the Cloud UI.

server.png

Optimizing the component source code

RequireJS optimizer is used to minimize javascript and css and combine them into single bundle for reducing the download size and faster page load. In this example below, the ‘cec export-component’ command optimizes the Sample-Text-With-Image component. design.css, template.html, data-default.js and render.js are minimized and combined into single render.js file.

optimizing.png

Unit tests

The Sites Toolkit shows an example of how you can use Mocha and Chai to write unit test for your components. The unit test can be accessed either from development server or run on command line using PhantomJS.

tests.png

Starter components, templates and content layout

Sites toolkit provides very nice list of starter components and templates. Each sample demonstrates an unique feature. Example, typing ‘cec create-template’ in command line gives the list of available started templates. Type the following to create a starter blog template.

cec create-template Starter-Blog-Template -f BlogTemplate

This blog template demonstrates all content layout features. Create template command puts the template, theme and components in src/main directory under templates, themes and components sub directories respectively. This is the same structure as you see in CEC server.

project_structure.png

You can access the BlogTemplate in the local server. Here is one of the page from the Starter-Blog-Template. This uses Bootstrap theme for a responsiveness. All the content are served from the template. When this template is imported into Cloud, and a site is created, the content will be served dynamically from the Content APIs.

blogtemplate.png

Detailed documentation is available in our product page. Here are the links:

Developing for Content and Experience Cloud with Developer Cloud Service

Developing Templates with Developer Cloud Service

Developing Content Layouts Locally with Developer Cloud Service

Developing Custom Components with Developer Cloud Service