Omlet Docs
BlogChangelogAsk the CommunityContact Sales
  • Get started
    • What is Omlet?
    • CLI & Dashboard
  • Omlet for VS Code
  • CLI & Dashboard
    • CLI
      • Your first scan
      • Set up your dashbard
      • Future scans
      • Ensure data accuracy
      • Config file
        • Exports configuration
        • Mapping aliases
        • Excluding certain components & files
        • Tutorial: Config file
      • Custom component properties
        • CLI hooks
        • Tutorial 1: Team/code owner usage
        • Tutorial 2: Package version tracking
        • Other example scripts
      • Set up regular scans
      • CLI commands
        • init
        • analyze
        • login
    • Analytics
      • Popular charts
      • Create custom charts
      • Save charts to dashboard
      • Share charts and dashboards with your team
      • Download chart data
    • Components
      • Search and filter components
      • Component tags
      • Dependency Tree
      • Props tracking
    • Workspace & Account
      • Invite team members
      • Renaming projects
      • Update your email address
      • Access your billing details & invoices
  • Security
    • Security in Omlet
    • Data collection
  • Help
    • Pricing
    • FAQs
      • How detection works?
      • Monorepo support
      • How to delete scans?
      • Omlet vs. React Scanner
      • Working with multiple workspaces
    • Troubleshooting
      • Debugging CLI issues
      • Some components aren't detected
      • API failed or timeout
      • Are you behind a proxy?
      • Troubleshooting Git errors
Powered by GitBook
On this page
  • Acme design system
  • Imports from application packages
  • Config file
  • Exports configuration
  • Alias configuration
  • Package-specific configuration for monorepos
  1. CLI & Dashboard
  2. CLI
  3. Config file

Tutorial: Config file

In this example codebase, the design system repository has entry points in the dist folder where the application projects import the published components. This is causing duplicate components issues since the components from both src and dist folders appear in Omlet.

Acme design system

The package.json of the design system repository has the main property set as dist/index.js.

package.json
{
  "name": "acme-design",
  "version": "1.0.0",
  "description": "Acme design system",
  "main": "dist/index.js",
  "scripts": {
    "build": "npm run clean && webpack --mode production",
    "clean": "rm -rf dist"
  },
  ...
}

The index.js file under the src folder exporting the Button and DatePicker components.

src/index.js
export * from "./button";
export * from "./date-picker";

We have a button.jsx file under src/button to define the Button component.

src/button/button.jsx
import react from 'react';
export const Button = ({ onClick, children }) => {
    return <button style={{ border: "none", backgroundColor: "#f0f0f0" }} onClick={onClick}>{children}</button>
}

Also, there is an index.js file under src/button exporting the Button component.

src/button/index.js
export { Button } from './button';

We have a date-picker.jsx file under src/date-picker to define the DatePicker component.

src/date-picker/date-picker.jsx
import react from 'react';
import { Button } from '@/button';

export const DatePicker = ({ onClick, children }) => {
    return <Button onClick={onClick}>📅{children}</Button>
}

There is an index.js file under src/date-picker exporting the DatePicker component.

src/date-picker/index.js
export { DatePicker } from './date-picker';

Imports from application packages

If the application projects import the design system component with statements such as:

import { DatePicker } from "acme-design/dist/date-picker";
import { Button } from "acme-design";

The CLI will detect these usages as external while scanning the application projects, and we'll have duplicate components for Button and DatePicker. The components in the src folder will have 0 usages since the imports resolve to the published components in the dist folder instead of the actual components in the src folder.

Config file

Exports configuration

.omletrc
{
  "$schema": "https://json.schemastore.org/omletrc.json",
  "exports": {
    "dist/*": "src/*",
    ".": "src/index.js"
  }
}
.omletrc
{
    "$schema": "https://json.schemastore.org/omletrc.json",
    "exports": {
        ...
    }
}

Also, to prevent the CLI from scanning the dist folder, we need to add its glob pattern to the ignore property so that the published components in the dist folder will not appear in Omlet anymore.

.omletrc
{
  "$schema": "https://json.schemastore.org/omletrc.json",
  "exports": {
    "dist/*": "src/*",
    ".": "src/index.js"
  },
  "ignore": [
    "dist/**"
  ]
}

Alias configuration

Assuming we use a bundler in our design system and have the alias for the src folder resolving any entry point that starts with @ to the src folder. We need to map these aliases to help CLI resolve the correct entry points. The final configuration file for the design system repository should look like below.

.omletrc
{
  "$schema": "https://json.schemastore.org/omletrc.json",
  "exports": {
    "dist/*": "src/*",
    ".": "src/index.js"
  },
  "aliases": {
    "@/*": "src/*"
  },
  "ignore": [
    "dist/**"
  ]
}

If you need to define exports or aliases for other repositories, the configuration files need to be created separately under each repository's root directory.

Package-specific configuration for monorepos

.omletrc
{
  "$schema": "https://json.schemastore.org/omletrc.json",
  "workspaces": {
    "acme-design": {
      "exports": {
        "dist/*": "src/*",
        ".": "src/index.js"
      },
      "aliases": {
        "@/*": "src/*"
      }
    },
    "acme-app": {
      "aliases": {
        "@utils": ["src/utils/index.ts"]
      }
    }
  },
  "ignore": [
    "dist/**"
  ]
}

Need more help?

PreviousExcluding certain components & filesNextCustom component properties

Last updated 11 months ago

To help CLI resolve the correct entry points, we need to create a .omletrc file in the root directory of the design system repository and define the configuration below.

Auto-completion and error highlighting are available for the CLI configuration in popular IDEs like JetBrains and VS Code. Make sure to add Omlet's to your config file and have the CLI version 1.7.0 or above.

If we would have a monorepo with both the design system and the application projects, .omletrc file will need to be placed in the root directory of the repository, and the exports and aliases will need to be defined under the corresponding package using the property.

If you need more help or have questions, feel free to contact us at .

exports
schema
support@omlet.dev
workspaces