The following tips will help you become familiar with coServ and start web programming on this interesting web platform.
CLI
If you’re new to coServ, it’s highly recommended to start with the CLI tool. Remember to install globally:
npm install -g @coserv/cliOnce done, you can use the following commands to start/stop the coServ server, or even create new web apps:
# create a new web app. cli will put together the skeleton
cd your_working_directory
xs create app_name# start the coServ server, default to the 4040 port
xs service# stop the server
xs service stop# restart a running server
xs service restart
When you create a new web app, you’ll need to provide a code name (in one string without space in between) for it. coServ CLI will first create a ‘www’ directory under your current directory and beneath the ‘www’ directory create the project directory using the code name you provided. Once the project directory is created, coServ CLI will further populate the directory with files needed for a coServ web app.
With a web app created, you can use the command: xs service to start the coServ server and point your browser to http://127.0.0.1:4040 to see the result.
For more information about @coserv/cli, please check it’s GitHub page.
Start with the view
coServ addresses many key issues about web programming such as HTML refactoring, CSS encapsulation, componentization, etc. Among these, HTML view generation is the basics, and we recommend you to start from there.
With coServ, HTML rendering is done by node.js modules. Such modules have to export a view() function. Within the view() function, coServ provides a “built-in module” called xs which can help you effectively render HTML codes:
/* Using xs.e() to create a HTML tag.
* tagName: any HTML tag name, such as 'div', 'h2', 'table', etc.
* tagAttributes: tag attributes represented as a JS object
* child_tags: child tag(s)
*/
xs.e(tagName, tagAttributes, child_tags)You can deal with tag elements created by xs.e() the same way as you do with jQuery elements. For example:
// let's create a <div> tag
let n = xs.e('div')// using add() to children, and you can cascade function calls
n.add('h2', 'Title')
.add('div', {class: 'text-center', 'Here comes the body text')// using attr() to add attributes
n.attr('style', 'font-size: 1.2rem;')// using find() to look for decendents
let child = n.find('h2')
Now, let’s get back to the view() function. The view() function is required to return a special tag element which acts as the “root” of the generated HTML fragment. To generate this ‘root’ element, remember to use xs.root() instead of xs.e(). The root element generated by xs.root() can be attached with CSS decorations. Let’s check the following sample code:
// coServ requires a HTML rendering module to define view()
exports.view = function() {
let root = xs.root( css() )
.add('h2', 'My Title')
.add('hr') return. root
}
// defining CSS with JSON. This CSS will only be visible within
// the generated HTML fragment
function css() {
return {
'h2': {
'font-size': '1.4rem'
}
}
}
Before closing up this section, there is one more thing to mention. The node.js modules running on coServ are given a .xs file name extension. That could cause some inconvenience as most program editors do not recognize the .xs extension so you’ll miss the syntax highlight feature. The good news is that at least the popular VS Code could allow you to customize its language mode. In VS code, you can associate .xs files with the Javascript language and you’ll get all those beautiful syntax highlights.
Work on the existing example
It’s always easier to experiment on something that already works. You can try things here and there to see how results are changed. The coServ team has provided a sample project which can be cloned from GitHub. You can use that sample project as your starting point. When you modify any program file of a web app, coServ will automatically load the latest version so you don’t have to restart the server. Just refresh your browser, and you’ll see the updated result.
Those tips should help you become familiar with coServ quickly. Should you have any further questions, you can check out the coServ’s GitHub page for more info.
