Skip to content

Latest commit

 

History

History
42 lines (26 loc) · 1.61 KB

GETTING_STARTED.md

File metadata and controls

42 lines (26 loc) · 1.61 KB
Raw

Getting Started With vanilla-bean-components

It will help to have a decent understanding of DomElem before starting this. Being that this is primarily a development pattern, I'll simply recommend what I currently do. Feel free to stray from the path wherever makes sense for your use-case.

HTML

Create an html file with whatever metadata, or remote styles/scripts that you need. Below are the few pieces needed for vanilla-bean-components:

example

Font & icon support

<link rel="stylesheet" href="@fortawesome/fontawesome-free/css/all.css" />
<link rel="stylesheet" href="source-code-pro/source-code-pro.css" />

Augmented UI support

<link rel="stylesheet" href="augmented-ui/augmented-ui.min.css" />

JS Entrypoint

This is the main entrypoint for your app.

<script type="module" src="./index.js"></script>

example

Not strictly necessary, but the Page component is designed to represent the top-level component by combining autoRender: 'onload', touch detection, along with some top-level & global styles.

new Page({ appendTo: document.body, content });

Build

Now that you have the minimum app structure inplace you'll need some way to get it into the browser. You can use a static build, but since the use-case of this library is more geared towards reactive apps you'll likely have or need a server component to integrate with. In either case I recommend considering bun, thats what I'm currently using, although you should be able to use whatever else you want.