GetStartedSite.md

ZephJS > Get Started > Building a Web Site with Custom Components using ZephJS

This guide details how to build a Web Site with Custom Components using ZephJS. One would build a Web Site as per normal, but also have a folder dedicated to defining custom components which can be included into a Web Site using <script> tags.

Project Structure

It is recommended to create a components folder within the project and place all the custom components within that. Additionally, ZephJS recommends keeping JavaScript, HTML, and CSS as separate files with the same name. For example, if one is creating the my-button component, one might have the following directory structure:

components
  	my-button.js
	my-button.html
	my-button.css

This approach to organizing components keeps everything neatly together and consistently named. Of course, this layout is merely a suggestion and other layouts are entirely feasible at the developers discretion.

Installation

In order to work with ZephJS one should first install it into their project.

Install node.js

ZephJS is built as a node.js application, so one will need nodejs installed. You can find installers at nodejs.org for whatever Operating System is being used.

Install ZephJS from npm:

npm -g install zephjs

Creating a Component

For each component in the project one should create a separate component definition file. Fortunately ZephJS makes this super easy with its Command Line Tool:

zeph create <component_name>

This will create the following files using the given <component_name>:

<component-name>.js
<component-name>.html
<component-name>.css

These files can then be populate appropriately.

If one is new to ZephJS it is strongly recommended to read the Component Quick Start guide to learn about how to write ZephJS components.

Using Custom Components

To use a custom component with your Web Site, it is recommended to include it early within the HTML header. Here's an example of using the my-button component...

<script type="module">
	import "./my-button.js";
</script>

Once imported thus, the <my-button> component will be available to use within the Web Site HTML as needed. One may, of course, have multiple import statements bringing multiple components into an application.

Additional Topics

Web Site authors may be interested in the additional specific topics:

• Component Inheritance
• Bundling for Distribution

Documentation

Components

• Quick Start
• Component Concepts
• Creating a New Component
• Importing ZephJS
• Defining the Component
• Inheritance
• HTML
• CSS
• Attributes
• Properties
• Lifecycle Handlers
• Bindings
• Event Handlers

Services

• Services

APIs

• API Documentation

Bundling

• Bundling for Distribution

Command Line Tool

• Command Line Tool