Getting started
To create a component you need to install oc with a command:
npm install oc -gThe next step is to initialise a component:
oc init hello-world
The above command will create the hello-world directory.
It is also possible to set template type during the initialisation as an additional init parameter:
oc init hello-world jade
By default this parameter is set to handlebars.
The basic component directory is composed by three files:
├── hello-world/
│ ├── package.json
│ ├── template.html
│ ├── server.js
-
package.jsoncontains the component definition, dependencies, and more -
template.htmlis a template containing the markup -
server.jsis an optional file, needed when the component has some logic
Additionally the component can have static contents such as images, js, and files that will be referenced in the html markup and any other files that will be useful for the development such as tests, docs, etc.
The basic package file package.json looks as follows:
{
"name": "hello-world",
"description": "description of my hello-world component",
"version": "1.0.0",
"oc": {
"files": {
"data": "server.js",
"template": {
"src": "template.html",
"type": "handlebars"
}
}
}
}Complete list of package.json parameters
The template represents the view of the component. Currently we support handlebars and jade. It can contain css under the <style> tag and client-side javascript under the <script> tag.
Initialisation produces an empty template file.
Server is the entity that produces the view-model to compile the view. It is necessary when component template has logic, including consuming services. The basic version of server.js looks as follows:
'use strict';
module.exports.data = function(context, callback){
callback(null, {});
};Advanced server.js operations.
You may want to start a local test registry using a components' folder as a library with a watcher. This will allow to consume and debug it:
oc dev . 3030Then you may want to create a blank html page to start playing with it and see how it looks:
<html>
<body>
<oc-component href="http://localhost:3030/hello-world">
Optionally, some failover text here
</oc-component>
<script src="http://localhost:3030/oc-client/client.js"></script>
</body>
</html>Or, just use the preview function:
oc preview http://localhost:3030/hello-worldThat's it. As soon as you make changes on the component, you will be able to refresh this page and see how it looks.
