Getting Started - cynchro/OldSchoolFrontFrame GitHub Wiki

Getting Started

Create a starter project with the CLI

The fastest way to start a new app:

node cli/ols.js create starter myapp

This creates a self-contained myapp/ folder:

myapp/
├── framework/          # Copy of the OLS core (read-only)
├── modules/
│   └── home/
│       ├── home.html
│       ├── home.js
│       └── home.css
├── index.html
├── app.js
└── config/

Serve it with any static server and open index.html.

Manual setup from scratch

1. Copy the framework

Copy the framework/ folder into your project:

myproject/
└── framework/     ← copy this from OldSchoolFrontFrame/framework/

2. Create index.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My App</title>
</head>
<body>
  <nav>
    <a href="#/home">Home</a>
    <a href="#/about">About</a>
  </nav>
  <div id="app"></div>
  <script type="module" src="app.js"></script>
</body>
</html>

3. Create app.js 

import { initApp } from './framework/app/init.js';

initApp({
  root: '#app',
  routes: {
    home: 'home',
    about: 'about',
  },
  fallback: 'home',
  dev: true,
});

4. Create your first module

modules/
└── home/
    ├── home.html
    ├── home.js
    └── home.css   (optional)

modules/home/home.html

<div>
  <h1>Hello, <span data-bind="name"></span>!</h1>
  <input data-model="name" placeholder="Your name" />
</div>

modules/home/home.js

import { defineModule } from '../../framework/module/module.js';

defineModule({
  state: () => ({
    name: 'World',
  }),
  mounted(ctx) {
    console.log('Home module loaded');
  },
});

5. Serve and open

python3 -m http.server 8080
# Open http://localhost:8080/

Anatomy of initApp()

Option Type Default Description
root string | Element #app Mount point selector or DOM element
routes object required Map of routeKey → moduleFolderName
fallback string first route Route to load when hash is empty
config string | object — Path to .json/.yaml config or options object
store object {} Initial global store state
dev boolean false Enable console logs and window.$ols
exposeEnv boolean false Set window.ENV to loaded config

Next steps

⭐ If you like this project, give it a star!

GitHub stars

My Website!: CynchroLabs

⚠️ **GitHub.com Fallback** ⚠️