Config System - cynchro/OldSchoolFrontFrame GitHub Wiki
Config System
OLS can load a JSON or YAML configuration file at app startup. The loaded config is available in every module via ctx.config.
Setting up config
Pass a config option to initApp():
// Load a YAML file
initApp({
routes: { ... },
config: {
yamlPath: './config/app.yaml',
},
});
// Load a JSON file
initApp({
routes: { ... },
config: {
jsonPath: './config/app.json',
},
});
// Load both, prefer YAML
initApp({
routes: { ... },
config: {
yamlPath: './config/app.yaml',
jsonPath: './config/app.json',
prefer: 'yaml',
},
});
Config file examples
config/app.yaml
api:
baseUrl: https://api.example.com
timeout: 5000
app:
name: My Admin Panel
version: 1.0.0
itemsPerPage: 20
features:
darkMode: true
exportEnabled: false
config/app.json
{
"api": {
"baseUrl": "https://api.example.com",
"timeout": 5000
},
"app": {
"name": "My Admin Panel",
"version": "1.0.0",
"itemsPerPage": 20
}
}
Reading config in a module
defineModule({
methods: {
async loadData(ctx) {
const { baseUrl } = ctx.config.api;
const res = await fetch(`${baseUrl}/clientes`);
ctx.state.clientes = await res.json();
},
},
mounted(ctx) {
const perPage = ctx.config.app.itemsPerPage ?? 10;
ctx.state.pageSize = perPage;
ctx.methods.loadData(ctx);
},
});
exposeEnv option
Set exposeEnv: true to expose the config as window.ENV. Useful for older scripts or debugging in the browser console:
initApp({
routes: { ... },
config: { yamlPath: './config/app.yaml' },
exposeEnv: true,
});
// Now accessible anywhere:
console.log(window.ENV.api.baseUrl);
Accessing config outside a module
initApp() returns a getConfig() function:
const app = initApp({ ... });
const config = app.getConfig();
console.log(config.app.name);
loadConfig() standalone API
If you need to load config before initializing the app:
import { loadConfig } from './framework/config/config.js';
const config = await loadConfig({
yamlPath: './config/app.yaml',
jsonPath: './config/app.json',
prefer: 'yaml',
});
initApp({
routes: { ... },
config, // pass the already-loaded object directly
});