# Project Configuration

Berry makes it easy for you to manage your settings all in one place, we call it a single source of truth, this will help you to keep everything organized and make it easier to add new settings in the future. You can change things like font, border, theme layout, language, and more. You can find all of these settings in the **`..src/config.js`** file.

|                    |                      |               |                                                                                                                              |
| ------------------ | -------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Option**         | **Default**          | **Data Type** | **Description**                                                                                                              |
| **basename**       | /                    | String        | `build time set subdomain or path of project directory`                                                                      |
| **defaultPath**    | /dashboard/default   | string        | default path once login success                                                                                              |
| **fontFamily**     | 'Roboto', sans-serif | String        | set font family                                                                                                              |
| **borderRadius**   | 12                   | number        | border-radius for card and textboxes                                                                                         |
| **outlinedFilled** | true                 | boolean       | defines backfill color for textboxes. setting it false will show transparent background for outline textboxes                |
| **theme**          | light                | String        | `light, dark`                                                                                                                |
| **18n**            | en                   | String        | <p><code>en</code> - English</p><p><code>fr</code> - français</p><p><code>ro</code> - Română</p><p><code>zh</code> - 中国人</p> |
| **rtlLayout**      | false                | boolean       | set layout from right to left.                                                                                               |
| **jwt**            | -                    | Object        | JSON web token configuration                                                                                                 |
| **firebase**       | -                    | Object        | `Firebase Authentication config`                                                                                             |
| **auth0**          | -                    | Object        | `auth0 login config`                                                                                                         |

You can find all of these settings in the **`..app/config.ts`** file.

|                    |                      |               |                                                                                                                              |
| ------------------ | -------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Option**         | **Default**          | **Data Type** | **Description**                                                                                                              |
| **fontFamily**     | 'Roboto', sans-serif | String        | set font family                                                                                                              |
| **borderRadius**   | 12                   | number        | border-radius for card and textboxes                                                                                         |
| **outlinedFilled** | true                 | boolean       | defines backfill color for textboxes. setting it false will show transparent background for outline textboxes                |
| **theme**          | light                | String        | `light, dark`                                                                                                                |
| **18n**            | en                   | String        | <p><code>en</code> - English</p><p><code>fr</code> - français</p><p><code>ro</code> - Română</p><p><code>zh</code> - 中国人</p> |
| **rtlLayout**      | false                | boolean       | set layout from right to left.                                                                                               |
| **jwt**            | -                    | Object        | JSON web token configuration                                                                                                 |

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const config = {
    // basename: only at build time to set, and don't add '/' at end off BASENAME for breadcrumbs,  like '/berry-material-react/react/default'
    basename: '/',
    defaultPath: '/dashboard/default',
    fontFamily: `'Roboto', sans-serif`,
    borderRadius: 12,
    outlinedFilled: true,
    theme: 'light',
    i18n: 'en', // 'en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese
    rtlLayout: false,
    jwt: {
        secret: 'SECRET-KEY',
        timeout: '1 days'
    },
    firebase: {
        apiKey: 'apiKey',
        authDomain: 'authDomain',
        projectId: 'berry-material-react',
        storageBucket: 'berry-material-react.appspot.com',
        messagingSenderId: 'messagingSenderId',
        appId: 'appId',
        measurementId: 'measurementId'
    },
    auth0: {
        client_id: 'client_id',
        domain: 'demo-localhost.us.auth0.com'
    }
};

export default config;
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import { PaletteMode } from '@material-ui/core';

const config: {
    basename: string;
    defaultPath: string;
    fontFamily: string;
    borderRadius: number;
    outlinedFilled: boolean;
    theme: PaletteMode;
    presetColor: string;
    i18n: string;
    rtlLayout: boolean;
    jwt: {
        secret: string;
        timeout: string;
    };
    firebase: {
        apiKey: string;
        authDomain: string;
        projectId: string;
        storageBucket: string;
        messagingSenderId: string;
        appId: string;
        measurementId: string;
    };
    auth0: {
        client_id: string;
        domain: string;
    };
} = {
    // basename: only at build time to set, and Don&apos;t add '/' at end off 
    // BASENAME for breadcrumbs, also Don&apos;t put only '/' use blank('') instead
    // like '/berry-material-react/react/default'
    basename: '',
    defaultPath: '/dashboard/default',
    fontFamily: `'Roboto', sans-serif`,
    borderRadius: 12,
    outlinedFilled: true,
    theme: 'light', // light, dark
    presetColor: 'default', // default, theme1, theme2, theme3, theme4, theme5
    // 'en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese
    i18n: 'en',
    rtlLayout: false,
    jwt: {
        ...
    },
    firebase: {
        ...
    },
    auth0: {
        ...
    }
};

export default config;
```

{% endtab %}
{% endtabs %}