# 🦉 How to start an Owl project 🦉 ## Content - [Overview](#overview) - [Simple html file](#simple-html-file) - [With a static server](#with-a-static-server) - [Standard Javascript project](#standard-javascript-project) ## Overview Each software project has its specific needs. Many of these needs can be solved with some tooling: `webpack`, `gulp`, css preprocessor, bundlers, transpilers, ... Because of that, it is usually not simple to just start a project. Some frameworks provide their own tooling to help with that. But then, you have to integrate and learn how these applications work. Owl is designed to be used with no tooling at all. Because of that, Owl can "easily" be integrated in a modern build toolchain. In this section, we will discuss a few different setups to start a project. Each of these setups has advantages and disadvantages in different situations. ## Simple html file The simplest possible setup is the following: a simple javascript file with your code. To do that, let us create the following file structure: ``` hello_owl/ index.html owl.js app.js ``` The file `owl.js` can be downloaded from the last release published at [https://github.com/odoo/owl/releases](https://github.com/odoo/owl/releases). It is a single javascript file which export all Owl into the global `owl` object. Note that there are multiple files, and in this case, we need one of the two files suffixed with `.iife`: they are built to be directly used in a browser. Now, `index.html` should contain the following: ```html Hello Owl ``` And `app.js` should look like this: ```js const { Component, mount, xml } = owl; // Owl Components class Root extends Component { static template = xml`
Hello Owl
`; } mount(Root, document.body); ``` Now, simply loading this html file in a browser should display a welcome message. This setup is not fancy, but it is extremely simple. There are no tooling at all required. It can be slightly optimized by using the minified build of Owl. ## With a static server The previous setup has a big disadvantage: the application code is located in a single file. Obviously, we could split it in several files and add multiple ` ``` Not that the `main.js` script tag has the `type="module"` attribute. This means that the browser will parse the script as a module, and load all its dependencies. Here is the content of `root.js` and `main.js`: ```js // root.js ---------------------------------------------------------------------- const { Component, mount, xml } = owl; export class Root extends Component { static template = xml`
Hello Owl
`; } // main.js --------------------------------------------------------------------- import { Root } from "./root.js"; mount(Root, document.body); ``` The `main.js` file imports the `root.js` file. Note that the import statement has a `.js` suffix, which is important. Most text editor can understand this syntax and will provide autocompletion. Now, to execute this code, we need to serve the `src` folder statically. A low tech way to do that is to use for example the python `SimpleHTTPServer` feature: ``` $ cd src $ python -m SimpleHTTPServer 8022 # now content is available at localhost:8022 ``` Another more "javascripty" way to do it is to create a `npm` application. To do that, we can add the following `package.json` file at the root of the project: ```json { "name": "hello_owl", "version": "0.1.0", "description": "Starting Owl app", "main": "src/index.html", "scripts": { "serve": "serve src" }, "author": "John", "license": "ISC", "devDependencies": { "serve": "^11.3.0" } } ``` We can now install the `serve` tool with the command `npm install`, and then, start a static server with the simple `npm run serve` command. ## Standard Javascript project The previous setup works, and is certainly good for some usecases, including quick prototyping. However, it lacks some useful features, such as livereload, a test suite, or bundling the code in a single file. Each of these features, and many others, can be done in many different ways. Since it is really not trivial to configure such a project, we provide here an example that can be used as a starting point. Our standard Owl project has the following file structure: ``` hello_owl/ public/ index.html src/ components/ Root.js main.js tests/ components/ Root.test.js helpers.js .gitignore package.json webpack.config.js ``` This project as a `public` folder, meant to contain all static assets, such as images and styles. The `src` folder has the javascript source code, and finally, `tests` contains the test suite. Here is the content of `index.html`: ```html Hello Owl ``` Note that there are no `