v-4 nx

FAQ

How I can remove the Customizer(Setting) button?

For example, I want to remove the theme setting button from the default layout. First of all, I need to go to the libs/components/src/lib/AppLayout/DefaultLayout/index.js file, and to remove the customizer button, I need to remove <AppThemeSetting/> Tag.

In case you are using another layout go to the libs/components/src/lib/AppLayout/{Layout}/index.js and remove the <AppThemeSetting/> Tag.

Is there any way to remove the menus from the left sidebar? what all files do I need to remove it from?

Yes, You can remove the menus from the left sidebar. but we suggest that it would be great if you use the starter_template of your desired version. In case you want to remove a few menus from the template then you can follow the following steps

  1. Go to the apps/source/src/core/AppRoutes/routeConfig.js file and remove the object that you don't want to use in your left sidebar. In the Next.js version please modify the apps/source/src/core/AppRoutes/routeConfig.js

  2. Remove all unrelated routes from the src/page/index.js file. (Only for CRA)

  3. Remove all unrelated files/modules from the apps/source/src/modules directory. And remove the unrelated routes (Only for CRA)

  4. If you are using the Next.js version you need to remove from the apps/source/src/modules/ directory and routes from the apps/source/src/pages/ directory

Which icon package is used for the sidebar menu icons?

We are using react-icons for the sidebar menu. you can check out these here: https://react-icons.github.io/react-icons/

How easy is it to extract the Mail App into my own project?

There are a few simple steps to move apps into a separate project.

  1. Copy the Mail folder into your project from the apps

  2. Add the Mail app's route into your project and link it to your navigation(You can update the base path 'apps/mail' to as your project need.)

  3. Copy AppsContainer from the core components

  4. Copy the MailApp action and reducer file from the redux and link it to your app redux.

  5. In case you want to use a fake API and database, please copy the DB file and mock API into your project(In case you want to integrate it with your API Please link your API to mail)

  6. Please make sure you initialize APIs in your demo version.

How I can remove the default login email and password?

If you are using the CRA version then go to libs/modules/src/lib/auth/Signin/SigninFirebase.js and remove the initialValues and follow a similar way for other types of authentication.

libs/modules/src/lib/auth/Signin/SigninFirebase.js
initialValues={{// remove this attribute of Formik
 email: 'crema.demo@gmail.com', 
  password: 'Pass@1!@all',
}}
Where I can found the Nextjs Document?

If you are using the Next.js Version of Crema. You should follow the same doc for the Next.js version.

Where I can found the TypeScript Document?

If you are using the Typescript Version of Crema. You should follow the same doc for the TypeScript version. The folder structure and way of code style are the same for all versions of Crema.

Where I can change the initial URL of the theme?

To change the initial path you need to change the NX_INITIAL_URL value in the apps/source/.env file

How I can set dynamic initialUrl instead of static url('/dashboards/crypto')?

If you want to assign the dynamic URL then you need to get your URL in the apps/source/src/core/AppRoutes/index.js file and assign it to the path: '/',. 

const anonymousStructure = {
  routes: errorPagesConfigs.concat([
    {
      path: '/',
      element: <Navigate to={initialUrl} />,
    },
    {
      path: '*',
      element: <Navigate to="/error-pages/error-404" />,
    },
  ]),
};
How I change the menu text in existing version?

To change the text of the menu you need to update the locale value to a particular messageId you need to follow the following steps to achieve that.

  • Copy your messageId. It looks like this "sidebar.apps.wall" in the below message

apps/source/src/core/AppRoutes/routeConfig.js
messageId: "sidebar.apps.wall",

  • Search it in your locale file in the src/shared/localization/locales/{locale}.json file and replace its value according to you.

libs/services/localization/src/locales/en_US.json
 "sidebar.apps.wall": "Wall App",
How I can rid-off from the locale(Multilingual)?

Go to the .env file and set NX_MULTILINGUAL to false.

Is the Crema use nextjs default routing or its use next-router?

Crema uses the default routing method in Next.js. In this routing method page route is based on the file and directory name.

Where I can change the logo of Crema?

To change the logo you need to go to the file libs/components/src/lib/AppLayout/components/AppLogo/index.js. You can modify this file according to your requirement.

import React from 'react';
import { Box } from '@mui/material';
import { useThemeContext } from '@crema/context/ThemeContextProvider';
import { alpha } from '@mui/material/styles';
import { ReactComponent as Logo } from '../../../../assets/icon/logo.svg';
import { ReactComponent as LogoText } from '../../../../assets/icon/logo_text.svg';

const AppLogo = () => {
  const { theme } = useThemeContext();
  return (
    <Box
      sx={{
        height: { xs: 56, sm: 70 },
        padding: 2.5,
        display: 'flex',
        flexDirection: 'row',
        cursor: 'pointer',
        alignItems: 'center',
        justifyContent: 'center',
        '& svg': {
          height: { xs: 40, sm: 45 },
        },
      }}
      className="app-logo"
    >
      <Logo fill={theme.palette.primary.main} />
      <Box
        sx={{
          mt: 1,
          display: { xs: 'none', md: 'block' },
          '& svg': {
            height: { xs: 25, sm: 30 },
          },
        }}
      >
        <LogoText fill={alpha(theme.palette.text.primary, 0.8)} />
      </Box>
    </Box>
  );
};

export default AppLogo;
How I can fix the scrolling of the Navbar jumping back to the top of the menu when clicking on a menu item(NextJs)?

To stop the jump back to the top, you need to follow the following steps.

  1. Go to the file libs/components/src/lib/AppLayout/components/VerticalNav/index.js and add the following code.

const {pathname} = useRouter();

  useEffect(() => {
    if (process.browser) {
      if (pathname === item.url && document.getElementById(pathname)) {
        setTimeout(() => {
          document
            .getElementById(pathname)
            .scrollIntoView({behavior: 'smooth', block: 'center'});
        }, 1);
      }
    }
  }, [pathname]);

2. Replace the following anchor tag in the same file VerticalItem/index.js

// Replace this with 
<a style={{textDecoration: 'none'}}>

// Replace with this
<a style={{textDecoration: 'none'}} id={item.url}>
How can I change the current font ?

To change the Crema Current font you need to follow the following steps. 1. Go to the file apps/source/src/index.html and Replace the current Poppins font with your current font <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap"rel="stylesheet"> 2. Go to the file libs/constants/src/defaultConfig.js and replace the font family the in the Typography

export const defaultTheme = {
  theme: {
  ...
    typography: {
      fontFamily: ['Poppins', 'sans-serif'].join(','),
    },
    ...
};

3. Go to the file libs/constants/src/AppEnums.js update the Font weight according to your project.

export enum Fonts {
  LIGHT = "300",
  REGULAR = "400",
  MEDIUM = "500",
  SEMI_BOLD = "600",
  BOLD = "700",
}

4. Go to the file apps/source/src/assets/styles/base.css and replace the current font family 'Poppins' with your current font in this file

How to disable the mock api in the App?

We suggest, please start your project with the starter kit. To fetch data from real APIs, you need to follow the following steps.

  1. Update libs/mockapi/src/index.js/tsx the file's content like below.

import jwtAxios from '@crema/services/axios';

// import MockAdapter from 'axios-mock-adapter';
// export default new MockAdapter(jwtAxios, { delayResponse: 200 });

export default jwtAxios;

  1. Remove the following import statement from the apps/{your app}/src/app.js/tsx file.

import '@crema/mockapi';

  1. Make sure you are using the axios from the following lib in APIHooks or Redux Actions, by default we are using it from '@crema/services/axios'

import jwtAxios from '@crema/services/auth/JWT';

  1. In any case, if you get any reference error related to jwtAxios please fix it by updating the tsconfig.base.json file as follows and restart your project again.

"@crema/services/auth/JWT": ["libs/services/auth/lib/jwt-auth/index.js"],

//replace the above reference with the following

"@crema/services/auth/JWT": ["libs/services/auth/src/jwt-auth/index.js"],
How to fix: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default (froala-editor\js)
Can't resolve 'crypto' in '..\node_modules\froala-editor\js'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

The above error occurs due to the froala-editor compatibility with webpack 5. The froala-editor team will fix this in their next update. Till then you can remove this file libs/modules/src/lib/thirdParty/froalaEditor/index.tsx/js. and remove the froala-editor dependency.

How can I make server-side requests on a page, with the JWT token?

Here is an example of the code getting data from an API using a JWT token on the server side

const Page = (props) => {
  return <PageDetail {...props} />;
};

export const getServerSideProps = async (context) => {
  const { slug } = params;
  const token = getCookie('token', { req, res });
  const props = {};

  try {
    setAuthToken(token);
    const response = await httpClient.get(`get-data/${slug}/`, {
      token: token,
    });
    if (isRequestSuccessful(response.status)) {
      const data= response.data.data;
      props = { data };
    }
  } catch (error) {
    console.log('error: ', error);
  }

  return {
    props,
  };
};

export default Page;
How InfoViewContext works?

InfoViewContext has all the info about the API state like loading/success/error, according to their updated state, it will show the loader, success, and error message on the UI. We can set ferchStart, fetchMessage, and fetchError according to your requirement and This component will handle the state in the proper way

Please let us know if you missed anything in the docs. We will add that asap.

Last updated