# 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`](https://docs.omlet.dev/cli-and-dashboard/learn-omlet-cli/config-file/resolve-imports-from-external-dependencies) 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`](https://docs.omlet.dev/cli-and-dashboard/learn-omlet-cli/config-file/..#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 %}