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