Build an app-like experience with client-side routing and instant transitions. Perfect for dashboards, tools, and interactive web apps.
Creates a new project folder and initializes package.json
Downloads Domma from npm (~260KB minified)
Creates a single page application with client-side routing
frontend/index.html in your browser or run:
{
"project": {
"name": "My SPA App",
"version": "1.0.0"
},
"spa": {
"enabled": true,
"container": "#app",
"defaultRoute": "/",
"notFoundView": "404"
},
"routes": [
{ "path": "/", "view": "home" },
{ "path": "/about", "view": "about" },
{ "path": "/contact", "view": "contact" }
],
"navbar": {
"brand": { "text": "My App", "url": "#/" },
"items": [
{ "text": "Home", "url": "#/" },
{ "text": "About", "url": "#/about" },
{ "text": "Contact", "url": "#/contact" }
]
}
}
export const homeView = {
template: `
<div class="hero hero-gradient-primary hero-center" style="padding: 3rem 2rem;">
<div class="hero-content">
<h1>Welcome to My SPA</h1>
<p class="lead">Built with Domma's powerful router</p>
</div>
</div>
<div class="container py-6">
<h2>This is the Home View</h2>
<p>Click the navigation links to switch views without page reload!</p>
</div>
`,
onMount($container) {
// Scan for icons when view mounts
Domma.icons.scan($container[0]);
console.log('Home view mounted');
},
onLeave() {
console.log('Home view unmounted');
}
};
import { views } from './views/index.js';
$(() => {
// Load config
Domma.http.get('domma.config.json').then(config => {
// Initialize router
R.init({
container: config.spa.container || '#app',
routes: config.routes || [],
views: views,
default: config.spa.defaultRoute || '/',
notFound: config.spa.notFoundView || '404'
});
// Subscribe to route changes
M.subscribe('router:afterChange', ({ to, from }) => {
console.log(`Route changed: ${from?.path} → ${to.path}`);
window.scrollTo({ top: 0, behavior: 'smooth' });
});
console.log('Router initialized');
});
});
Your SPA is set up and ready. Start editing views in frontend/js/views/ folder.