Project Configuration

Configuration option for whole Berry Template

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	en - English fr - français ro - Română zh - 中国人
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	en - English fr - français ro - Română zh - 中国人
rtlLayout	false	boolean	set layout from right to left.
jwt	-	Object	JSON web token configuration

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;

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't add '/' at end off 
    // BASENAME for breadcrumbs, also Don'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;