npm package: @ringods/starterkit-zoho-sites
Description: Patternlab Starterkit for Zoho Sites 2.0
Author: Ringo De Smet
Latest version: 0.0.3

# 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](https://www.zoho.com/sites/blog/introducing-the-new-and-improved-zoho-sites.html) 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](https://patternlab.io/) to mimic Zoho Sites in an 
[atomic design](http://atomicdesign.bradfrost.com/). 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](CONTRIBUTING.md) 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](https://webpack.js.org/). 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](https://neutrinojs.org/) is a project which aims to make Webpack configurations
shareable as regular NPM packages. [neutrino-preset-zoho-sites-template](https://gitlab.com/ringods/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:


```sh
$ 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](https://gitlab.com/ringods/zoho-sites-elate-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](https://bulma.io/) 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:

```json
  "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:

```js
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`:

```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!