Skip to main content

Running Kosko in Browser

· 2 min read

Last month, ECMAScript modules (ESM) support was shipped in Kosko 1.1. Today, you can use ESM not only in Node.js, but also in browsers. Currently only the following packages are browser-ready. Please make sure to update these packages before using Kosko in a browser.

  • @kosko/env - 2.0.0
  • @kosko/generate - 1.2.0

Programmatic API​

Kosko can be used in browsers via the programmatic API. In the following example, first we use dynamic import to load environment variables. Then, use the resolve function to resolve and validate components. And finally, print the resolved manifests with the print function.

import env, { createAsyncLoaderReducers } from "@kosko/env";
import { resolve, print, PrintFormat } from "@kosko/generate";

// Load environment variables with dynamic import
env.setReducers((reducers) => [
  ...reducers,
  ...createAsyncLoaderReducers({
    global: () =>
      import("./environments/dev/index.js").then((mod) => mod.default),
    component: (name) =>
      import(`./environments/dev/${name}.js`).then((mod) => mod.default)
  })
]);

(async () => {
  // Resolve and validate components
  const manifests = await resolve(
    import("./components/nginx.js").then((mod) => mod.default)
  );

  // Print resolved manifests
  print(
    { manifests },
    {
      format: PrintFormat.YAML,
      writer: { write: (data) => console.log(data) }
    }
  );
})();

See using in browser for more details.

More Examples​

You can try Kosko in the playground, or check the following examples.

Breaking Changes​

@kosko/env​

The following APIs were changed in this release.

  • Environment class → Environment interface
  • SyncEnvironment class → createNodeCJSEnvironment function
  • AsyncEnvironment class → createNodeESMEnvironment function

You don't have to change anything, unless you initialize these classes manually.

// Before
const { Environment } = require("@kosko/env");
const env = new Environment(process.cwd());

// After
const { createNodeCJSEnvironment } = require("@kosko/env");
const env = createNodeCJSEnvironment({ cwd: process.cwd() });