Skip to main content

Configuration

Drayman configuration can be managed inside drayman.config.js file.

Here is an example configuration with description and default values:

drayman.config.js
module.exports = {  // Folder where Drayman application source files are stored.  // It must contain `components` folder where Drayman components are placed.  srcDir: "src",  // Folder where Drayman will output compiled source files and components.  outDir: "dist",  // Folder where `index.html` is located.  publicDir: "public",  // Folder containing dependencies and Drayman web components.  nodeModulesDir: "node_modules",  // Custom configuration for PostCSS.  postcss: {    // Source CSS file.    source: "src/styles.css",    // Destination CSS file.    destination: "public/styles.css",  },  port: 3033,  // Maximum memory (in MB) that can be used by the component instance heap.  heapLimit: 512,  // Maximum external memory (in MB) that can be used by the component instance.  externalLimit: 512,  // Time (in ms) after which the component instance will be destroyed if it does not send a heartbeat.  heartbeatLimitMs: 3000,  // Controls how component instance console output is forwarded.  logging: {    batching: {      // If true, logs are buffered and flushed in batches.      enabled: false,      // How often buffered logs are flushed (in ms).      flushIntervalMs: 1000,      // Maximum size of a single log line before truncation (in bytes).      maxLogLineBytes: 16 * 1024,      // Maximum total log size flushed per batching window (in bytes).      maxBatchBytesPerWindow: 64 * 1024,      // Maximum total forwarded log size per component instance (in bytes).      maxForwardedBytesPerInstance: 512 * 1024,    },  },};

All configured file and directory paths are resolved relative to the Drayman project directory. Standalone applications use the current working directory. Embedded applications provide the project directory to buildDrayman and mountDrayman.

Drayman initialization#

Drayman initialization can be configured when executing initializeDraymanFramework() function which is by default located inside public/index.html file:

public/index.html
<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <title>Drayman Framework</title>    <meta name="viewport" content="width=device-width, initial-scale=1" />    <script src="/drayman-framework-client.js"></script>  </head>
  <body>    <drayman-element component="home"></drayman-element>
    <script>      initializeDraymanFramework();    </script>  </body></html>

This function accepts an object with some configurable options which are described below.

basePath#

Sets the HTTP and WebSocket base path used by an embedded Drayman application. The value must match the basePath passed to mountDrayman. Standalone applications use /.

public/index.html
<script src="/embedded-app/drayman-framework-client.js"></script><script>  initializeDraymanFramework({    basePath: "/embedded-app",  });</script>

browserCommands#

public/index.html
...
<script>  initializeDraymanFramework({    browserCommands: () => ({      alert: async ({ text }) => {        alert(text);      },      getCurrentUrl: async () => {        return window.location.href;      },    }),  });</script>
...

Can be used to describe commands which are executed inside user browser. More detailed description of this functionality can be found here - The Browser object.

elementOptions#

Can be used to configure default behavior of elements. Contains dictionary which describes each element and it's attributes:

public/index.html
...
<script>  initializeDraymanFramework({    elementOptions: {      h3: { style: "color: red;" },      input: {        oninput: { debounce: 500 },      },    },  });</script>
...

Using this example will modify default behavior of elements:

  • All <h3> elements will have red text.
  • All <input> elements with an oninput handler will be debounced by 500ms before data is sent to server.

Global event options only configure handlers declared by the element. They do not add new event handlers.

tip

Element event configuration is described in detail here.