eventcatalog.config.js

Overview

eventcatalog.config.js contains configurations for your site and is placed in the root directory of your site.

Required fields

cId

• Type: string

An automated generated ID for your catalog. EventCatalog will generate this for you.

eventcatalog.config.js

module.exports = {
  cId: '107fdebb-7c68-42cc-975d-413b1d30d758',
};

title

• Type: string

Title for your website.

eventcatalog.config.js

module.exports = {
  title: 'EventCatalog',
};

organizationName

• Type: string

Your organization name.

eventcatalog.config.js

module.exports = {
  organizationName: 'Your Company',
};

Optional fields

base

• Type: string
• Default value: /

The base path to deploy to. EventCatalog will use this path as the root for your pages and assets both in development and in production build.

eventcatalog.config.js

module.exports = {
  base: '/',
};

The example below will output EventCatalog under http://{your-site}.com/my-company

eventcatalog.config.js

module.exports = {
  // renders as https://website.com/my-company/{routes}
  base: 'my-company',
};

outDir

Added in eventcatalog@2.11.4

• Type: string
• Default value: dist

The output path of your EventCatalog. By default it will output to the dist folder.

eventcatalog.config.js

module.exports = {
  // Catalog would output to the /build folder
  outDir: 'build',
};

trailingSlash

• Type: boolean
• Default: false

Set the route matching behavior of the dev server. Choose from the following options:

'true' - Only match URLs that include a trailing slash (ex: “/foo/“) 'false' - Match URLs regardless of whether a trailing ”/” exists

Use this configuration option if your production host has strict handling of how trailing slashes work or do not work.

eventcatalog.config.js

module.exports = {
  // Setting to true will add / onto all routes e.g http://website.com/visualiser/
  trailingSlash: true,
};

port

• Type: number
• Default: 3000

Configure the port EventCatalog is running on.

eventcatalog.config.js

module.exports = {
  // Changes the port from default 3000 to 5000
  port: 5000,
};

generators

• Type: Generator[]
• Default: []

Generators are the foundation of plugins with EventCatalog. EventCatalog will call your generators on build.

Generators are still in beta

This API is still in beta, as generators at the moment require your code to be in CJS format. We are working on supporting typescript and import statements too.

eventcatalog.config.js

module.exports = {
  generators: [
    [
      // This will load plugin.js in the root of your catalog
      '<rootDir>/plugin.js',
      // configuration for your generator
      {
        customValue: true,
        test: "Add any configuration values you want"
      },
    ],
  ],
};

landingPage

• Type: string
• Default: '/docs'

Configure the landing page URL your EventCatalog loads. By default EventCatalog loads /docs. Clicking on the EventCatalog logo (or your custom logo), will also go to this URL.

Examples include /visualiser, discover/events or custom pages /docs/services/InventoryService/0.0.2

eventcatalog.config.js

module.exports = {
  landingPage: '/visualiser',
};

docs

• Type: object

URL used when people want to edit the documentation. For example your GitHub repo and branch.

• Type: object

eventcatalog.config.js

module.exports = {
   docs: {
    sidebar: {
      // Should the sub heading be rendered in the docs sidebar?
      showPageHeadings: true,
      // optional block to show/hide services in the sidebar (default true)
      services: {
        visible: true
      },
      // optional block show/hide messages in the sidebar (default true)
      messages: {
        visible: true
      },
      // optional block show/hide domains in the sidebar (default true)
      domains: {
        visible: true
      },
      // optional block show/hide teams in the sidebar (default true)
      teams: {
        visible: true
      },
      // optional block show/hide users in the sidebar (default true)
      users: {
        visible: true
      }
    }
  }
};

Configuration for the documentation sidebar.

docs.sidebar options

Option	Description	Default
domains.visible (optional)	Show or hide domains in the navigation bar	true
services.visible (optional)	Show or hide services in the navigation bar	true
messages.visible (optional)	Show or hide messages in the navigation bar	true
teams.visible (optional)	Show or hide teams in the navigation bar	true
users.visible (optional)	Show or hide users in the navigation bar	true

editUrl

• Type: string

URL used when people want to edit the documentation. For example your GitHub repo and branch.

eventcatalog.config.js

module.exports = {
  editUrl: 'https://github.com/boyney123/eventcatalog-demo/edit/master',
};

logo

• Type: object

Logo, alt and text for your company logo.

Public directory

Add your logo to your /public directory.

eventcatalog.config.js

module.exports = {
  logo: {
    // This logo is located at public/logo.svg
    src: '/logo.svg',
    alt: 'Company logo',
    text: 'Urban Slice | EventCatalog',
  },
};

Example output

homepageLink

• Type: string

URL used when people want to link the logo & title in the top navigation to the homepage of a website.

eventcatalog.config.js

module.exports = {
  homepageLink: 'https://eventcatalog.dev',
};

mdxOptimize

• Type: string

This is an optional configuration setting to optimize the MDX output for faster builds. This may be useful if you have many catalog files and notice slow builds. However, this option may generate some unescaped HTML, so make sure your catalog interactive parts still work correctly after enabling it.

This is disabled by default.

Read Astro documentation on optimize for MDX for more information.

eventcatalog.config.js

module.exports = {
  mdxOptimize: true
};

asyncAPI.renderParsedSchemas

Added in eventcatalog@2.12.1

• Type: boolean

EventCatalog will render your AsyncAPI files into their own pages. By default EventCatalog will read your AsyncAPI files and parse your schemas to render them on the screen. Part of this process is validating your schemas and also adding metadata onto them (default).

If you want to keep your schemas as they are then you can set the asyncAPI.renderParsedSchemas to false.

Having issues rendering AsyncAPI files?

If you are having issues seeing or rendering your AsyncAPI file try setting the renderParsedSchemas to false

eventcatalog.config.js

module.exports = {
  asyncAPI: {
    renderParsedSchemas: false // default is true
  }
};

mermaid

Added in eventcatalog@2.18.1

• Type: object

EventCatalog uses mermaid to render diagrams.

Using mermaid you can render icons in your diagrams (e.g AWS architecture icons).

eventcatalog.config.js

module.exports = {
  mermaid: {
    iconPacks: ['logos'] // will load https://icones.js.org/collection/logos into eventcatalog
  }
};

You can choose from over 200,000 icons from icones.js.org.