Comment on page
FAQ
For example, I want to remove the theme setting button from the default layout. First of all, I need to go to the
src/@crema/components/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
src/@crema/components/AppLayout/{Layout}/index.js
and remove the <AppThemeSetting/> Tag.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.
If you are using the CRA version then go to
src/modules/auth/Signin/SigninFirebase.js
and remove the initialValues and follow a similar way for other types of authentication.
src/modules/auth/Signin/SigninFirebase.js
initialValues={{// remove this attribute of Formik
email: '[email protected]',
password: 'Pass@1!@all',
}}
If you want to assign the dynamic URL then you need to get your URL in the
src/@crema/core/AppLayout/index.js
file and assign it to the initURL like below.
// Update this initURL by using any method you like.
// You can access it from the user of authUser hook.There are a lot of possibility
const initURL = params?.redirect ? params?.redirect : initialUrl;
To change the logo you need to go to the file
src/@crema/components/AppLayout/components/AppLogo/index.js
. You can modify this file according to your requirements.import React from 'react';
import {Box} from '@mui/material';
import {useThemeContext} from '@crema/context/AppContextProvider/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;
To change the Crema Current font you need to follow the following steps.
1. Go to the file
public/index.htm
l and Replace the current Poppins font with your current font <link href="https://fonts.googleapis.com/css2?family=Be Vietnam: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 in the Typographyexport const defaultTheme = {
theme: {
...
typography: {
fontFamily: ['Be Vietnam', 'sans-serif'].join(','),
},
...
};
3. Go to the file
src/@crema/constants/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
src/styles/base.css
and replace the current font family 'Be Vietnam' with your current font in this fileWe suggest, please start your project with the starter kit. To fetch data from real APIs, you need to follow the following steps.
- 1.Update
src/@crema/mockapi/index.js
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;
- 2.Remove the following import statement from the
src/App.js
file.
import '@crema/mockapi';
- 3.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';
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
src/modules/thirdParty/froalaEditor/index.js
. and remove the froala-editor dependency.
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;
Please let us know if you missed anything in the docs. We will add that asap.