Quickstart

It's very simple to start a new project in Dodo Framework.

Just run the command:

$ npm init dodo@latest

This will install all necessary src and server files.

index.html

The index.html is the starting point of the app. (It's already created with $ npm init dodo but you can always change it as you wish.)
The view (HTML) will be loaded in dd-view elements [HTML elements with dd-view attributes].

<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>DoDo Framework</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <meta name="robots" content="index,follow">
  <meta name="googlebot" content="index,follow">
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/styles.scss">
</head>

<body>
  <nav class="navbar navbar-expand-lg bg-light" dd-view="#navbar"></nav>
  <main class="container" dd-view="#main"></main>
  <footer dd-view="#footer"></footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="/app.js"></script>
</body>

</html>

There are three basic steps for every new route you want to add:

1. Create controller

Create controller src/controllers/HomeCtrl.js.
Define views (.html files) in the loadView(). Those views will be loaded every time the controller is executed.

import { Controller, corelib } from '@mikosoft/dodo';
import navbar from '/views/inc/navbar.html?raw';
import home from '/views/pages/home/main.html?raw';
import footer from '/views/inc/footer.html?raw';

export default class HomeCtrl extends Controller {

  constructor(app) {
    super();
  }

  async __loader(trx) {
    this.setTitle('DoDo Framework');
    this.setDescription('Lightweight, easy to learn, Javascript, frontend framework for reactive apps');
    this.setKeywords('dodo, framework, javascript, js, single page app, spa, reactive');
    this.setLang('en');
    this.loadView('#navbar', navbar);
    this.loadView('#main', home);
    this.loadView('#footer', footer);
  }

  async __init(trx) {
  }

  async __postrend(trx) {
  }

  async __destroy() {
  }

}

2. Create view

Write HTML file(s).

src/views/inc/navbar.html
src/views/pages/home/main.html
src/views/inc/footer.html

3. Register controller

Add new controller in the app.js and define the home route.

import { App } from '@mikosoft/dodo';

// conf
import { $httpClient, $debugOpts } from './conf/index.js';

// controllers
import HomeCtrl from './controllers/HomeCtrl.js';
import FeaturesCtrl from './controllers/FeaturesCtrl.js';
import QuickstartCtrl from './controllers/QuickstartCtrl.js';
import NotfoundCtrl from './controllers/NotfoundCtrl.js';


const $routes = [
  ['when', '/', HomeCtrl],
  ['when', '/features', FeaturesCtrl],
  ['when', '/quickstart', QuickstartCtrl],
  ['notfound', NotfoundCtrl]
];

// app
const app = new App();
app
  // .httpClient($httpClient)
  .debug($debugOpts);

app
  .routes($routes)
  .listen();