# 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`.

<pre class="language-json" data-title="package.json"><code class="lang-json">{
  "name": "acme-design",
  "version": "1.0.0",
  "description": "Acme design system",
<strong>  "main": "dist/index.js",
</strong>  "scripts": {
    "build": "npm run clean &#x26;&#x26; webpack --mode production",
    "clean": "rm -rf dist"
  },
  ...
}
</code></pre>

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

{% code title="src/index.js" %}

```javascript
export * from "./button";
export * from "./date-picker";
```

{% endcode %}

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

{% code title="src/button/button.jsx" %}

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

{% endcode %}

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

{% code title="src/button/index.js" %}

```javascript
export { Button } from './button';
```

{% endcode %}

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

{% code title="src/date-picker/date-picker.jsx" %}

```javascript
import react from 'react';
import { Button } from '@/button';

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

{% endcode %}

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

{% code title="src/date-picker/index.js" %}

```javascript
export { DatePicker } from './date-picker';
```

{% endcode %}

## Imports from application packages

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

```javascript
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

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 [`exports`](/cli-and-dashboard/learn-omlet-cli/config-file/resolve-imports-from-external-dependencies.md) configuration below.

{% code title=".omletrc" %}

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

{% endcode %}

{% hint style="info" %}
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 [schema](https://json.schemastore.org/omletrc.json) to your config file and have the CLI version 1.7.0 or above.

<pre class="language-json" data-title=".omletrc"><code class="lang-json">{
<strong>    "$schema": "https://json.schemastore.org/omletrc.json",
</strong>    "exports": {
        ...
    }
}
</code></pre>

{% endhint %}

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.

{% code title=".omletrc" %}

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

{% endcode %}

### 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.

{% code title=".omletrc" %}

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

{% endcode %}

{% hint style="info" %}
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.
{% endhint %}

### Package-specific configuration for monorepos

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 [`workspaces`](/cli-and-dashboard/learn-omlet-cli/config-file.md#workspaces) property.

<pre class="language-json" data-title=".omletrc"><code class="lang-json">{
  "$schema": "https://json.schemastore.org/omletrc.json",
<strong>  "workspaces": {
</strong><strong>    "acme-design": {
</strong><strong>      "exports": {
</strong><strong>        "dist/*": "src/*",
</strong><strong>        ".": "src/index.js"
</strong><strong>      },
</strong><strong>      "aliases": {
</strong><strong>        "@/*": "src/*"
</strong><strong>      }
</strong><strong>    },
</strong><strong>    "acme-app": {
</strong><strong>      "aliases": {
</strong><strong>        "@utils": ["src/utils/index.ts"]
</strong><strong>      }
</strong><strong>    }
</strong><strong>  },
</strong>  "ignore": [
    "dist/**"
  ]
}
</code></pre>

{% hint style="info" %}
**Need more help?**

If you need more help or have questions, feel free to contact us at <support@omlet.dev>.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.omlet.dev/cli-and-dashboard/learn-omlet-cli/config-file/tutorial-config-file.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.