🚀 Production Readiness¶
A checklist for taking a Clera app from development to production.
🚀 Before you ship¶
Turn off dev mode¶
Dev mode logs verbose warnings to the console. Disable it in production:
app.start({ dev: false }); // or just omit it. false is the default
🎯 Set the correct runtime path¶
Make sure clera.js is referenced with the correct path for your production file structure:
<script src="/assets/clera.js"></script>
Verify all action names match¶
With dev mode off, missing actions fail silently. Run through your app once with dev: true before deploying to catch any ACTION_NOT_FOUND warnings.
Test on target devices¶
If deploying to iOS or Android WebView, test on device and not just in a desktop browser. Font rendering, touch targets, scroll behaviour, and hardware API support all differ.
⚡ Performance¶
💾 Page caching¶
By default Clera keeps all visited pages mounted in the DOM. This is fast but uses memory. For apps with many pages, set a cache limit:
app.start({ maxCachedPages: 5 });
Mark pages that must never be evicted:
<page name="home" keep-alive>...</page>
Avoid heavy oncreate work¶
oncreate fires on first mount, before the page is visible. Avoid synchronous heavy work here. Use onshow for work that can wait until the page is displayed, or defer with setTimeout.
Keep render() calls lean¶
context.render() replaces innerHTML. The browser re-parses and re-renders the content. For large lists, only re-render what changed. For appending single items, use context.append() instead.
📦 Asset bundling¶
Clera itself requires no bundler or build step. Your JavaScript and CSS files are referenced directly from index.html. For native builds, use Clera Studio or Clera Packager.
📡 Offline support¶
Use the built-in service worker helper for offline support:
app.start({
serviceWorker: {
enabled: true,
url: "/sw.js",
mode: "cache-first",
cache: { pages: true, assets: true }
}
});
See the service worker docs for full setup.