Deployment Modes Reference

Bundled Mode (Default)

Compiles all project JavaScript into a single IIFE (bundle.js) and all CSS into bundle.css.

Output files: bundle.js, bundle.css

Embed:

<link href="https://cdn.odyn.dev/p/{project}/bundle.css" rel="stylesheet">
<script src="https://cdn.odyn.dev/p/{project}/bundle.js" defer></script>

When to use: Most projects. Simplest setup with a single script tag.

Per-File Mode

Produces individual ES module outputs for each entry point. Shared code is split into chunks that load automatically via imports.

Output files: One .js module per entry point, shared chunks, individual .css files.

Embed:

<link href="https://cdn.odyn.dev/p/{project}/files/styles.css" rel="stylesheet">
<script type="module" src="https://cdn.odyn.dev/p/{project}/files/main.js"></script>

Only entry points appear in embed codes. Barrel files (re-export-only files) are excluded. Shared chunks load silently.

When to use: Projects that benefit from tree-shaking, code splitting, or dynamic imports.

Folder Bundle Mode

Produces a dedicated IIFE bundle for each folder marked as a bundle. Each folder bundle has its own bundle.js and bundle.css.

Output files: fb-{folderName}/bundle.js, fb-{folderName}/bundle.css

Embed:

<script src="https://cdn.odyn.dev/p/{project}/bundle.js" defer></script>
<script src="https://cdn.odyn.dev/p/{project}/fb-components/bundle.js" defer></script>

When to use: Projects that need isolated bundles per feature or section.

Mode Comparison

See Embed Code Reference for full snippet formats.