/OWL-JavaScript-Tailwind-Project-Starter

Primary LanguageJavaScript

OWL Javascript Project Starter

This repo is an example on how to start a real project with the Odoo OWL framework.

Thanks to @SimonGenin for it's original Starter Project for OWL

Deploy on Netlify

Features

  • OWL
  • Javascript
  • Livereload
  • Rollup.js
  • Tailwind and PostCSS
  • Tests with Jest

Installation

This repo is a "template repository". It means you can quickly create repositories based on this one, without it being a fork.

Otherwise, you may clone it:

git clone https://github.com/Coding-Dodo/OWL-JavaScript-Tailwind-Project-Starter.git

Install dependencies:

npm install

Dev with livereload:

npm run dev

Production build

npm run build

Run tests

npm run test

Components

It is expected to create components in one file, following this convention:

import { Component, useState, tags } from "@odoo/owl";

const APP_TEMPLATE = tags.xml/*xml*/ `
<div t-name="App" class="" t-on-click="update">
  Hello <t t-esc="state.text"/>
</div>
`;

export class App extends Component {
  static template = APP_TEMPLATE;
  state = useState({ text: "Owl" });
  update() {
    this.state.text = this.state.text === "Owl" ? "World" : "Owl";
  }
}

See also

If your are searching for the a project starter without Tailwind:

https://github.com/Coding-Dodo/OWL-JavaScript-Project-Starter