Code Monkey home page Code Monkey logo

owl-project-template's Introduction

๐Ÿฆ‰ owl-project-template ๐Ÿฆ‰

A starter template to create owl projects using bun. This is only a toy (around 300 loc), not production ready!

Setup

To create a new project:

bun create ged-odoo/owl-project-template [destination]
cd [destination]
bun dev # to start a dev server

The following scripts are available:

  • bun start: build all static assets in dist/ and start a server in production mode
  • bun dev to start a dev server, loading all static assets in memory from public/ (and with dev mode, autoreload and file watcher)
  • bun run build to build all static assets into dist/ folder

Features

This project template provides the following features:

  • starting point for an owl application
  • all templates are collected from src and injected into the page
  • autoreload (in dev mode)

Project structure

  • main.js is the main entry point. It checks for dev mode, and start the server accordingly
  • core/ is meant to contain the code that organize the application (so, a framework). This means:
    • managing assets
    • a simple autoreload feature
    • a basic http server
  • public/ is the location for the owl application code (the browser code). Note that all xml files will be
    injected intothe main page (look at page source)
    • public/app.html is the main page that will serve as index page.
    • public/app.js is the main entry point for the owl application

Server

The server located in core has the following routes:

  • for route /, it reads public/app.html and inject templates, and autoreload code (in dev mode)
  • for route /app.js, it bundles all code in public/ using app.js as the entry point
  • for route /owl.js, it returns the owl file from node_modules
  • other files are statically served from public/ (in dev mode) or dist/ (in prod mode)

Configuration

Here is the list of supported keys in app_config key in package.json:

  • port: the port that the server will listen to
  • public_path: the (relative) folder containing all the static code for the application
  • build_path: the (relative) folder that will be used as target for the build process
  • other_static_files: a description of all additional static files available to the server. For example:
    {
      "other_static_files": {
        "milligram.css": "node_modules/milligram/dist/milligram.css"
      }
    }
  • inline_css (default: false): if true, all css files in public_path will be concatenated and injected in html page. Otherwise, a <link href="app.css"/> will be injected instead, and the /app.css route will return the content of all css files
  • inline_xml (default: false): same as the css, but for all xml files

owl-project-template's People

Contributors

ged-odoo avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.