Zoho Sites emulation for easy template development

Zoho Sites is easy to use and quite full featured. But the Zoho Sites implementation released early 2018 is limited on the amount of available templates. As a result, people want to implement their own templates and upload them.

Zoho Sites contains a lot of functionality out of the box. The most requested item is an easier way to create custom templates. It is also one of my own needs, which is why I started documenting my findings.

Instead of documenting what HTML structures are generated by Zoho Sites, this project uses PatternLab to mimic Zoho Sites in an atomic design. When running Patternlab locally on your laptop, you get HTML code like it is generated by Zoho Sites.

Initial Setup

This project does not have any styling applied. It only mimics the HTML generated by Zoho Sites for a page and all the elements that can be put on it. You can run this project to browse through the unstyled basic elements, composite elements, templates and pages.

$ npm install

Use standalone

When you only want to see the generated HTML, you can use this project standalone. If Zoho Sites would ever change the generated HTML, this is the place to update it. See the contribution guidelines for info.

$ npm run pl:serve

This opens a new tab in your default browser. Browse all the patterns. All elements are documented in PatternLab.

Integrate this in a template project

This project is intended to remain a barebones HTML project, but is created in such a way that it is easy to integrate in a separate template project.

In web development land, everybody knows webpack. The drawback of most build systems - webpack is no exception - is that project config can not be easily shared between projects. Everybody seems to be copying and updating their build files by looking at how others do it.

Neutrino is a project which aims to make Webpack configurations shareable as regular NPM packages. neutrino-preset-zoho-sites-template is such a shared webpack configuration, aimed at the development roundtrip for a Zoho Sites template.

To bootstrap your template project and use this Zoho Sites emulation, first create your template project like this:

$ cd <template_project_folder>
$ npm init
... answer all the questions for your template project ...
$ npm install --save-dev webpack neutrino neutrino-preset-zoho-sites-template

The last line adds Webpack, Neutrino and the shared build preset. If you want to follow along with an existing setup, have a look at the Elate Zoho Sites template. At least copy the *.face files from the Elate template to your own template project.

Your are now free to add your own dependencies. In the Elate template, you can see it depends on Bulma for CSS styling.

Now add this project to your template project as a git submodule in the patternlab folder and fetch it's dependencies:

$ git submodule add https://gitlab.com/ringods/zoho-sites-template-development.git patternlab
$ cd patternlab
$ npm install
...

NOTE: Don't use a different folder name for this submodule as the name is also harcoded in the Neutrino preset!

In the package.json of your template project, configure the appropriate scripts:

  "scripts": {
    "build": "webpack --mode=production",
    "start": "webpack --mode=development"
  },

Webpack is started like you are used to, but where is the configuration retrieved from? We still create a webpack.config.js file in our project, but with this as content:

const neutrino = require('neutrino');

module.exports = neutrino().webpack();

This tells neutrino to generate a webpack config. The only thing left to do is configure the core Neutrino framework with the preset it needs to use. We do this in a file named .neutrinorc.js:

module.exports = {
    options: {
        root: __dirname
    },
    use: [
        'neutrino-preset-zoho-sites-template'
    ]
};

You should now be able to start working on your template by running npm start. This should start the Zoho Sites Patternlab setup in parallel to a webpack watcher for your styling.

Running the production build npm run build should give you a zip file that you can upload as a template to Zoho Sites.

Your hard work is now live in your site!