Settings and Dependencies

Environment Variables and Secrets

• The Settings button on My Site opens a Settings popup above the current list, on the right. The expansion button displays the website management menu.
• Website settings include domain, environment variables, Secret, CORS settings, social login, It is divided into Telegram Alarm, Gmail Settings, and Advanced Settings tabs, and even if you move the tabs, you enter before saving. Maintain status quo.
• Open the Cloudflare domain management page directly at the bottom of the domains tab. You can add or change DNS records.
• The CORS settings tab shows the exact origin of the external web app, including protocol and port. Enter each line, including each line.
• General environment variables and settings in the editor's settings button or MCP update_settings Separately store the Secret.
• Secret is encrypted with AES-256-GCM and the value is not displayed again after storage.
• Use SERVICE_SECRET_KEY first, if it does not exist, create an encryption key from MANAGER_PASSWORD.
• Internal variables such as DATABASE_URL, REDIS_URL, and CAKE_ prefixes cannot be overwritten by websites.
• Cake20 automatically creates and renews key access rights for each Redis account and website.
• Google, GitHub, and Naver login keys are entered in the social login dedicated field. It is encrypted and stored, and you can check the callback URL for each provider.
• The Telegram Alerts tab provides access to the BotFather API Key and site administrator private chat. You can connect and send a test alarm.
• The Gmail Settings tab associates sending-only Google OAuth permissions for the site owner and We provide activation and test emails for each site you own.
• File, DB, Redis, memory, CPU, and request limits are set by the administrator for free or by subscription. It is set for each website, and you can compare the current value in the subscription plan above.
• Sleep is an internal operating policy of the Cake20 engine, not a website-specific user setting.
• Environment variables and run settings will be applied at the next startup.

npm dependency

A local package name may be used before the first remote deployment. When Cake20 Core assigns a website, package.json name becomes the system-managed web-{website ID}. Do not create a separate id field.

If you declare a registry package in the root package.json, inside release Install the production dependency. dependency lifecycle The script does not run. Cake20 View, Cake20 UI, Prisma and Zod Use the runtime provided version. External packages are managed by the administrator Available only if features.externalPackages is enabled, The default is disabled.

// package.json
{
  "dependencies": {
    "nanoid": "5.1.5"
  }
}

Cake20 CDN

• Before adding a browser feature, check the Cake20 CDN catalog first. When a module or font is already provided, prefer its versioned CDN path instead of installing a duplicate npm dependency.
• Cake20 CDN is a browser-specific static module that multiple websites use together. Provides the font as the version path.
• CodeMirror bundle includes /editor/v1/editor.mjs, Tiptap Core·StarterKit and The main extension bundle is loaded from /editor/v1/rich-editor.mjs.
• Load DataTables and Responsive from /datatable/v1/datatable.mjs and its stylesheet from /datatable/v1/datatable.css?v=1.
• Common fonts are /fonts/v1/ibm-plex-sans.css and /fonts/v1/lilex.css. You can load it with @import url(...) at the top of app/assets/style.css.
• Remote ESM dynamically imports only in the browser execution section of Cake20 View. Use @vite-ignore to make Vite keep the URL intact.
• Keep the normal @tiptap/extension-text-align import syntax and Runtime maps it to /editor/v1/tiptap-text-align.mjs. Use it only in app code and do not add it to package.json dependencies.
• The server API, tasks and jobs do not import the CDN module. on the server The required functionality uses the Runtime interface or an accepted npm dependency.
• Browser modules provided by CDN are not duplicated in package.json dependencies. Doesn't add anything. Version paths such as v1 are treated as fixed contracts.
• The general editing screen uses the existing editor of Cake20 UI first, and the rich-editor uses Use when you need a low-level custom editor.
• Drag sorting is not a CDN package, but Cake20 built-in <DragList> without importing it. It is used and does not add a separate drag library.

onMounted(async () => {
  const rich = await import(
    /* @vite-ignore */
    "https://cdn.cake20.com/editor/v1/rich-editor.mjs"
  );

  const { Editor, StarterKit, TextAlign } = rich;
        });

DataTables CDN and server-side lists

• Load the DataTables 3 and Responsive 4 bundles from the versioned Cake20 CDN paths instead of duplicating them in package.json dependencies.
• In browser-only app/components/DataTable.client.tsx, attach the stylesheet once and dynamically import the ES Module with @vite-ignore.
• For shared services, keep serverSide: true as the default even for small lists so the browser does not fetch every row up front.
• Use { page, take, find, date, order } for requests and { total, items } for responses. Keep DataTables start and draw inside the wrapper adapter.
• Send search and ordering to the server, and validate ordering against an allowlist of fields before executing the query.
• See the DataTable Product Showcase in Templates for the complete English and Korean implementation.

const style = document.createElement("link");
style.rel = "stylesheet";
style.href = "https://cdn.cake20.com/datatable/v1/datatable.css?v=1";
document.head.append(style);

const DataTable = (await import(
  /* @vite-ignore */
  "https://cdn.cake20.com/datatable/v1/datatable.mjs"
)).default;

new DataTable(table, {
  serverSide: true,
  pageLength: 5,
  responsive: true,
  ajax: async (input, done) => {
    const reply = await fetchPost("/api/products", {
      page: Math.floor(input.start / input.length) + 1,
      take: input.length,
      find: input.search.value
        ? [{ field: "all", value: input.search.value }]
        : [],
      order: input.order.map((item) => ({
        field: columns[item.column].data,
        dir: item.dir
      }))
    });
    done({
      draw: input.draw,
      recordsTotal: reply.total,
      recordsFiltered: reply.total,
      data: reply.items
    });
  },
  columns
});