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();