Getting started

1. Set up your directory

my-app/
├── src/
│   ├── lib/
│   │   ├── css/
│   │   └── html/
│   ├── static/
│   ├── styles/
│   ├── routes/
│   └── index.html
├── chocola.config.json
├── chocola.server.js
└── index.js

2. Install Chocola

npm install chocola

3. Create a `chocola.config.json` config file

{
  "bundle": {
    "srcDir": "/src",
    "outDir": "/dist",
    "libDir": "/lib",
    "emptyOutDir": true,
    "assetImport": "static"
  },
  "dev": {
    "hostname": "localhost",
    "port": 3000
  }
}

DEPRECATION WARNING: assetImport also accepts the "legacy" value, an assets system that imports assets based on src and href HTML attributes and url() CSS functions. You may find this system inefficient and buggy in some cases. It will be removed in V2.

4. Create `index.js`

// index.js
import { app } from "chocola";
import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

app.build(__dirname);

5. Create `chocola.server.js`

// chocola.server.js
import { dev } from "chocola";
import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

dev.server(__dirname);

6. Initialize your index page

Write something in your src/index.html index page. Remember to include an <app> element — that's where Chocola applies its magic.

<!-- index.html -->
<html>
  <head>
    <title>My Chocola App</title>
  </head>
  <body>
    <app>
      Hello World!
    </app>
  </body>
</html>

Now you're all set! Run node chocola.server.js to see your app in the browser.

Uh oh!

Getting started

1. Set up your directory

2. Install Chocola

3. Create a chocola.config.json config file

4. Create index.js

5. Create chocola.server.js

6. Initialize your index page

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Introduction

Components

Templates

Styling

Runtime

Architecture

Reference

Clone this wiki locally

3. Create a `chocola.config.json` config file

4. Create `index.js`

5. Create `chocola.server.js`