# About Crema(CRA) Designed and developed with high expertise, Crema is fully-featured React-based Admin template that is configured with all the latest and trending libraries and technologies like Material-UI, Redux, React Hooks, etc. **with different-2 Powerful CSS framework and backend servers** Crema has six dashboards, lots of widgets and metrics, four fully functional apps (Todo, Mail, Contact, Chat, and Scrum board), and a lot of ready to use pages. **Key Features:-** * Three Modes - Light, Semi-Dark, and Dark. * A lot of Color combinations to beautify the Template. * Six Languages Supported. * Code Splitting and Reusability. * A separate version of TypeScript Crema is loaded with:- * React Hooks * TypeScript * React Redux * Material UI * Google Maps * Slick Carousel * React Calendar * Drag N Drop * ReCharts * React Player * React Colors * React Beautiful DND * Dropzone * React Timeline * React Table * Material UI Tables * React Notifications * React Player * Axios-mock-adaptor * Material Icons * ES-Lint & TS Lint * Prettier * Husky\ and a lot more
\ **You can check here the libs and it's version** ``` { "name": "crema", "version": "1.7.0", "private": true, "dependencies": { "@auth0/auth0-spa-js": "^1.12.1", "@brainhubeu/react-carousel": "^1.19.20", "@date-io/moment": "^1.3.13", "@emotion/core": "^10.0.35", "@emotion/styled": "^10.0.27", "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.56", "@material-ui/pickers": "^3.2.10", "@popperjs/core": "^2.5.2", "@storybook/theming": "^5.3.19", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.0.4", "@testing-library/user-event": "^12.1.6", "animate.css": "^4.1.1", "apexcharts": "^3.19.3", "array-move": "^3.0.1", "autoprefixer": "^10.0.0", "autosuggest-highlight": "^3.1.1", "aws-amplify": "^2.2.7", "axios": "^0.20.0", "axios-mock-adapter": "^1.18.2", "babel-plugin-transform-remove-console": "^6.9.4", "clsx": "^1.1.1", "connected-react-router": "^6.8.0", "d3-geo": "^2.0.1", "date-fns": "^2.16.1", "downshift": "^6.0.6", "draft-js": "^0.11.7", "firebase": "^7.21.1", "flag-icon-css": "^3.5.0", "formik": "^2.1.5", "jss": "^10.4.0", "jss-extend": "^6.2.0", "jss-rtl": "^0.3.0", "lodash": "^4.17.20", "match-sorter": "^4.2.1", "material-table": "^1.69.0", "material-ui-popup-state": "^1.6.1", "moment": "^2.29.0", "namor": "^2.0.2", "notistack": "^1.0.0", "npm-run-all": "^4.1.5", "postcss-import": "^12.0.1", "prism-react-renderer": "^1.1.1", "prop-types": "^15.7.2", "purgecss": "^1.4.2", "raw-loader": "^4.0.1", "rc-queue-anim": "^1.8.3", "react": "^16.13.1", "react-apexcharts": "^1.3.7", "react-autosuggest": "^10.0.2", "react-beautiful-dnd": "^13.0.0", "react-big-calendar": "^0.28.0", "react-bottom-scroll-listener": "^4.1.0", "react-chat-window": "^1.2.1", "react-circular-progressbar": "^2.0.3", "react-code-input": "^3.10.0", "react-color": "^2.18.1", "react-daypicker": "^3.0.10", "react-dnd": "^11.1.3", "react-dnd-html5-backend": "^11.1.3", "react-dom": "^16.13.1", "react-draft-wysiwyg": "^1.14.5", "react-draggable": "^4.4.3", "react-dropzone": "^11.2.0", "react-google-maps": "^9.4.5", "react-image-timeline": "^3.2.13", "react-images": "^1.1.7", "react-intl": "^5.8.2", "react-notifications-component": "^2.4.1", "react-number-format": "^4.4.1", "react-perfect-scrollbar": "^1.5.8", "react-photo-gallery": "^8.0.0", "react-player": "^2.6.2", "react-popper": "^2.2.3", "react-redux": "^7.2.1", "react-ripples": "^2.2.1", "react-router-config": "^5.1.1", "react-router-dom": "^5.2.0", "react-router-redux": "^4.0.8", "react-scripts": "^3.4.3", "react-select": "^3.1.0", "react-share": "^4.2.1", "react-simple-maps": "^2.1.2", "react-slick": "^0.27.11", "react-sortable-hoc": "^1.11.0", "react-spring": "^8.0.27", "react-svg-piechart": "^2.4.1", "react-swipeable-views": "^0.13.9", "react-table": "6.10.3", "react-text-mask": "^5.4.3", "react-toastify": "^6.0.8", "react-tooltip": "^4.2.7", "react-transition-group": "^4.4.1", "react-virtualized": "^9.22.2", "react-window": "^1.8.5", "recharts": "^1.8.5", "redux": "^4.0.5", "redux-thunk": "^2.3.0", "slick-carousel": "^1.8.1", "typescript": "^3.8.3", "use-url-search-params": "^2.3.13", "velocity-animate": "^1.5.2", "velocity-react": "^1.4.3", "yup": "^0.29.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "lint": "eslint \"src/**/*.+(js|jsx)\"", "lint:fix": "eslint --fix \"src/**/*.+(js|jsx)\"", "format": "prettier --write \"src/**/*.+(js|jsx)\"", "precommit": "lint-staged", "storybook": "start-storybook -p 9009 -s public", "build-storybook": "build-storybook -s public" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@storybook/addon-a11y": "^5.3.19", "@storybook/addon-actions": "^5.3.19", "@storybook/addon-knobs": "^5.3.19", "@storybook/addon-links": "^5.3.19", "@storybook/addons": "^5.3.19", "@storybook/preset-create-react-app": "^3.0.0", "@storybook/react": "^5.3.19", "@typescript-eslint/eslint-plugin": "^4.2.0", "@typescript-eslint/parser": "^4.2.0", "babel-eslint": "^10.1.0", "babel-plugin-transform-imports": "^2.0.0", "eslint": "^6.6.0", "eslint-config-prettier": "^6.12.0", "eslint-config-react-app": "^5.2.1", "eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-import": "^2.22.0", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-react": "^7.21.2", "eslint-plugin-react-hooks": "^4.1.2", "husky": "^4.2.3", "lint-staged": "^10.0.8", "prettier": "^2.1.2", "storybook-addon-material-ui": "^0.9.0-alpha.21" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.+(js|jsx)": [ "eslint --fix" ], "*.+(js|jsx|json|css|md)": [ "prettier --write" ] } } ``` # Product Overview Here we explained about crema's directory Upon downloading the zip folder from the ThemeForest, you will get the following content:-\ \ All folders have a **readme.md** file. this file contains all information about how to start that particular project **1. source** It contains the source code of the template. This is purely bases on CRA based template. **2. build** It contains the offline demo of Crama. You can check this by using the following commands ``` yarn global add serve serve -s build ``` **3. starter-template ( with Laravel-server)** This can be used as the starting point of a new project. It is integrated with **jwt-auth with Laravel-server APIs** for authentication. This is the ideal place to kickstart the project with all the necessary settings already done. It is based on CRA **4. starter-template-aws** This can be used as the starting point of a new project. It is integrated with **aws** for authentication. This is the ideal place to kickstart the project with all the necessary settings already done. It is based on CRA **5. starter-template-firebase** This can be used as the starting point of a new project. It is integrated with **firebase** for authentication. This is the ideal place to kickstart the project with all the necessary settings already done. It is based on CRA **6. starter-template-auth0** This can be used as the starting point of a new project. It is integrated with **auth0** for authentication. This is the ideal place to kickstart the project with all the necessary settings already done. It is based on CRA #### 7. cra-ssr-starter-template This can be used as the starting point of the new project with CRA + SSR. It is integrated with **firebase** for authentication. This is starter kit is purely based on [**cra-ssr**](https://medium.com/@cereallarceny/server-side-rendering-in-create-react-app-with-all-the-goodies-without-ejecting-4c889d7db25e). **8. nextjs** In this folder, you will get Next.js based template of the Crema. **9. nextjs-typescript** In this folder, you will get Next.js based template of the Crema with TypeScript. **10. source-ts** In this folder, you will get CRA based template of the Crema with TypeScript. **11. tailwind-css** In this folder, you will get CRA based template of the Crema with Tailwind Css. **12. styled-component** In this folder, you will get CRA based template of the Crema with Styled Component. **13. servers** In this directory, you will found the following backend servers, These sever has auth APIs * **Mongoose** * **Laravel** * **Python** **14. document** It is the pdf of the online documentation of the template. # Folder Structure The folder structure is simple and easy to understand. When you unzip the folder, you will find the following folders/files:-‌ 1\. **public**‌ This folder contains the public assets and JavaScript used for rendering of Application on the browser.‌ 2\. **src**‌ The src contains the code of all the pages in the Crema. This folder is the heart of this project. This is the folder where the magic happens. Basically, this is the folder in which the user do all the work. The src folder structure is as follows:-‌ * @crema * core It contains all the general and common components that are used throughout the template. * services It contains database and authentication service providers settings and other data and files related to fake APIs. * utility It contains files all the important files related to the template. * assets This folder contains all the images and other raw materials used in the template. * modules All the code related to dashboard, apps and other pages lies in this folder. We have kept the folder structure very simple and easy to understand by breaking the folders into sub-folders and following proper naming. For example, modules folder contain a folder named 'dashboard' which contains all the files related to dashboard, similarly, a folder named 'apps' contains all the code related to apps included in the template. * redux, As the name suggests, this folder contains the global state management related files. This folder is divided into three subfolders viz. actions, reducers, and store. * shared This folder contains the helping files. It contains language files, constants that are used in Redux and style related files. ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M64OWE8wbxs67rriqFK%2F-M64Ot4AHt7ZNFDNoqV-%2Fimage.png?alt=media\&token=add50181-9ebe-4a0e-8c54-43c227181da7) # Installation Installation for the CRA based app This module explains the process of Setting up the Crema in your system for use. The following chapters in this module will explain the steps to Set up the Crema. You need to follow the steps one by one in the written order. # Pre-Requisites To install Crema on the system, you need to develop a React Environment in the system. Following steps should be followed to develop React Environment:- 1\. **Node.js** Node.js is a JavaScript run time built needed to run a React App. You can install the recommended version of Node.js from the official website 2\. **Yarn** Yarn is a project manager responsible for adding and installing all the dependencies required for running the Crema on the system. You can install the latest version of Yarn from the official website # Installing Crema Once you have followed the installation pre-requisite steps, You can follow the following steps to install and run the Crema:- 1\. To run the Crema, Open the Crema folder in the editor of your choice. After following the folder, open the terminal and run the following command:- ``` yarn ``` this command will automatically install the required dependencies. 2\. Now, run the following command to run the project in the browser. ``` yarn start ``` This command will start the project in the browser in development mode i.e. the project will run on localhost://300X URL. 3\. To add the project to the live server, you need to make the Build of the project. Run the following command to make the Build of the project. ``` yarn build ``` After successful completion of build command, you will find following instructions on the terminal:- The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages: "homepage" : "", The build folder is to ready be deployed. You may serve it with a static server: ``` yarn global add serve serve -s build ``` Find out more about deployment here In case you want to deploy on another server please change accordingly. # Default Route To update the default route, go to the file `src/shared/constants/AppConst.js` and change the `initialUrl` value. ``` export const initialUrl = '/dashboards/analytics'; ``` # Customization Crema React Admin Template can be customized very easily. The template style, mode, layout, color combinations, direction can be customized easily either during run time or in development mode. We will talk about all of them individually in next chapters. # Template Style We have included two template Styles in the Crema Admin Template. First is Material-UI based Standard theme style and Second is Modern Style. By Default, you will get Standard style, however, switching between the two is very easy. You can change theme style during run-time or during development mode. **Changing Template Style in run time:-** Click on the Settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find Theme Style Option and from there, you can choose between Standard and Modern theme style. **Changing Template Style in development mode (setting default Style) :-** To set the default template style, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'themeStyle'. You need to set the value of 'themeStyle' according to your choice from the accepted values. You can find the accepted values of 'themeStyle' in the file with the path:- ``` src/shared/constants/AppEnums.js ``` After setting the value of 'themeStyle', you need to set the 'borderRadius' of all the muiComponents present in the 'overrides' property in the defaultConfig.js file. The value of borderRadius for 'Standard Style' should be fixed at '4' for all the components starting with the word 'Mui'. You don't need to set the value for 'Modern Style' as by default all the values are set according to 'Modern Style'. ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M6_b6IokmH-OSz0wkD3%2F-M6_bPz48DBkwVxR3CvQ%2Fimage.png?alt=media\&token=b8e5e656-ce4b-4ded-92c4-196017e740d9) # Template Mode Three template modes are available in the Crema i.e. Light, Semi-Dark and Dark. You can choose any one of the three according to your choice. Switching between the Modes is very easy. **Changing Template Mode in run time:-** Click on the Settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find Template Mode Option and from there, you can choose between Light, Semi-Dark and Dark Mode. **Changing Template Mode in development mode (setting default Mode) :-** To set the default Template Mode, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'themeMode'. You need to set the value of 'themeMode' according to your choice from the accepted values. You can find the accepted values of 'themeMode' in the file with the path:- ``` src/shared/constants/AppEnums.js ``` For Setting Dark mode, you need to follow one more step :- In the 'defaultConfig.js' file, there is a object type property named "pallete" which contains some template related properties. In the pallete object, there is a property named 'type', you need to set the value of type to 'ThemeMode.DARK'. After that, you need to set the background color and text color present in the 'pallete' property according to your choice. In case, you don't want to set the color, simply remove the 'background' and 'text' property, then the template will take the background and text color according to Material UI default colors. Look at the image for reference:- ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZlSIHjfI1k4-UyowL%2F-M3Zni69I4jk-x1lGlBd%2Fimage.png?alt=media\&token=fdc04d54-e034-4e09-a656-a2a18964cf35) # Template and Sidebar Color Users can customize the template color and sidebar color according to their choice and requirements. Thousands of color combinations can be made by using the color customizer option. We have provided some primary and secondary color combinations and also provided the customizer option to make your own. **Changing Template Color in run time:-** Click on the Settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find color option and from there, you can choose from PRESET color combinations or create your own by selecting the CUSTOM option. **Changing Template Color and Sidebar Color in development mode (setting default Template Color and Sidebar Color):-** To set the default **Template Color and Sidebar Color**, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find an object type property named 'theme' which has a 'palette' object and in that, you can define the primary, secondary and other colors. A screenshot is attached for the reference. ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZlSIHjfI1k4-UyowL%2F-M3Zoe8sRMS-Ukc-z678%2Fimage.png?alt=media\&token=7f86d30f-8a9d-4b23-9955-85a918abad13) # Tempate Direction The Crema template is fully RTL supported. On one toggle button, the user can switch between 'Right to left' direction or 'Left to Right' direction. **Changing Template Direction in run time:-** Click on the Settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find RTL support toggle button. By using that button, you can enable or disable RTL support. **Changing RTL support in development mode (setting default RTL type):-** To set the default RTL type, go to the defaultConfig.js file, it can be found at the path:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'direction' . You need to set the value of 'direction' according to your choice from the accepted values. You can find the accepted values of 'direction' in the file with the path:- ``` src/shared/constants/AppEnums.js ``` Since some languages are read from 'Right to Left', so whenever that language is chosen, the template direction changes to 'Right to Left'. This is managed by the property name "rtlLocale". This property can be found in the above file. It takes an array as the value and language codes for which RTL is to be enabled can be passed in it. ``` rtlLocale: ['ar'], ``` Currently, 'ar' which has been used for the Arabic language in the Crema has been passed in the array which means whenever the Arabic language is chosen, RTL will be enabled. Similarly, you can pass any other language locale code in the array to enable RTL on the selection of that language. # Navigation Style We have included eight navigation styles in the Crema. You can choose the Navigation style according to your choice and requirement by following under-written steps. **Changing Navigation Style in run time:-** Click on the settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find navigation styles option and from there, you can navigation style of your choice. **Changing Navigation Style in development mode (setting default Navigation Style):-** To set the default Navigation Style, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'navStyle' which accepts eighth values. You need to set the value of 'navStyle' according to your choice. Layouts and their accepted values(which you have to assign to 'navStyle') can be found in the file with path:- ``` src/shared/constants/AppEnums.js ``` Layouts and their schematic designs are as follows:- 1\. Default Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6D_jdSgjZg1WCsshS%2Fnav2.png?alt=media\&token=c6a852ab-386b-415d-97d3-ba01c092eae2) 2\. Standard Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6FLhRkKjeK-Bjjk5n%2Fnav4.png?alt=media\&token=0ab337e4-d6d2-498d-873a-73d6b0fc6c34) 3\. Mini Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6FQixu4ibrw0pJxp2%2Fnav3.png?alt=media\&token=e2abe0a5-a7ed-4846-a7af-7e3cdf9e8e44) 4\. Drawer Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6FV6DuwNAyQ27SFzd%2Fnav1.png?alt=media\&token=6ff666f2-9db2-4c00-a64a-9705b398b77d) 5\. Bit Bucket Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6Fb2UeGmkAgNvZmU8%2Fnav5.png?alt=media\&token=83314c16-94b7-44b5-bb36-22c0c5b63770) 6\. Horizontal Default Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6FgrwuyH49N1Y27FT%2Fnav6.png?alt=media\&token=396d66c1-3088-434f-b48f-2b79c00bd98a) 7\. Horizontal Light Navigation Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6FlAGwwSfhRGGouRG%2Fnav8.png?alt=media\&token=8d03470a-2a21-4dad-9aad-dcc237cacb03) 8\. Horizontal Dark Navigation Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6FoeyBcAQZoKGaooZ%2Fnav7.png?alt=media\&token=266f5458-1ec8-404c-b56b-5692b76beb5b) # Footer Whether the user want to keep the footer or not, this is totally up to the user's choice. We have provided the option of disabling or enabling the footer. You can enable or disable the footer by following the under-written steps. **Disabling or Enabling the Footer in Run Time:-** Click on the Settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find a Footer toggle button and by using that button, you can enable or disable Footer. **Enabling or Disabling in development mode (setting default Footer):-** To enable or disable the Footer, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'footer'. You need to set the value of Footer to true, if you want to enable the Footer or false if you want to disable the Footer. # Footer Type If the footer is enabled, then we have provided the option of setting the type of Footer. The user can set the type of footer during run-time and in development mode by following the under-written steps:- **Setting the Footer type in Run Time:-** Click on the settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find a footer type select dropdown and by using that dropdown, you can choose the footer type. **Setting the Footer Type in development mode (setting default Footer Type):-** To set the default footer type, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'footerType'. You need to set the value of 'footerType' according to your choice from the accepted values. You can find the accepted values of 'footerType' in the file with the path:- ``` src/shared/constants/AppEnums.js ``` # Route Transition User can change the route transition during run time or can set the default route transition type by following these steps:- **Changing Route Transition in run time:-** Click on the settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find a route transition select dropdown and by using that dropdown, you can choose the desired route transition. **Changing Route Transition in development mode (setting default Route Transition):-** To set the default route transition, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'rtAnim'. You need to set the value of 'rtAnim' according to your choice from the accepted values. You can find the accepted values of 'rtAnim' in the file with the path:- ``` src/shared/constants/AppEnums.js ``` # Multi-Lingual Support As of now, Crema template supports six languages. These are English, Spanish, French, Italian, Arabic and Chinese. Users can select or change any of the given languages by following simple steps in following chapters. # Changing Language **Changing Language in run time:-**‌ You will find a Language selector in the header, click on that and select the language of your choice. ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M64c7nVReRGN5stgGmA%2F-M64dIAWFxX5fcHBk6B3%2Fimage.png?alt=media\&token=5c18dd2c-4db3-4a46-b8b6-78a76b84908e) **Changing Language in development mode (setting default Language):-** To set the default language, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'locale' which is an object, you have to replace this object with any accepted value in order to set your language as the default language. You can get the list of accepted values by opening file having path:- ``` src/@crema/core/LanguageSwitcher/data.js ``` A screenshot of the data file is attached for the reference ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZsQ-u8r86BGICAiQK%2F-M3ZtNAjvZJbdl2_vEJA%2Fimage.png?alt=media\&token=6cbb26fe-7d34-4493-89f3-fea3b0309e8f) # Adding New Language In order to add new language to the template, follow the following steps:- 1\. Make a new .json file in the folder with the path :- ``` src/shared/localization/locales ``` 2\. Copy the content of the file 'en-US.json' kept adjacent to the file you made and paste it into your file. The path of file 'en-US.json' is:- ``` src/shared/localization/locales/en_US.json ``` 3\. In the next step, you need to translate the values of translation variables into the new language. ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZsQ-u8r86BGICAiQK%2F-M3ZtbeZJIPhivryBHvK%2Fimage.png?alt=media\&token=cdb8236b-d7d4-402b-85da-4a0fbeb45c38) 4\. Now make a new file in the folder with the path:- ``` src/shared/localization/entries ``` The name of the file should be same as the above-created file, just the extension will be different, this will be a .js file, earlier we created a .json file. Copy the following code, paste it into the newly made file and modify the content according to the changes suggested in the image given below the code. ``` import saMessages from '../locales/es_ES.json'; import {esES} from '@material-ui/core/locale'; const saLang = { messages: { ...saMessages, }, muiLocale: esES, locale: 'es', }; export default saLang; ``` ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-fINji7lY5crjW8EiM%2F-M-fLF9XnHEpiE5CppwC%2Fimage.png?alt=media\&token=45e5b9c5-9965-4e78-80bf-2e8f152dfbf5) 5\. Now go to the file with the following path:- ``` src/@crema/core/LanguageSwitcher/data.js ``` and add the new object corresponding to the new language, code should look something like this:- ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZsQ-u8r86BGICAiQK%2F-M3Ztu_l1sT-xgUdkPO6%2Fimage.png?alt=media\&token=d722d95a-9a3d-4465-bb70-6bc4a4464380) ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZsQ-u8r86BGICAiQK%2F-M3ZtzWVk-pW6TI-kKU1%2Fimage.png?alt=media\&token=56420a5b-6a26-4d79-8c1f-40577e131ba6) 6\. In the last step, open the file on the path:- ``` src/shared/localization/index.js ``` and add the language code defined in the above step and assign the value of the variable exported in step 4 to this code. Follow the following code for reference:- ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZsQ-u8r86BGICAiQK%2F-M3Zu6Dseu4biK2jrYyU%2Fimage.png?alt=media\&token=5678790e-d167-4e65-a7bc-168e24f649b2) # Sidebar Menu In Crema, the menu are of three types:- 1\. Group ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZuBpcRS_czzfOaQ6V%2F-M3ZuNjSFTA2sa9QzX7H%2Fimage.png?alt=media\&token=f2c68fde-fb5a-4d47-a282-d7a604ed4be9) 2\. Collapse type ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZuBpcRS_czzfOaQ6V%2F-M3ZuRoKYyl97a6TYLdg%2Fimage.png?alt=media\&token=5d454566-e813-4c0e-a78b-a53a1d1c67ed) 3\. Individual Any Navigation item that is not associated with any group of navigations and does not have its children navigations is considered to be Individual navigation. # Adding New Menu Adding a new menu in the Crema is a cup of cake. You don't have to add the menu separately for horizontal layouts and vertical layouts. You simply have to add a new menu to a single file and the menu will be added to all the layouts automatically. **Steps to add a new menu:-** 1\. Go to the file with the path : - ``` src/modules/routesConfig.js ``` 2\. Adding a group of menu's:- If you want to add a group of menu, Just add a new object in the above-said file with the following properties as shown in the below screenshot:- ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZuBpcRS_czzfOaQ6V%2F-M3ZvgOzy1La19f2lfNr%2Fimage.png?alt=media\&token=8be7fd50-c0e8-4da4-b880-228f3fbf05e5) The children's property of a group contains objects as shown below. ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZuBpcRS_czzfOaQ6V%2F-M3ZvmVA4ZWIE-VHoiIa%2Fimage.png?alt=media\&token=893cea41-54ef-4f44-94f0-6b259ed0a5cf) 3\. Adding Collapse type Menu:- To add a collapse type menu, go to the 'routesConfig' file (path given in step 1) and add a new object to the 'routesConfig' array. The new object show look like this:- ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZuBpcRS_czzfOaQ6V%2F-M3ZvrlhbMw00QWd5ir2%2Fimage.png?alt=media\&token=72238d58-b9d3-4f91-9e2a-620461fe6b32) 4\. Adding a menu item:- Adding a menu item is very easy, You just have to add an object in the 'routesConfig' array in the 'routesConfig' file (path given in step 1). The Item object should look contain the following properties as shown in the screenshot shown below. ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZuBpcRS_czzfOaQ6V%2F-M3Zw1qvlLEKVkLdUV4J%2Fimage.png?alt=media\&token=52de41b4-dc45-4d2d-9c95-0594af5c7341) In the nutshell, You just have to add an object in order to array a new menu. The object contains a property named 'type' which can have three values i.e. 'group', 'collapse' and 'item'. You just have to pass the correct value to this 'type' property as per the type of menu you want to add. All other properties in the object remain the same. # Route Protection Route protection means protecting any defined path from unauthorized access. For example, Signin or Signup pages are common paths/unrestricted paths and any user can access it. However there are many paths or pages that only loggedin users can access, those paths are called Protected Routes. In Crema, we have provided the functionality of route protection, you have to follow the following steps to protect the route:- Go to the file, where the routes have been declared. For example, let's go to the dashboard file where the dashboard related routes have been declared, the file can be found at:- ``` src/modules/dashboard/index.js ``` While declaring the route, you have to pass one extra property named "auth" in route object in order to make the route protected. ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3Zwk-g2iTio3GeLwqS%2F-M3Zy3LPamfgd3t2g-t5%2Fimage.png?alt=media\&token=1db73e27-c171-44d5-bfdf-318a22fe82b3) If this 'auth' property is added, this route will be protected and requires a loggedin user to access this path and if this property is not passed, then this path is directly accessible without any condition. # Loggedin User To get the data of logged in user wherever you need, simply write one line code i.e.
``` const user = useAuthUser(); ``` In the starter template, to get auth user, call useAuthUser hooks. it will return the current logged in user. ``` const [user, authType] = useAuthUser(); ``` In the source, there are multiple authenticate methods like AWS, firebase, Auth0, and JWT-auth. then **authType** is used to check which logout method will call for logged in user. You have to import useAuthUser from ``` src/@crema/utility/AppHooks.js ``` # Axios Setup In Crema, the Axios library has been used for API calls. You need to do the following settings for using it:-‌ Go to ApiConfig.js file, you can find this file at the path:- ``` src/@crema/services/ApiConfig.js ``` In this file, you will find the Axios setup, the content of the file looks like this:- ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3Zwk-g2iTio3GeLwqS%2F-M3ZyXJ0NxaNaDv-SBUP%2Fimage.png?alt=media\&token=1a799ae4-fa74-4d0a-934f-eb1748bf3840) Here, you can define your base path Url and add more headers if required. # Package.json Crema Package.json file ``` { "name": "crema", "version": "1.7.0", "private": true, "dependencies": { "@auth0/auth0-spa-js": "^1.12.1", "@brainhubeu/react-carousel": "^1.19.20", "@date-io/moment": "^1.3.13", "@emotion/core": "^10.0.35", "@emotion/styled": "^10.0.27", "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.56", "@material-ui/pickers": "^3.2.10", "@popperjs/core": "^2.5.2", "@storybook/theming": "^5.3.19", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.0.4", "@testing-library/user-event": "^12.1.6", "animate.css": "^4.1.1", "apexcharts": "^3.19.3", "array-move": "^3.0.1", "autoprefixer": "^10.0.0", "autosuggest-highlight": "^3.1.1", "aws-amplify": "^2.2.7", "axios": "^0.20.0", "axios-mock-adapter": "^1.18.2", "babel-plugin-transform-remove-console": "^6.9.4", "clsx": "^1.1.1", "connected-react-router": "^6.8.0", "d3-geo": "^2.0.1", "date-fns": "^2.16.1", "downshift": "^6.0.6", "draft-js": "^0.11.7", "firebase": "^7.21.1", "flag-icon-css": "^3.5.0", "formik": "^2.1.5", "jss": "^10.4.0", "jss-extend": "^6.2.0", "jss-rtl": "^0.3.0", "lodash": "^4.17.20", "match-sorter": "^4.2.1", "material-table": "^1.69.0", "material-ui-popup-state": "^1.6.1", "moment": "^2.29.0", "namor": "^2.0.2", "notistack": "^1.0.0", "npm-run-all": "^4.1.5", "postcss-import": "^12.0.1", "prism-react-renderer": "^1.1.1", "prop-types": "^15.7.2", "purgecss": "^1.4.2", "raw-loader": "^4.0.1", "rc-queue-anim": "^1.8.3", "react": "^16.13.1", "react-apexcharts": "^1.3.7", "react-autosuggest": "^10.0.2", "react-beautiful-dnd": "^13.0.0", "react-big-calendar": "^0.28.0", "react-bottom-scroll-listener": "^4.1.0", "react-chat-window": "^1.2.1", "react-circular-progressbar": "^2.0.3", "react-code-input": "^3.10.0", "react-color": "^2.18.1", "react-daypicker": "^3.0.10", "react-dnd": "^11.1.3", "react-dnd-html5-backend": "^11.1.3", "react-dom": "^16.13.1", "react-draft-wysiwyg": "^1.14.5", "react-draggable": "^4.4.3", "react-dropzone": "^11.2.0", "react-google-maps": "^9.4.5", "react-image-timeline": "^3.2.13", "react-images": "^1.1.7", "react-intl": "^5.8.2", "react-notifications-component": "^2.4.1", "react-number-format": "^4.4.1", "react-perfect-scrollbar": "^1.5.8", "react-photo-gallery": "^8.0.0", "react-player": "^2.6.2", "react-popper": "^2.2.3", "react-redux": "^7.2.1", "react-ripples": "^2.2.1", "react-router-config": "^5.1.1", "react-router-dom": "^5.2.0", "react-router-redux": "^4.0.8", "react-scripts": "^3.4.3", "react-select": "^3.1.0", "react-share": "^4.2.1", "react-simple-maps": "^2.1.2", "react-slick": "^0.27.11", "react-sortable-hoc": "^1.11.0", "react-spring": "^8.0.27", "react-svg-piechart": "^2.4.1", "react-swipeable-views": "^0.13.9", "react-table": "6.10.3", "react-text-mask": "^5.4.3", "react-toastify": "^6.0.8", "react-tooltip": "^4.2.7", "react-transition-group": "^4.4.1", "react-virtualized": "^9.22.2", "react-window": "^1.8.5", "recharts": "^1.8.5", "redux": "^4.0.5", "redux-thunk": "^2.3.0", "slick-carousel": "^1.8.1", "typescript": "^3.8.3", "use-url-search-params": "^2.3.13", "velocity-animate": "^1.5.2", "velocity-react": "^1.4.3", "yup": "^0.29.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "lint": "eslint \"src/**/*.+(js|jsx)\"", "lint:fix": "eslint --fix \"src/**/*.+(js|jsx)\"", "format": "prettier --write \"src/**/*.+(js|jsx)\"", "precommit": "lint-staged", "storybook": "start-storybook -p 9009 -s public", "build-storybook": "build-storybook -s public" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@storybook/addon-a11y": "^5.3.19", "@storybook/addon-actions": "^5.3.19", "@storybook/addon-knobs": "^5.3.19", "@storybook/addon-links": "^5.3.19", "@storybook/addons": "^5.3.19", "@storybook/preset-create-react-app": "^3.0.0", "@storybook/react": "^5.3.19", "@typescript-eslint/eslint-plugin": "^4.2.0", "@typescript-eslint/parser": "^4.2.0", "babel-eslint": "^10.1.0", "babel-plugin-transform-imports": "^2.0.0", "eslint": "^6.6.0", "eslint-config-prettier": "^6.12.0", "eslint-config-react-app": "^5.2.1", "eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-import": "^2.22.0", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-react": "^7.21.2", "eslint-plugin-react-hooks": "^4.1.2", "husky": "^4.2.3", "lint-staged": "^10.0.8", "prettier": "^2.1.2", "storybook-addon-material-ui": "^0.9.0-alpha.21" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.+(js|jsx)": [ "eslint --fix" ], "*.+(js|jsx|json|css|md)": [ "prettier --write" ] } } ``` # GitHub Access Crema GitHub Repo access Crema provides GitHub access to its users, so users can access the latest feature, make a pull request, bug fixes.\ \ Inside the GitHub repo, all branch's names are exactly the same as the folder name, which you have downloaded from ThemeForest.\ \ You can find more detailed information about the folder in the next [section ](/v1.0/product-overview)\ \ \ Users can access the GitHub repo here # Slack Community You can Join our Slack Community [here](https://cremaworld.slack.com/join/shared_invite/zt-g85fup6f-IMXXqsMx0BP08QBN3nxBWA#/) # FAQ ## How to fix "React has detected a change in the order of Hooks called by VerticalCollapse."? There are a few simple steps to fix this error. 1. Remove the following code from **src\\@crema\core\Navigation\VerticleNav\\\*.style.js** files and pass the **themeMode** from the relative file.\ \ const {themeMode} = useContext(AppContext);
2. You need to remove the **themeMode** from all the style files and pass it from the **src\\@crema\core\Navigation\VerticleNav\\\*..js** files ## How easy is it to extract the Mail App into my own project? There are few simple steps to move apps into a separate project. 1. Copy Mail folder into your project from apps 2. Add Mail app's route into your project and link it to your navigation(You can update base path 'apps/mail' to as your project need.) 3. Copy AppsContainer from the core components 4. Copy MailApp action and reducer file from the redux and link it to your app redux. 5. In case you want to use fake API and database, please copy DB file and mock API into your project(In case you want to integrate it with you API Please link your API to mail) 6. Please make sure you initialize APIs in your demo version. . ## How can I use found-relay instead of react-router-dom? To use any navigation libs instead of react-router-dom please follow the following steps. 1. Crema creates routes in src\modules\index.js file. In this file, you found createRoutes function. This function is responsible for routes creations. You can update this function according to your new routing lib. 2. Crema generate Routes with the help of renderRoutes function of **react-router-config** in the src\\@crema\core\ContentView\index.js file\ \ So you can write down your logic in both files. # About CRA+SSR Server-side rendering is a requirement for many modern web applications to appear correctly in search engines and social media parsers.\ \ **All Configurations are the same as the CRA section.** If you found us something is missing please raise a support request here \ \ **\*All remaining docs will be same as CRA** # Installation Installation for the CRA +SSR version Once you have followed the installation pre-requisite steps from [here](https://crema-react.gitbook.io/docs/installation/pre-requisites), You can follow the following steps to install and run the Crema:- 1\. To run the Crema, Open the Crema folder in the editor of your choice. After following the folder, open the terminal and run the following command:- ``` yarn ``` this command will automatically install the required dependencies. 2\. Now, To run locally the following command to run the project in the browser. ``` yarn start ``` This command will start the project in the browser in development mode i.e. the project will run on localhost://300X URL. 3\. To run under SSR mode, Run the following command to make the Build of the project. ``` yarn build && yarn serve ``` # Folder Structure The folder structure is simple and easy to understand. You will find the following folders/files in CRA-SSR:- 1\. **public**‌ This folder contains the public assets and JavaScript used for rendering of Applications on the browser.‌ 2\. **server** This folder contains the server related code, it's responsible for SSR.‌ Our server is comprised of three files: * `index.js` (which sets up Babel) * `server.js` (which starts the Express server) * `loader.js` (which is called on every page load to get the right data and render the right route) 2\. **src**‌ The src contains the code of all the pages in the Crema. This folder is the heart of this project. This is the folder where the magic happens. Basically, this is the folder in which the user do all the work. The src folder structure is as follows:-‌ * **@crema** * **core** It contains all the general and common components that are used throughout the template. * **services** It contains database and authentication service providers settings and other data and files related to fake APIs. * **utility** It contains files all the important files related to the template. * **assets** This folder contains all the images and other raw materials used in the template. * **routes** All the code related to all routes like dashboard, apps and other pages lies in this folder. We have kept the folder structure very simple and easy to understand by breaking the folders into sub-folders and following proper naming. For example, modules folder contain a folder named 'dashboard' which contains all the files related to dashboard, similarly, a folder named 'apps' contains all the code related to apps included in the template. * **redux**\ As the name suggests, this folder contains the global state management related files. This folder is divided into three subfolders viz. actions, reducers, and store. * **shared** This folder contains the helping files. It contains language files, constants that are used in Redux and style-related files. ![](broken://files/-M9A5TRKWNqmM3D0LCwl) # Route Protection We have normal routes and two other kinds of routes: `` and ``. These are pretty directly taken from [the infamous Serverless Stack tutorial](https://serverless-stack.com/chapters/create-a-route-that-redirects.html). # Deploy to server Crema is using the Heroku server to deploy. If you are also using the Heroku server to deploy your app, then you don't need to change anything.\ \ In case you are using different Servers to deploy then you need to follow the server-specific configuration. for example, if you are using the **AWS amplify hosting** then follow this article[ https://dev.to/dabit3/5-minute-tutorial-deploying-a-next-app-with-aws-amplify-hosting-5199 ]() # About Next.JS This section is purely based on the **Next.js**. In the next js version, you will get a full setup with Next.js with all Dashboards, Widgets, Metrics, and error pages. **All Configurations are the same as the CRA section.** If you found us something is missing please raise a support request here **\*All remaining docs will be same as CRA** # Installation Installation for the Next.js based template Once you have followed the installation pre-requisite steps from [here](https://crema-react.gitbook.io/docs/installation/pre-requisites), You can follow the following steps to install and run the Crema:- 1\. To run the Crema, Open the Crema folder in the editor of your choice. After following the folder, open the terminal and run the following command:- ``` yarn ``` this command will automatically install the required dependencies. 2\. Now, run the`next`command, which starts Next.js in development mode ``` yarn dev ``` This command will start the project in the browser in development mode i.e. the project will run on localhost://300X URL. 3\. To run`next build`which builds the application for production usage. ``` yarn build ``` 4\. To run `next start`which starts a Next.js production server ``` yarn start ``` # Folder Structure Folder Structure for the Next.js based template The folder structure is simple and easy to understand. When you unzip the folder, you will find the following folders/files:-‌ 1\. **@crema** * * **core** It contains all the general and common components that are used throughout the template. * **services** It contains database and authentication service providers settings and other data and files related to fake APIs. * **utility** It contains files all the important files related to the template. 2\. **modules** All the code related to dashboard, apps and other pages lies in this folder. We have kept the folder structure very simple and easy to understand by breaking the folders into sub-folders and following proper naming. For example, modules folder contain a folder named 'dashboard' which contains all the files related to dashboard, similarly, a folder named 'apps' contains all the code related to apps included in the template. 3\. **pages** Next.js supports pages with dynamic routes. Each page is associated with a route based on its file name. 4\. **public** Next.js can serve static files, like images, under a folder called `public` in the root directory. Files inside `public` can then be referenced by your code starting from the base URL (`/`) 5\. **redux**\ As the name suggests, this folder contains the global state management related files. This folder is divided into three subfolders viz. actions, reducers, and store. 6**. shared** This folder contains the helping files. It contains language files, constants that are used in Redux and style-related files.
![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-MAS7RMMIAnQXTHtUhix%2F-MAS9d-Q6p2A_kf2jQg3%2F1%20nextjs.png?alt=media\&token=bc147dd0-cf5c-47a1-ad38-9ccb99d0898d) # Deploy to server Crema is using the Heroku server to deploy. If you are also using the Heroku server to deploy your app, then you don't need to change anything.\ \ In case you are using different Servers to deploy then you need to follow the server-specific configuration. for example, if you are using the **AWS amplify hosting** then follow this article[ https://dev.to/dabit3/5-minute-tutorial-deploying-a-next-app-with-aws-amplify-hosting-5199 ]() # About Next.js + Typescript This section is purely based on the **Next.js** with **TypeScript**. In the next js version, you will get a full setup with Next.js with all Dashboards, Widgets, Metrics, and error pages. **All Configurations are the same as the CRA section.** If you found us something is missing please raise a support request here Demo URL: \ \ **\*All remaining docs will be same as CRA** # Installation Installation for the Next.js+Typescript based template Once you have followed the installation pre-requisite steps from [here](https://crema-react.gitbook.io/docs/installation/pre-requisites), You can follow the following steps to install and run the Crema:- 1\. To run the Crema, Open the Crema folder in the editor of your choice. After following the folder, open the terminal and run the following command:- ``` yarn ``` this command will automatically install the required dependencies. 2\. Now, run the`next`command, which starts Next.js in development mode ``` yarn dev ``` This command will start the project in the browser in development mode i.e. the project will run on localhost://300X URL. 3\. To run`next build`which builds the application for production usage. ``` yarn build ``` 4\. To run `next start`which starts a Next.js production server ``` yarn start ``` # Folder Structure The folder structure is simple and easy to understand. When you unzip the folder, you will find the following folders/files:-‌ **1**. **@crema** * * **core** It contains all the general and common components that are used throughout the template. * **services** It contains database and authentication service providers settings and other data and files related to fake APIs. * **utility** It contains files all the important files related to the template. **2**. **modules** All the code related to dashboard, apps and other pages lies in this folder. We have kept the folder structure very simple and easy to understand by breaking the folders into sub-folders and following proper naming. For example, modules folder contain a folder named 'dashboard' which contains all the files related to dashboard, similarly, a folder named 'apps' contains all the code related to apps included in the template. **3**. **pages** Next.js supports pages with dynamic routes. Each page is associated with a route based on its file name. **4**. **public** Next.js can serve static files, like images, under a folder called `public` in the root directory. Files inside `public` can then be referenced by your code starting from the base URL (`/`) **5**. **redux**\ As the name suggests, this folder contains the global state management related files. This folder is divided into three subfolders viz. actions, reducers, and store. **6. shared** This folder contains the helping files. It contains language files, constants that are used in Redux and style-related files. **7. types** This folder contains all the interfaces, types and data model of the Crema template ![](https://258187622-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-MBd57EJxoPnb8sIJ_S3%2F-MBd5aEQlUF5MyvBdUb1%2Fnext-typescript.png?alt=media\&token=04c4d292-9e02-468d-89fe-691d820da14c) # Deploy to server Crema is using the Heroku server to deploy. If you are also using the Heroku server to deploy your app, then you don't need to change anything.\ \ In case you are using different Servers to deploy then you need to follow the server-specific configuration. for example, if you are using the **AWS amplify hosting** then follow this article[ https://dev.to/dabit3/5-minute-tutorial-deploying-a-next-app-with-aws-amplify-hosting-5199 ]() # About CRA + TypeScript This section is purely based on the **CRA**. In the version, you will get a full setup with **TypeScript** with all Dashboards, Widgets, Metrics, and error pages. **All Configurations are the same as the CRA section.** If you found us something is missing please raise a support request here Demo URL: **\*All remaining docs will be same as CRA** # About Tailwind CSS Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build.\ \ In this package, you will get CRA+Tailwind CSS with all Dashboards, Widgets, Metrics, and error pages. Demo URL: \ **\*All remaining docs will be same as CRA** # About Styled Component Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress.\ \ In this package, you will get CRA+Styled Component with all Dashboards, Widgets, Metrics, and error pages. Demo URL: \ \ **\*All remaining docs will be same as CRA** # Python Here we have some demo APIs listed here - ## Register User `POST` `https://crema-python.herokuapp.com/api/users` This endpoint allows you to get free cakes. #### Request Body | Name | Type | Description | | -------- | ------ | ------------------------ | | name | string | Name of the user | | email | string | Email of the user | | password | string | Password for the account | {% tabs %} {% tab title="200 Cake successfully retrieved." %} ``` { "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2MDA1Nzc5MTIsIm5iZiI6MTYwMDU3NzkxMiwianRpIjoiNzg0OWQyOWMtZjlkNC00ZDRlLWEwMjAtMjkzMTcxNzE5MmVkIiwiZXhwIjoxNjAwNTc4ODEyLCJpZGVudGl0eSI6MSwiZnJlc2giOnRydWUsInR5cGUiOiJhY2Nlc3MifQ.Cx76YDyMWVVCb2gQPhQ4JejeQjY8_gbD2RTOZv4ZDHI", "refresh_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2MDA1Nzc5MTIsIm5iZiI6MTYwMDU3NzkxMiwianRpIjoiYWY4NTQ4NWMtZTUwZi00NWJkLWJkNTEtYzJjNTg3MDAzMGUwIiwiZXhwIjoxNjAzMTY5OTEyLCJpZGVudGl0eSI6MSwidHlwZSI6InJlZnJlc2gifQ.XXLZ7tAYuZDqfYvWZ9pX4EdNbQLfnlEclXWMaewOD3U" } ``` {% endtab %} {% tab title="400 Could not find a cake matching this query." %} ``` { "error": "A user with that email already exists." } ``` {% endtab %} {% endtabs %} ## Login User `POST` `https://crema-python.herokuapp.com/api/auth` #### Request Body | Name | Type | Description | | -------- | ------ | ----------------------- | | email | string | Email of the user | | password | string | Password of the account | {% tabs %} {% tab title="200 " %} ``` { "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2MDA1NzgwNDksIm5iZiI6MTYwMDU3ODA0OSwianRpIjoiYjIxNDNkMjUtOWI3Yi00Y2FlLThmN2YtY2YxZDQyNzVhMTUwIiwiZXhwIjoxNjAwNTc4OTQ5LCJpZGVudGl0eSI6MSwiZnJlc2giOnRydWUsInR5cGUiOiJhY2Nlc3MifQ.IWnfR_2UFSJtzWHqzTG5o7PnHd3H6cQc13bnwe8cPPU", "refresh_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2MDA1NzgwNDksIm5iZiI6MTYwMDU3ODA0OSwianRpIjoiOThmNzQzZDMtN2M2Mi00ODFjLThjOWItMjI3NTQyZDljNTg3IiwiZXhwIjoxNjAzMTcwMDQ5LCJpZGVudGl0eSI6MSwidHlwZSI6InJlZnJlc2gifQ.g8UV9xSxHzc3XxgIzY0CTm2_2RTjTY2bn484gFdsW0E" } ``` {% endtab %} {% tab title="400 " %} ``` { "error": "Invalid credentials!" } ``` {% endtab %} {% endtabs %} ## Auth User `GET` `https://crema-python.herokuapp.com/api/auth` #### Headers | Name | Type | Description | | ------------- | ------ | ------------ | | Authorization | string | Bearer token | {% tabs %} {% tab title="200 " %} ``` { "created_on": "2020-09-20T04:58:32", "id": 1, "email": "jose@gail.com", "email_verified_at": null, "updated_on": "2020-09-20T04:58:32", "name": "jose" } ``` {% endtab %} {% endtabs %} # Mongoose Here we have some demo APIs listed here - ## Register User `POST` `https://crema-mongoose.herokuapp.com/api/users` This endpoint allows you to get free cakes. #### Request Body | Name | Type | Description | | -------- | ------ | ------------------------ | | name | string | Name of the user | | email | string | Email of the user | | password | string | Password for the account | {% tabs %} {% tab title="200 Cake successfully retrieved." %} ``` { "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNWY0ZjE5ZWNjN2Y5ZGEwMDE3ZDg1YmFkIn0sImlhdCI6MTU5OTAxOTUwMSwiZXhwIjoxNTk5NDUxNTAxfQ.diJyrzPOY-FD7quqhbJ9D5sDdN8Oym40qqfgHoldpdg" } ``` {% endtab %} {% tab title="400 Could not find a cake matching this query." %} ``` { "error": "User already exists" } ``` {% endtab %} {% endtabs %} ## Login User `POST` `http://crema-mongo-api.herokuapp.com/api/auth` #### Request Body | Name | Type | Description | | -------- | ------ | ----------------------- | | email | string | Email of the user | | password | string | Password of the account | {% tabs %} {% tab title="200 " %} ``` { "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNWY0ZjE5ZWNjN2Y5ZGEwMDE3ZDg1YmFkIn0sImlhdCI6MTU5OTA3MDc3MCwiZXhwIjoxNTk5NTAyNzcwfQ.fK3L6ZmU8S7I-i21kJj_0sA212JOPgFaTWeSeAUaORQ" } ``` {% endtab %} {% tab title="400 " %} ``` { "error": "Invalid Credentials" } ``` {% endtab %} {% endtabs %} ## Auth User `GET` `http://crema-mongo-api.herokuapp.com/api/auth` #### Headers | Name | Type | Description | | ------------ | ------ | ----------- | | x-auth-token | string | | {% tabs %} {% tab title="200 " %} ``` { "_id": "5f4f19ecc7f9da0017d85bad", "name": "Demo User", "email": "demqo@example.com", "avatar": "https://gravatar.com/avatar/8f6b538c5a829890d9d72aba5fc4ed25?d=mm&r=pg&s=200", "date": "2020-09-02T04:05:00.903Z", "__v": 0 } ``` {% endtab %} {% endtabs %} # Laravel Here we have some demo APIs listed here - ## Register User `POST` `http://crema-laravel.herokuapp.com/api/users` This endpoint allows you to get free cakes. #### Request Body | Name | Type | Description | | -------- | ------ | ------------------------ | | name | string | Name of the user | | email | string | Email of the user | | password | string | Password for the account | {% tabs %} {% tab title="200 Cake successfully retrieved." %} ``` { "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNWY0ZjE5ZWNjN2Y5ZGEwMDE3ZDg1YmFkIn0sImlhdCI6MTU5OTAxOTUwMSwiZXhwIjoxNTk5NDUxNTAxfQ.diJyrzPOY-FD7quqhbJ9D5sDdN8Oym40qqfgHoldpdg" } ``` {% endtab %} {% tab title="400 Could not find a cake matching this query." %} ``` { "error": "User already exists" } ``` {% endtab %} {% endtabs %} ## Login User `POST` `http://crema-laravel.herokuapp.com/api/auth` #### Request Body | Name | Type | Description | | -------- | ------ | ----------------------- | | email | string | Email of the user | | password | string | Password of the account | {% tabs %} {% tab title="200 " %} ``` { "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNWY0ZjE5ZWNjN2Y5ZGEwMDE3ZDg1YmFkIn0sImlhdCI6MTU5OTA3MDc3MCwiZXhwIjoxNTk5NTAyNzcwfQ.fK3L6ZmU8S7I-i21kJj_0sA212JOPgFaTWeSeAUaORQ" } ``` {% endtab %} {% tab title="400 " %} ``` { "error": "Invalid Credentials" } ``` {% endtab %} {% endtabs %} ## Auth User `GET` `http://crema-laravel.herokuapp.com/api/auth` #### Headers | Name | Type | Description | | ------------- | ------ | ------------ | | Authorization | string | Bearer token | {% tabs %} {% tab title="200 " %} ``` { "id": 4, "name": "Demo User", "email": "demo@ample.com", "email_verified_at": null, "created_at": "2020-09-03T04:25:55.000000Z", "updated_at": "2020-09-03T04:25:55.000000Z" } ``` {% endtab %} {% endtabs %} # About Crema(CRA) Designed and developed with high expertise, Crema is fully-featured React-based Admin template that is configured with all the latest and trending libraries and technologies like Material-UI, Redux, React Hooks, etc. **with different-2 Powerful CSS framework and backend servers** Crema has six dashboards, lots of widgets and metrics, four fully functional apps (Todo, Mail, Contact, Chat, and Scrum board), and a lot of ready to use pages. **Key Features:-** * Three Modes - Light, Semi-Dark, and Dark. * A lot of Color combinations to beautify the Template. * Six Languages Supported. * Code Splitting and Reusability. * A separate version of TypeScript Crema is loaded with:- * React Hooks * TypeScript * React Redux * Material UI * Google Maps * Slick Carousel * React Calendar * Drag N Drop * ReCharts * React Player * React Colors * React Beautiful DND * Dropzone * React Timeline * React Table * Material UI Tables * React Notifications * React Player * Axios-mock-adaptor * Material Icons * ES-Lint & TS Lint * Prettier * Husky\ and a lot more
\ **You can check here the libs and it's version** ``` { "name": "crema", "version": "1.7.0", "private": true, "dependencies": { "@auth0/auth0-spa-js": "^1.12.1", "@brainhubeu/react-carousel": "^1.19.20", "@date-io/moment": "^1.3.13", "@emotion/core": "^10.0.35", "@emotion/styled": "^10.0.27", "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.56", "@material-ui/pickers": "^3.2.10", "@popperjs/core": "^2.5.2", "@storybook/theming": "^5.3.19", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.0.4", "@testing-library/user-event": "^12.1.6", "animate.css": "^4.1.1", "apexcharts": "^3.19.3", "array-move": "^3.0.1", "autoprefixer": "^10.0.0", "autosuggest-highlight": "^3.1.1", "aws-amplify": "^2.2.7", "axios": "^0.20.0", "axios-mock-adapter": "^1.18.2", "babel-plugin-transform-remove-console": "^6.9.4", "clsx": "^1.1.1", "connected-react-router": "^6.8.0", "d3-geo": "^2.0.1", "date-fns": "^2.16.1", "downshift": "^6.0.6", "draft-js": "^0.11.7", "firebase": "^7.21.1", "flag-icon-css": "^3.5.0", "formik": "^2.1.5", "jss": "^10.4.0", "jss-extend": "^6.2.0", "jss-rtl": "^0.3.0", "lodash": "^4.17.20", "match-sorter": "^4.2.1", "material-table": "^1.69.0", "material-ui-popup-state": "^1.6.1", "moment": "^2.29.0", "namor": "^2.0.2", "notistack": "^1.0.0", "npm-run-all": "^4.1.5", "postcss-import": "^12.0.1", "prism-react-renderer": "^1.1.1", "prop-types": "^15.7.2", "purgecss": "^1.4.2", "raw-loader": "^4.0.1", "rc-queue-anim": "^1.8.3", "react": "^16.13.1", "react-apexcharts": "^1.3.7", "react-autosuggest": "^10.0.2", "react-beautiful-dnd": "^13.0.0", "react-big-calendar": "^0.28.0", "react-bottom-scroll-listener": "^4.1.0", "react-chat-window": "^1.2.1", "react-circular-progressbar": "^2.0.3", "react-code-input": "^3.10.0", "react-color": "^2.18.1", "react-daypicker": "^3.0.10", "react-dnd": "^11.1.3", "react-dnd-html5-backend": "^11.1.3", "react-dom": "^16.13.1", "react-draft-wysiwyg": "^1.14.5", "react-draggable": "^4.4.3", "react-dropzone": "^11.2.0", "react-google-maps": "^9.4.5", "react-image-timeline": "^3.2.13", "react-images": "^1.1.7", "react-intl": "^5.8.2", "react-notifications-component": "^2.4.1", "react-number-format": "^4.4.1", "react-perfect-scrollbar": "^1.5.8", "react-photo-gallery": "^8.0.0", "react-player": "^2.6.2", "react-popper": "^2.2.3", "react-redux": "^7.2.1", "react-ripples": "^2.2.1", "react-router-config": "^5.1.1", "react-router-dom": "^5.2.0", "react-router-redux": "^4.0.8", "react-scripts": "^3.4.3", "react-select": "^3.1.0", "react-share": "^4.2.1", "react-simple-maps": "^2.1.2", "react-slick": "^0.27.11", "react-sortable-hoc": "^1.11.0", "react-spring": "^8.0.27", "react-svg-piechart": "^2.4.1", "react-swipeable-views": "^0.13.9", "react-table": "6.10.3", "react-text-mask": "^5.4.3", "react-toastify": "^6.0.8", "react-tooltip": "^4.2.7", "react-transition-group": "^4.4.1", "react-virtualized": "^9.22.2", "react-window": "^1.8.5", "recharts": "^1.8.5", "redux": "^4.0.5", "redux-thunk": "^2.3.0", "slick-carousel": "^1.8.1", "typescript": "^3.8.3", "use-url-search-params": "^2.3.13", "velocity-animate": "^1.5.2", "velocity-react": "^1.4.3", "yup": "^0.29.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "lint": "eslint \"src/**/*.+(js|jsx)\"", "lint:fix": "eslint --fix \"src/**/*.+(js|jsx)\"", "format": "prettier --write \"src/**/*.+(js|jsx)\"", "precommit": "lint-staged", "storybook": "start-storybook -p 9009 -s public", "build-storybook": "build-storybook -s public" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@storybook/addon-a11y": "^5.3.19", "@storybook/addon-actions": "^5.3.19", "@storybook/addon-knobs": "^5.3.19", "@storybook/addon-links": "^5.3.19", "@storybook/addons": "^5.3.19", "@storybook/preset-create-react-app": "^3.0.0", "@storybook/react": "^5.3.19", "@typescript-eslint/eslint-plugin": "^4.2.0", "@typescript-eslint/parser": "^4.2.0", "babel-eslint": "^10.1.0", "babel-plugin-transform-imports": "^2.0.0", "eslint": "^6.6.0", "eslint-config-prettier": "^6.12.0", "eslint-config-react-app": "^5.2.1", "eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-import": "^2.22.0", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-react": "^7.21.2", "eslint-plugin-react-hooks": "^4.1.2", "husky": "^4.2.3", "lint-staged": "^10.0.8", "prettier": "^2.1.2", "storybook-addon-material-ui": "^0.9.0-alpha.21" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.+(js|jsx)": [ "eslint --fix" ], "*.+(js|jsx|json|css|md)": [ "prettier --write" ] } } ``` # Product Overview Here we explained about crema's directory Upon downloading the zip folder from the ThemeForest, you will get the following content:-\ \ All folders have a **readme.md** file. this file contains all information about how to start that particular project **1. source** It contains the source code of the template. This is purely bases on CRA based template. **2. crema-ant** It contains the source code of the template based on the Ant Design . This is purely bases on **CRA**+**craco-less** template. **(Document is coming soon...)** **3. source-ts** In this folder, you will get CRA based template of the Crema with TypeScript. **4. build** It contains the offline demo of Crama. You can check this by using the following commands ``` yarn global add serve serve -s build ``` **5. starter-template** This can be used as the starting point of a new project. This is the ideal place to kickstart the project with all the necessary settings already done. It is based on CRA **6. starter-template-ts** This can be used as the starting point of a new project. This is the ideal place to kickstart the project with all the necessary settings already done. It is based on CRA with typescript **7. Nextjs** In this folder, you will get Next.js based template of the Crema. **8. starter-template-nextjs** In this folder, you will get Next.js based starter-template of the Crema. **9. starter-template-context-api** In this folder, you will get CRA based starter template of the Crema with the context API(without redux)**.** **10.starter-template-context-api-ts** In this folder, you will get CRA based starter template of the Crema with TypeScript and Context API(without redux). **11.starter-template-context-apits-auth0** In this folder, you will get CRA based starter template of the Crema with TypeScript+Auth-0 and Context API(without redux). **12. nextjs-ts** In this folder, you will get a Typescript-based Next.js template of the Crema. **13. servers** In this directory, you will found the following backend servers, These sever has auth APIs * **Mongoose** * **Laravel** * **Python** **14. Readme** It is the pdf of the online documentation of the template. # Folder Structure The folder structure is simple and easy to understand. When you unzip the folder, you will find the following folders/files:-‌ 1\. **public**‌ This folder contains the public assets and JavaScript used for rendering of Application on the browser. * assets This folder contains all the images and other raw materials used in the template. 2\. **src**‌ The src contains the code of all the pages in the Crema. This folder is the heart of this project. This is the folder where the magic happens. Basically, this is the folder in which the user do all the work. The src folder structure is as follows:-‌ * @crema * core It contains all the general and common components that are used throughout the template. * services It contains database and authentication service providers settings and other data and files related to fake APIs. * utility It contains files all the important files related to the template. * modules All the code related to dashboard, apps and other pages lies in this folder. We have kept the folder structure very simple and easy to understand by breaking the folders into sub-folders and following proper naming. For example, modules folder contain a folder named 'dashboard' which contains all the files related to dashboard, similarly, a folder named 'apps' contains all the code related to apps included in the template. * redux, As the name suggests, this folder contains the global state management related files. This folder is divided into three subfolders viz. actions, reducers, and store. * shared This folder contains the helping files. It contains language files, constants that are used in Redux and style related files. ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-MKj8GwjTaBdj-8Z1dZ4%2F-MKj8q_-QCdFnbRxdD7l%2Ffolder-structure.png?alt=media\&token=302533c4-db3c-47d3-8956-01119e7750fc) # Installation Installation for the CRA based app This module explains the process of Setting up the Crema in your system for use. The following chapters in this module will explain the steps to Set up the Crema. You need to follow the steps one by one in the written order. # Pre-Requisites To install Crema on the system, you need to develop a React Environment in the system. Following steps should be followed to develop React Environment:- 1\. **Node.js** Node.js is a JavaScript run time built needed to run a React App. You can install the recommended version of Node.js from the official website 2\. **Yarn** Yarn is a project manager responsible for adding and installing all the dependencies required for running the Crema on the system. You can install the latest version of Yarn from the official website # Installing Crema Once you have followed the installation pre-requisite steps, You can follow the following steps to install and run the Crema:- 1\. To run the Crema, Open the Crema folder in the editor of your choice. After following the folder, open the terminal and run the following command:- ``` yarn ``` this command will automatically install the required dependencies. 2\. Now, run the following command to run the project in the browser. ``` yarn start ``` This command will start the project in the browser in development mode i.e. the project will run on localhost://300X URL. 3\. To add the project to the live server, you need to make the Build of the project. Run the following command to make the Build of the project. ``` yarn build ``` After successful completion of build command, you will find following instructions on the terminal:- The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages: "homepage" : "", The build folder is to ready be deployed. You may serve it with a static server: ``` yarn global add serve serve -s build ``` Find out more about deployment here In case you want to deploy on another server please change accordingly. # Default Route To update the default route, go to the file `src/shared/constants/AppConst.js` and change the `initialUrl` value. ``` export const initialUrl = '/dashboards/analytics'; ``` # Customization Crema React Admin Template can be customized very easily. The template style, mode, layout, color combinations, direction can be customized easily either during run time or in development mode. We will talk about all of them individually in next chapters. # Template Style We have included two template Styles in the Crema Admin Template. First is Material-UI based Standard theme style and Second is Modern Style. By Default, you will get Standard style, however, switching between the two is very easy. You can change theme style during run-time or during development mode. **Changing Template Style in run time:-** Click on the Settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find Theme Style Option and from there, you can choose between Standard and Modern theme style. **Changing Template Style in development mode (setting default Style) :-** To set the default template style, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'themeStyle'. You need to set the value of 'themeStyle' according to your choice from the accepted values. You can find the accepted values of 'themeStyle' in the file with the path:- ``` src/shared/constants/AppEnums.js ``` After setting the value of 'themeStyle', you need to set the 'borderRadius' of all the muiComponents present in the 'overrides' property in the defaultConfig.js file. The value of borderRadius for 'Standard Style' should be fixed at '4' for all the components starting with the word 'Mui'. You don't need to set the value for 'Modern Style' as by default all the values are set according to 'Modern Style'. ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M6_b6IokmH-OSz0wkD3%2F-M6_bPz48DBkwVxR3CvQ%2Fimage.png?alt=media\&token=b8e5e656-ce4b-4ded-92c4-196017e740d9) # Template Mode Three template modes are available in the Crema i.e. Light, Semi-Dark and Dark. You can choose any one of the three according to your choice. Switching between the Modes is very easy. **Changing Template Mode in run time:-** Click on the Settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find Template Mode Option and from there, you can choose between Light, Semi-Dark and Dark Mode. **Changing Template Mode in development mode (setting default Mode) :-** To set the default Template Mode, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'themeMode'. You need to set the value of 'themeMode' according to your choice from the accepted values. You can find the accepted values of 'themeMode' in the file with the path:- ``` src/shared/constants/AppEnums.js ``` For Setting Dark mode, you need to follow one more step :- In the 'defaultConfig.js' file, there is a object type property named "pallete" which contains some template related properties. In the pallete object, there is a property named 'type', you need to set the value of type to 'ThemeMode.DARK'. After that, you need to set the background color and text color present in the 'pallete' property according to your choice. In case, you don't want to set the color, simply remove the 'background' and 'text' property, then the template will take the background and text color according to Material UI default colors. Look at the image for reference:- ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZlSIHjfI1k4-UyowL%2F-M3Zni69I4jk-x1lGlBd%2Fimage.png?alt=media\&token=fdc04d54-e034-4e09-a656-a2a18964cf35) # Template and Sidebar Color Users can customize the template color and sidebar color according to their choice and requirements. Thousands of color combinations can be made by using the color customizer option. We have provided some primary and secondary color combinations and also provided the customizer option to make your own. **Changing Template Color in run time:-** Click on the Settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find color option and from there, you can choose from PRESET color combinations or create your own by selecting the CUSTOM option. **Changing Template Color and Sidebar Color in development mode (setting default Template Color and Sidebar Color):-** To set the default **Template Color and Sidebar Color**, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find an object type property named 'theme' which has a 'palette' object and in that, you can define the primary, secondary and other colors. A screenshot is attached for the reference. ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZlSIHjfI1k4-UyowL%2F-M3Zoe8sRMS-Ukc-z678%2Fimage.png?alt=media\&token=7f86d30f-8a9d-4b23-9955-85a918abad13) # Tempate Direction The Crema template is fully RTL supported. On one toggle button, the user can switch between 'Right to left' direction or 'Left to Right' direction. **Changing Template Direction in run time:-** Click on the Settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find RTL support toggle button. By using that button, you can enable or disable RTL support. **Changing RTL support in development mode (setting default RTL type):-** To set the default RTL type, go to the defaultConfig.js file, it can be found at the path:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'direction' . You need to set the value of 'direction' according to your choice from the accepted values. You can find the accepted values of 'direction' in the file with the path:- ``` src/shared/constants/AppEnums.js ``` Since some languages are read from 'Right to Left', so whenever that language is chosen, the template direction changes to 'Right to Left'. This is managed by the property name "rtlLocale". This property can be found in the above file. It takes an array as the value and language codes for which RTL is to be enabled can be passed in it. ``` rtlLocale: ['ar'], ``` Currently, 'ar' which has been used for the Arabic language in the Crema has been passed in the array which means whenever the Arabic language is chosen, RTL will be enabled. Similarly, you can pass any other language locale code in the array to enable RTL on the selection of that language. # Navigation Style We have included eight navigation styles in the Crema. You can choose the Navigation style according to your choice and requirement by following under-written steps. **Changing Navigation Style in run time:-** Click on the settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find navigation styles option and from there, you can navigation style of your choice. **Changing Navigation Style in development mode (setting default Navigation Style):-** To set the default Navigation Style, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'navStyle' which accepts eighth values. You need to set the value of 'navStyle' according to your choice. Layouts and their accepted values(which you have to assign to 'navStyle') can be found in the file with path:- ``` src/shared/constants/AppEnums.js ``` Layouts and their schematic designs are as follows:- 1\. Default Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6D_jdSgjZg1WCsshS%2Fnav2.png?alt=media\&token=c6a852ab-386b-415d-97d3-ba01c092eae2) 2\. Standard Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6FLhRkKjeK-Bjjk5n%2Fnav4.png?alt=media\&token=0ab337e4-d6d2-498d-873a-73d6b0fc6c34) 3\. Mini Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6FQixu4ibrw0pJxp2%2Fnav3.png?alt=media\&token=e2abe0a5-a7ed-4846-a7af-7e3cdf9e8e44) 4\. Drawer Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6FV6DuwNAyQ27SFzd%2Fnav1.png?alt=media\&token=6ff666f2-9db2-4c00-a64a-9705b398b77d) 5\. Bit Bucket Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6Fb2UeGmkAgNvZmU8%2Fnav5.png?alt=media\&token=83314c16-94b7-44b5-bb36-22c0c5b63770) 6\. Horizontal Default Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6FgrwuyH49N1Y27FT%2Fnav6.png?alt=media\&token=396d66c1-3088-434f-b48f-2b79c00bd98a) 7\. Horizontal Light Navigation Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6FlAGwwSfhRGGouRG%2Fnav8.png?alt=media\&token=8d03470a-2a21-4dad-9aad-dcc237cacb03) 8\. Horizontal Dark Navigation Layout ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-6AHl0ZG2GZIDCISRE%2F-M-6FoeyBcAQZoKGaooZ%2Fnav7.png?alt=media\&token=266f5458-1ec8-404c-b56b-5692b76beb5b) # Footer Whether the user want to keep the footer or not, this is totally up to the user's choice. We have provided the option of disabling or enabling the footer. You can enable or disable the footer by following the under-written steps. **Disabling or Enabling the Footer in Run Time:-** Click on the Settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find a Footer toggle button and by using that button, you can enable or disable Footer. **Enabling or Disabling in development mode (setting default Footer):-** To enable or disable the Footer, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'footer'. You need to set the value of Footer to true, if you want to enable the Footer or false if you want to disable the Footer. # Footer Type If the footer is enabled, then we have provided the option of setting the type of Footer. The user can set the type of footer during run-time and in development mode by following the under-written steps:- **Setting the Footer type in Run Time:-** Click on the settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find a footer type select dropdown and by using that dropdown, you can choose the footer type. **Setting the Footer Type in development mode (setting default Footer Type):-** To set the default footer type, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'footerType'. You need to set the value of 'footerType' according to your choice from the accepted values. You can find the accepted values of 'footerType' in the file with the path:- ``` src/shared/constants/AppEnums.js ``` # Route Transition User can change the route transition during run time or can set the default route transition type by following these steps:- **Changing Route Transition in run time:-** Click on the settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find a route transition select dropdown and by using that dropdown, you can choose the desired route transition. **Changing Route Transition in development mode (setting default Route Transition):-** To set the default route transition, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'rtAnim'. You need to set the value of 'rtAnim' according to your choice from the accepted values. You can find the accepted values of 'rtAnim' in the file with the path:- ``` src/shared/constants/AppEnums.js ``` # Multi-Lingual Support As of now, Crema template supports six languages. These are English, Spanish, French, Italian, Arabic and Chinese. Users can select or change any of the given languages by following simple steps in following chapters. # Changing Language **Changing Language in run time:-**‌ You will find a Language selector in the header, click on that and select the language of your choice. ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M64c7nVReRGN5stgGmA%2F-M64dIAWFxX5fcHBk6B3%2Fimage.png?alt=media\&token=5c18dd2c-4db3-4a46-b8b6-78a76b84908e) **Changing Language in development mode (setting default Language):-** To set the default language, go to the following file:- ``` src/@crema/utility/ContextProvider/defaultConfig.js ``` In this file, you will find a property named 'locale' which is an object, you have to replace this object with any accepted value in order to set your language as the default language. You can get the list of accepted values by opening file having path:- ``` src/@crema/core/LanguageSwitcher/data.js ``` A screenshot of the data file is attached for the reference ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZsQ-u8r86BGICAiQK%2F-M3ZtNAjvZJbdl2_vEJA%2Fimage.png?alt=media\&token=6cbb26fe-7d34-4493-89f3-fea3b0309e8f) # Adding New Language In order to add new language to the template, follow the following steps:- 1\. Make a new .json file in the folder with the path :- ``` src/shared/localization/locales ``` 2\. Copy the content of the file 'en-US.json' kept adjacent to the file you made and paste it into your file. The path of file 'en-US.json' is:- ``` src/shared/localization/locales/en_US.json ``` 3\. In the next step, you need to translate the values of translation variables into the new language. ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZsQ-u8r86BGICAiQK%2F-M3ZtbeZJIPhivryBHvK%2Fimage.png?alt=media\&token=cdb8236b-d7d4-402b-85da-4a0fbeb45c38) 4\. Now make a new file in the folder with the path:- ``` src/shared/localization/entries ``` The name of the file should be same as the above-created file, just the extension will be different, this will be a .js file, earlier we created a .json file. Copy the following code, paste it into the newly made file and modify the content according to the changes suggested in the image given below the code. ``` import saMessages from '../locales/es_ES.json'; import {esES} from '@material-ui/core/locale'; const saLang = { messages: { ...saMessages, }, muiLocale: esES, locale: 'es', }; export default saLang; ``` ![](https://gblobscdn.gitbook.com/assets%2F-LzcESYFYdNFkCg00g4w%2F-M-fINji7lY5crjW8EiM%2F-M-fLF9XnHEpiE5CppwC%2Fimage.png?alt=media\&token=45e5b9c5-9965-4e78-80bf-2e8f152dfbf5) 5\. Now go to the file with the following path:- ``` src/@crema/core/LanguageSwitcher/data.js ``` and add the new object corresponding to the new language, code should look something like this:- ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZsQ-u8r86BGICAiQK%2F-M3Ztu_l1sT-xgUdkPO6%2Fimage.png?alt=media\&token=d722d95a-9a3d-4465-bb70-6bc4a4464380) ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZsQ-u8r86BGICAiQK%2F-M3ZtzWVk-pW6TI-kKU1%2Fimage.png?alt=media\&token=56420a5b-6a26-4d79-8c1f-40577e131ba6) 6\. In the last step, open the file on the path:- ``` src/shared/localization/index.js ``` and add the language code defined in the above step and assign the value of the variable exported in step 4 to this code. Follow the following code for reference:- ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZsQ-u8r86BGICAiQK%2F-M3Zu6Dseu4biK2jrYyU%2Fimage.png?alt=media\&token=5678790e-d167-4e65-a7bc-168e24f649b2) # Sidebar Menu In Crema, the menu are of three types:- 1\. Group ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZuBpcRS_czzfOaQ6V%2F-M3ZuNjSFTA2sa9QzX7H%2Fimage.png?alt=media\&token=f2c68fde-fb5a-4d47-a282-d7a604ed4be9) 2\. Collapse type ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZuBpcRS_czzfOaQ6V%2F-M3ZuRoKYyl97a6TYLdg%2Fimage.png?alt=media\&token=5d454566-e813-4c0e-a78b-a53a1d1c67ed) 3\. Individual Any Navigation item that is not associated with any group of navigations and does not have its children navigations is considered to be Individual navigation. # Adding New Menu Adding a new menu in the Crema is a cup of cake. You don't have to add the menu separately for horizontal layouts and vertical layouts. You simply have to add a new menu to a single file and the menu will be added to all the layouts automatically. **Steps to add a new menu:-** 1\. Go to the file with the path : - ``` src/modules/routesConfig.js ``` 2\. Adding a group of menu's:- If you want to add a group of menu, Just add a new object in the above-said file with the following properties as shown in the below screenshot:- ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZuBpcRS_czzfOaQ6V%2F-M3ZvgOzy1La19f2lfNr%2Fimage.png?alt=media\&token=8be7fd50-c0e8-4da4-b880-228f3fbf05e5) The children's property of a group contains objects as shown below. ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZuBpcRS_czzfOaQ6V%2F-M3ZvmVA4ZWIE-VHoiIa%2Fimage.png?alt=media\&token=893cea41-54ef-4f44-94f0-6b259ed0a5cf) 3\. Adding Collapse type Menu:- To add a collapse type menu, go to the 'routesConfig' file (path given in step 1) and add a new object to the 'routesConfig' array. The new object show look like this:- ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZuBpcRS_czzfOaQ6V%2F-M3ZvrlhbMw00QWd5ir2%2Fimage.png?alt=media\&token=72238d58-b9d3-4f91-9e2a-620461fe6b32) 4\. Adding a menu item:- Adding a menu item is very easy, You just have to add an object in the 'routesConfig' array in the 'routesConfig' file (path given in step 1). The Item object should look contain the following properties as shown in the screenshot shown below. ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3ZuBpcRS_czzfOaQ6V%2F-M3Zw1qvlLEKVkLdUV4J%2Fimage.png?alt=media\&token=52de41b4-dc45-4d2d-9c95-0594af5c7341) In the nutshell, You just have to add an object in order to array a new menu. The object contains a property named 'type' which can have three values i.e. 'group', 'collapse' and 'item'. You just have to pass the correct value to this 'type' property as per the type of menu you want to add. All other properties in the object remain the same. # Route Protection Route protection with CRA Route protection means protecting any defined path from unauthorized access. For example, Signin or Signup pages are common paths/unrestricted paths and any user can access it. However there are many paths or pages that only logged in users can access, those paths are called Protected Routes. In Crema, we have provided the functionality of route protection, you have to follow the following steps to protect the route:-\ \ **Step 1.** To hide/show the menu based on the **user role**, We need to protect the navigation menu as well as routes. To protect the navigation menu go to the **src/modules/routesConfig.js** file, In this file, we declared all the navigation(route) menu. We want to bind the menu with the auth role of the user. then we assign the role to the route menu. While defining the route menu, you have to pass one extra property named "**auth**" in the menu object in order to make the menu protected like below. ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-MKjJlS2CXZtREHAqP1V%2F-MKjLRsU4FXL6Dm4X3Hm%2Froute%20auth.png?alt=media\&token=c7e7f979-9e9e-41b7-a0c4-2dafebfb65ad) **Step 2.** We need to protect the route from unwanted access. To protect the route from unwanted access, we need to add the '**auth**' property, this route will be protected and need particular role access to access it and if this property is not passed, then this path is directly accessible without any condition. ``` src/modules/dashboard/index.js ``` While declaring the route, you have to pass one extra property named "auth" in the route object in order to make the route protected. ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-MKjN1JUW9LAGbPNElTd%2F-MKjPkkU5P_kXEXThl7d%2Froute%20role.png?alt=media\&token=a5845afc-d45f-4574-9d70-f25430bb5608) If this '**auth**' property is added, this route will be protected and requires a logged-in user to access this path and fulfill the required **role** and if this property is not passed, then this path is directly accessible without any condition. # Loggedin User To get the data of logged in user wherever you need, simply write one line code i.e.
``` const user = useAuthUser(); ``` You have to import useAuthUser from **src/@crema/utility/AppHooks.js** # Axios Setup In Crema, the Axios library has been used for API calls. You need to do the following settings for using it:-‌ Go to ApiConfig.js file, you can find this file at the path:- ``` src/@crema/services/ApiConfig.js ``` In this file, you will find the Axios setup, the content of the file looks like this:- ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-M3Zwk-g2iTio3GeLwqS%2F-M3ZyXJ0NxaNaDv-SBUP%2Fimage.png?alt=media\&token=1a799ae4-fa74-4d0a-934f-eb1748bf3840) Here, you can define your base path Url and add more headers if required. # Package.json Crema Package.json file ``` { "name": "crema", "version": "2.0.0", "private": true, "dependencies": { "@auth0/auth0-spa-js": "^1.13.0", "@brainhubeu/react-carousel": "^1.19.20", "@date-io/moment": "^1.3.13", "@emotion/core": "^10.0.35", "@emotion/styled": "^10.0.27", "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.56", "@material-ui/pickers": "^3.2.10", "@popperjs/core": "^2.5.3", "@storybook/theming": "^5.3.19", "@testing-library/jest-dom": "^5.11.5", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "animate.css": "^4.1.1", "apexcharts": "^3.19.3", "array-move": "^3.0.1", "autoprefixer": "^10.0.1", "autosuggest-highlight": "^3.1.1", "aws-amplify": "^2.2.7", "axios": "^0.21.0", "axios-mock-adapter": "^1.19.0", "babel-plugin-transform-remove-console": "^6.9.4", "clsx": "^1.1.1", "connected-react-router": "^6.8.0", "d3-geo": "^2.0.1", "date-fns": "^2.16.1", "downshift": "^6.0.6", "draft-js": "^0.11.7", "firebase": "^8.0.0", "flag-icon-css": "^3.5.0", "formik": "^2.2.1", "jss": "^10.4.0", "jss-extend": "^6.2.0", "jss-rtl": "^0.3.0", "lodash": "^4.17.20", "match-sorter": "^4.2.1", "material-table": "^1.69.1", "material-ui-popup-state": "^1.7.0", "moment": "^2.29.1", "namor": "^2.0.2", "notistack": "^1.0.1", "npm-run-all": "^4.1.5", "postcss-import": "^12.0.1", "prism-react-renderer": "^1.1.1", "prop-types": "^15.7.2", "purgecss": "^1.4.2", "qs": "^6.9.4", "raw-loader": "^4.0.2", "rc-queue-anim": "^1.8.3", "react": "16.14.0", "react-apexcharts": "^1.3.7", "react-autosuggest": "^10.0.3", "react-beautiful-dnd": "^13.0.0", "react-big-calendar": "^0.28.1", "react-bottom-scroll-listener": "^4.1.0", "react-chat-window": "^1.2.1", "react-circular-progressbar": "^2.0.3", "react-code-input": "^3.10.0", "react-color": "^2.18.1", "react-content-loader": "^5.1.3", "react-daypicker": "^3.0.10", "react-dnd": "^11.1.3", "react-dnd-html5-backend": "^11.1.3", "react-dom": "^16.14.0", "react-draft-wysiwyg": "^1.14.5", "react-draggable": "^4.4.3", "react-dropzone": "^11.2.1", "react-google-maps": "^9.4.5", "react-image-timeline": "^3.2.13", "react-images": "^1.1.7", "react-intl": "^5.8.8", "react-notifications-component": "^2.4.1", "react-number-format": "^4.4.1", "react-perfect-scrollbar": "^1.5.8", "react-photo-gallery": "^8.0.0", "react-player": "^2.6.2", "react-popper": "^2.2.3", "react-redux": "^7.2.2", "react-ripples": "^2.2.1", "react-router-config": "^5.1.1", "react-router-dom": "^5.2.0", "react-router-redux": "^4.0.8", "react-scripts": "^3.4.4", "react-select": "^3.1.0", "react-share": "^4.2.1", "react-simple-maps": "^2.1.2", "react-slick": "^0.27.12", "react-sortable-hoc": "^1.11.0", "react-spring": "^8.0.27", "react-svg-piechart": "^2.4.1", "react-swipeable-views": "^0.13.9", "react-table": "6.10.3", "react-text-mask": "^5.4.3", "react-toastify": "^6.0.9", "react-tooltip": "^4.2.7", "react-transition-group": "^4.4.1", "react-virtualized": "^9.22.2", "react-window": "^1.8.5", "recharts": "^1.8.5", "redux": "^4.0.5", "redux-thunk": "^2.3.0", "slick-carousel": "^1.8.1", "typescript": "^3.8.3", "use-url-search-params": "^2.3.13", "velocity-animate": "^1.5.2", "velocity-react": "^1.4.3", "yup": "^0.29.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "lint": "eslint \"src/**/*.+(js|jsx)\"", "lint:fix": "eslint --fix \"src/**/*.+(js|jsx)\"", "format": "prettier --write \"src/**/*.+(js|jsx)\"", "precommit": "lint-staged", "storybook": "start-storybook -p 9009 -s public", "build-storybook": "build-storybook -s public" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@storybook/addon-a11y": "^5.3.19", "@storybook/addon-actions": "^5.3.19", "@storybook/addon-knobs": "^5.3.19", "@storybook/addon-links": "^5.3.19", "@storybook/addons": "^5.3.19", "@storybook/preset-create-react-app": "^3.0.0", "@storybook/react": "^5.3.19", "@typescript-eslint/eslint-plugin": "^4.2.0", "@typescript-eslint/parser": "^4.2.0", "babel-eslint": "^10.1.0", "babel-plugin-transform-imports": "^2.0.0", "eslint": "^6.6.0", "eslint-config-prettier": "^6.12.0", "eslint-config-react-app": "^5.2.1", "eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-import": "^2.22.0", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-react": "^7.21.2", "eslint-plugin-react-hooks": "^4.1.2", "husky": "^4.2.3", "lint-staged": "^10.5.0", "prettier": "^2.1.2", "storybook-addon-material-ui": "^0.9.0-alpha.21" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.+(js|jsx)": [ "eslint --fix" ], "*.+(js|jsx|json|css|md)": [ "prettier --write" ] } } ``` # GitHub Access Crema GitHub Repo access Crema provides GitHub access to its users, so users can access the latest feature, make a pull request, bug fixes.\ \ Inside the GitHub repo, all branch's names are exactly the same as the folder name, which you have downloaded from ThemeForest.\ \ You can find more detailed information about the folder in the next [section ](/v2.0/product-overview)\ \ \ Users can access the GitHub repo here[ ](https://git-access.cremawork.com/) # Slack Community You can Join our Slack Community [here](https://cremaworld.slack.com/join/shared_invite/zt-g85fup6f-IMXXqsMx0BP08QBN3nxBWA#/) # FAQ ## How I can add firebase authentication methods in another variant(Nextjs, Typescript)? There are few simple steps to move apps into a separate project. There are few simple steps to add the authentication method 1. Copy the following file from the source directory and paste it to your project's Signin directory **src/modules/auth/Signin/SigninFirebase.js**
2. Link this file to Signin/index.js file of your project and remove other Linked file like below\
3. Copy the following action file from the actions of the source directory and paste it to your app's **actions src/redux/actions/FirebaseAuth.js**
4. Copy the following file from the source directory and paste it into your project. don't forget to import this file to *src/@crema/services/auth/index.js*\ **src/@crema/services/auth/firebase/firebase.js**
5. Add the following method into the **@crema/utility/AppHooks.js** file like below and call it into the **checkAuth** function like below ``` import {auth as firebaseAuth} from '../services/auth/firebase/firebase'; ``` ``` const firebaseCheck = () => new Promise((resolve) => { firebaseAuth.onAuthStateChanged((authUser) => { if (authUser) { dispatch({ type: UPDATE_AUTH_USER, payload: { authType: AuthType.FIREBASE, uid: authUser.uid, displayName: authUser.displayName, email: authUser.email, role: defaultUser.role, photoURL: authUser.photoURL, token: authUser.refreshToken, }, }); } resolve(); }); return Promise.resolve(); }); ``` ``` const checkAuth = () => { Promise.all([firebaseCheck()]).then(() => { setLoading(false); dispatch({type: USER_LOADED}); }); }; ``` \ All Done! \ \ In case you get the following error **FirebaseError: Firebase: Firebase App named '\[DEFAULT]' already exists (app/duplicate-app).** To fix this replace this code in the crema/services/auth/firebase/firebase.js file ``` firebase.initializeApp(firebaseConfig); ``` ``` if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig); } ``` ## 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 few menus from the template then you can follow the following steps 1. Go to the **src/modules/routesConfig.js** file and remove the object that you don't want to use in your left sidebar. 2. Remove all unrelated routes from the **src/modules/index.js** file. 3. Remove all unrelated files/directory from **src/modules/** directory. ## How I can remove other authentication methods (Next.js)? There are few simple steps to remove the authentication method from Nextjs 1. Go to the **@crema/utility/AppHooks.js** and remove other authentication methods from the **validateAuth** method in useEffect. 2. Remove all unrelated files from the **modules/auth/** directory. 3. Update the logout method to remove the unnecessary check\ \ **Ex. I want to use only the JWT- authentication method and remove all other methods.**\ \ **Step 1.** I will replace the **validateAuth** method like below and delete other methods ``` Promise.all([jwtAthCheck()]).then(() => { setLoading(false); }); ``` **Step 2.** I need to keep only **modules/auth/Signup/SignupJwtAuth.js** file in this Signup **modules/auth/Signin/SigninJwtAuth.js** file in the Signin directory and same as forgot password directory.
**Step 3.** Need to replace the logout method as shown below from all the following files\ **i.** shared/components/HeaderUser/index.js\ **ii.** shared/components/UserInfo/index.js\ **iii.** @crema/core/AppLayout/HorUserInfo.js\ **iv**. @crema/core/AppLayout/BitBucket/UserInfo.js ``` dispatch(onJWTAuthSignout()); ``` ## How I can remove other authentication methods (CRA)? There are few simple steps to remove the authentication method from CRA 1. Go to the **src/@crema/utility/AppHooks.js** and remove other authentication methods from the **validateAuth** method in useEffect. 2. Remove all unrelated files from the **src/modules/auth/** directory. 3. Update the logout method to remove the unnecessary check\ \ **Ex. I want to use only the JWT- authentication method and remove all other methods.**\ \ **Step 1.** I will replace the **validateAuth** method like below and delete other methods ``` Promise.all([jwtAthCheck()]).then(() => { setLoading(false); }); ``` **Step 2.** I need to keep only **src/modules/auth/Signup/SignupJwtAuth.js** file in this Signup **src/modules/auth/Signin/SigninJwtAuth.js** file in the Signin directory and same as forgot password directory.
**Step 3.** Need to replace the logout method as shown below from all the following files\ **i.** src/shared/components/HeaderUser/index.js\ **ii.** src/shared/components/UserInfo/index.js\ **iii.** src/@crema/core/AppLayout/HorUserInfo.js\ **iv.** src/@crema/core/AppLayout/BitBucket/UserInfo.js ``` dispatch(onJWTAuthSignout()); ``` ## How I can remove the customizer(Theme) button? 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/core/AppLayout/Standard/index.js** file, and to remove the customizer button, I need to remove **\** Tag. ## How I can access the old version of the crema? Users can access the GitHub repo here and select version v.1 ## Which icon package is used for the sidebar menu icons? We are using material icons for the sidebar menu. you can check out these here: ## How I can use a single widget/component of the Crema? You can use any component of crema without any dependency on other components. You need to follow the following steps. 1. Copy the component's File/Directory and paste it into your app(don't miss the **\*.style.js** file if any). 2. Check the external dependency of the component. If any then add that dependency into your project. 3. If that component uses any function from the Context API and the redux, you need to handle them yourself. ## How easy is it to extract the Mail App into my own project? There are few simple steps to move apps into a separate project. 1. Copy Mail folder into your project from apps 2. Add Mail app's route into your project and link it to your navigation(You can update base path 'apps/mail' to as your project need.) 3. Copy AppsContainer from the core components 4. Copy 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 you API Please link your API to mail) 6. Please make sure you initialize APIs in your demo version. ## How can I use found-relay instead of react-router-dom? To use any navigation libs instead of react-router-dom please follow the following steps. 1. Crema creates routes in src\modules\index.js file. In this file, you found createRoutes function. This function is responsible for route creations. You can update this function according to your new routing lib. 2. Crema generate Routes with the help of renderRoutes function of **react-router-config** in the src\\@crema\core\ContentView\index.js file\ \ So you can write down your logic in both files. # About Next.JS This section is purely based on the **Next.js**. In the next js version, you will get a full setup with Next.js with all Dashboards, Widgets, Metrics, and error pages. **All Configurations are the same as the CRA section.** If you found us something is missing please raise a support request here **\*All remaining docs will be same as CRA** # Installation Installation for the Next.js based template Once you have followed the installation pre-requisite steps from [here](https://crema-react.gitbook.io/docs/installation/pre-requisites), You can follow the following steps to install and run the Crema:- 1\. To run the Crema, Open the Crema folder in the editor of your choice. After following the folder, open the terminal and run the following command:- ``` yarn ``` this command will automatically install the required dependencies. 2\. Now, run the`next`command, which starts Next.js in development mode ``` yarn dev ``` This command will start the project in the browser in development mode i.e. the project will run on localhost://300X URL. 3\. To run`next build`which builds the application for production usage. ``` yarn build ``` 4\. To run `next start`which starts a Next.js production server ``` yarn start ``` # Folder Structure Folder Structure for the Next.js based template The folder structure is simple and easy to understand. When you unzip the folder, you will find the following folders/files:-‌ 1\. **@crema** * * **core** It contains all the general and common components that are used throughout the template. * **services** It contains database and authentication service providers settings and other data and files related to fake APIs. * **utility** It contains files all the important files related to the template. 2\. **modules** All the code related to dashboard, apps and other pages lies in this folder. We have kept the folder structure very simple and easy to understand by breaking the folders into sub-folders and following proper naming. For example, modules folder contain a folder named 'dashboard' which contains all the files related to dashboard, similarly, a folder named 'apps' contains all the code related to apps included in the template. 3\. **pages** Next.js supports pages with dynamic routes. Each page is associated with a route based on its file name. 4\. **public** Next.js can serve static files, like images, under a folder called `public` in the root directory. Files inside `public` can then be referenced by your code starting from the base URL (`/`) 5\. **redux**\ As the name suggests, this folder contains the global state management related files. This folder is divided into three subfolders viz. actions, reducers, and store. 6**. shared** This folder contains the helping files. It contains language files, constants that are used in Redux and style-related files.
![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-MAS7RMMIAnQXTHtUhix%2F-MAS9d-Q6p2A_kf2jQg3%2F1%20nextjs.png?alt=media\&token=bc147dd0-cf5c-47a1-ad38-9ccb99d0898d) # Route Protection Route protection with Next.js Route protection means protecting any defined path from unauthorized access. For example, Signin or Signup pages are common paths/unrestricted paths and any user can access it. However there are many paths or pages that only logged in users can access, those paths are called Protected Routes. In Crema, we have provided the functionality of route protection, you have to follow the following steps to protect the route:-\ \ **Step 1.** To hide/show the menu based on the **user role**, We need to protect the navigation menu as well as routes. To protect the navigation menu go to the **src/modules/routesConfig.js** file, In this file, we declared all the navigation(route) menu. We want to bind the menu with the auth role of the user. then we assign the role to the route menu. While defining the route menu, you have to pass one extra property named "**auth**" in the menu object in order to make the menu protected like below. ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-MKjJlS2CXZtREHAqP1V%2F-MKjLRsU4FXL6Dm4X3Hm%2Froute%20auth.png?alt=media\&token=c7e7f979-9e9e-41b7-a0c4-2dafebfb65ad) **Step 2.** If we want to protect our route then Crema Provide 2 different-2 HOC as following ![](https://1050460320-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3SI3541XczU8y8WVdI%2F-MOXXJ2ZAUE3IBEEOfeb%2F-MOZZDV7yaFxSsw9Dvub%2FScreenshot_1.png?alt=media\&token=d304171a-51eb-4bbe-835d-c9d0c36a50c5) * **AppPage HOC** is for protecting the route. In case you want to protect your route then you need to wrap your component in this **HOC** as following. ``` const HealthCare = asyncComponent(() => import('../../modules/dashboard/HealthCare')); export default AppPage(() => ); ``` * **DefaultPage HOC** is for the default pages. This **HOC** is used for that route that doesn't have a sidebar and header by default like the login pages of Crema. ``` const SignIn = asyncComponent(() => import('../modules/auth/Signin/index')); export default DefaultPage(() => ); ``` ## Q: How I can access the dashboards as the default route without login(with the sidebar and header)? **Ans.** To achieve this there are few steps to follow as following\ 1. Make your own HOC for this kind of route. The following things need to keep in mind during writing the HOC\ **i.** We don't need to check the user is logged in or not.\ **ii.** We need to include the Layout and the layoutWrapper should look like the following
``` export default (ComposedComponent) => (props) => { useStyles(); const {navStyle} = useContext(AppContext); const AppLayout = Layouts[navStyle]; return ( ); }; ``` 2. Finally, you need to wrap your route with this HOC. # Deploy to server Crema is using the Heroku server to deploy. If you are also using the Heroku server to deploy your app, then you don't need to change anything.\ \ In case you are using different Servers to deploy then you need to follow the server-specific configuration. for example, if you are using the **AWS amplify hosting** then follow this article[ https://dev.to/dabit3/5-minute-tutorial-deploying-a-next-app-with-aws-amplify-hosting-5199 ]() # Python Crema has some auth inbuilt APIs. Demo APIs listed here - You can find out the Python auth APIs public repo [here](https://github.com/crema-git/crema-python-flask.git) All Auth APIs listed here - ## Register User `POST` `https://crema-python.herokuapp.com/api/users` This endpoint allows you to get free cakes. #### Request Body | Name | Type | Description | | -------- | ------ | ------------------------ | | name | string | Name of the user | | email | string | Email of the user | | password | string | Password for the account | {% tabs %} {% tab title="200 Cake successfully retrieved." %} ``` { "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2MDA1Nzc5MTIsIm5iZiI6MTYwMDU3NzkxMiwianRpIjoiNzg0OWQyOWMtZjlkNC00ZDRlLWEwMjAtMjkzMTcxNzE5MmVkIiwiZXhwIjoxNjAwNTc4ODEyLCJpZGVudGl0eSI6MSwiZnJlc2giOnRydWUsInR5cGUiOiJhY2Nlc3MifQ.Cx76YDyMWVVCb2gQPhQ4JejeQjY8_gbD2RTOZv4ZDHI", "refresh_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2MDA1Nzc5MTIsIm5iZiI6MTYwMDU3NzkxMiwianRpIjoiYWY4NTQ4NWMtZTUwZi00NWJkLWJkNTEtYzJjNTg3MDAzMGUwIiwiZXhwIjoxNjAzMTY5OTEyLCJpZGVudGl0eSI6MSwidHlwZSI6InJlZnJlc2gifQ.XXLZ7tAYuZDqfYvWZ9pX4EdNbQLfnlEclXWMaewOD3U" } ``` {% endtab %} {% tab title="400 Could not find a cake matching this query." %} ``` { "error": "A user with that email already exists." } ``` {% endtab %} {% endtabs %} ## Login User `POST` `https://crema-python.herokuapp.com/api/auth` #### Request Body | Name | Type | Description | | -------- | ------ | ----------------------- | | email | string | Email of the user | | password | string | Password of the account | {% tabs %} {% tab title="200 " %} ``` { "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2MDA1NzgwNDksIm5iZiI6MTYwMDU3ODA0OSwianRpIjoiYjIxNDNkMjUtOWI3Yi00Y2FlLThmN2YtY2YxZDQyNzVhMTUwIiwiZXhwIjoxNjAwNTc4OTQ5LCJpZGVudGl0eSI6MSwiZnJlc2giOnRydWUsInR5cGUiOiJhY2Nlc3MifQ.IWnfR_2UFSJtzWHqzTG5o7PnHd3H6cQc13bnwe8cPPU", "refresh_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2MDA1NzgwNDksIm5iZiI6MTYwMDU3ODA0OSwianRpIjoiOThmNzQzZDMtN2M2Mi00ODFjLThjOWItMjI3NTQyZDljNTg3IiwiZXhwIjoxNjAzMTcwMDQ5LCJpZGVudGl0eSI6MSwidHlwZSI6InJlZnJlc2gifQ.g8UV9xSxHzc3XxgIzY0CTm2_2RTjTY2bn484gFdsW0E" } ``` {% endtab %} {% tab title="400 " %} ``` { "error": "Invalid credentials!" } ``` {% endtab %} {% endtabs %} ## Auth User `GET` `https://crema-python.herokuapp.com/api/auth` #### Headers | Name | Type | Description | | ------------- | ------ | ------------ | | Authorization | string | Bearer token | {% tabs %} {% tab title="200 " %} ``` { "created_on": "2020-09-20T04:58:32", "id": 1, "email": "jose@gail.com", "email_verified_at": null, "updated_on": "2020-09-20T04:58:32", "name": "jose" } ``` {% endtab %} {% endtabs %} # Mongoose Crema has some auth inbuilt APIs. Demo APIs listed here - You can find out the Mongoose auth APIs public repo [here](https://github.com/crema-git/crema-mongoose.git) All Auth APIs listed here - ## Register User `POST` `https://crema-mongoose.herokuapp.com/api/users` This endpoint allows you to get free cakes. #### Request Body | Name | Type | Description | | -------- | ------ | ------------------------ | | name | string | Name of the user | | email | string | Email of the user | | password | string | Password for the account | {% tabs %} {% tab title="200 Cake successfully retrieved." %} ``` { "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNWY0ZjE5ZWNjN2Y5ZGEwMDE3ZDg1YmFkIn0sImlhdCI6MTU5OTAxOTUwMSwiZXhwIjoxNTk5NDUxNTAxfQ.diJyrzPOY-FD7quqhbJ9D5sDdN8Oym40qqfgHoldpdg" } ``` {% endtab %} {% tab title="400 Could not find a cake matching this query." %} ``` { "error": "User already exists" } ``` {% endtab %} {% endtabs %} ## Login User `POST` `http://crema-mongo-api.herokuapp.com/api/auth` #### Request Body | Name | Type | Description | | -------- | ------ | ----------------------- | | email | string | Email of the user | | password | string | Password of the account | {% tabs %} {% tab title="200 " %} ``` { "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNWY0ZjE5ZWNjN2Y5ZGEwMDE3ZDg1YmFkIn0sImlhdCI6MTU5OTA3MDc3MCwiZXhwIjoxNTk5NTAyNzcwfQ.fK3L6ZmU8S7I-i21kJj_0sA212JOPgFaTWeSeAUaORQ" } ``` {% endtab %} {% tab title="400 " %} ``` { "error": "Invalid Credentials" } ``` {% endtab %} {% endtabs %} ## Auth User `GET` `http://crema-mongo-api.herokuapp.com/api/auth` #### Headers | Name | Type | Description | | ------------ | ------ | ----------- | | x-auth-token | string | | {% tabs %} {% tab title="200 " %} ``` { "_id": "5f4f19ecc7f9da0017d85bad", "name": "Demo User", "email": "demqo@example.com", "avatar": "https://gravatar.com/avatar/8f6b538c5a829890d9d72aba5fc4ed25?d=mm&r=pg&s=200", "date": "2020-09-02T04:05:00.903Z", "__v": 0 } ``` {% endtab %} {% endtabs %} # Laravel Crema has some auth inbuilt APIs. Demo APIs listed here - You can find out the Laravel auth APIs public repo [here](https://github.com/crema-git/crema-laravel.git) All Auth APIs listed here - ## Register User `POST` `http://crema-laravel.herokuapp.com/api/users` This endpoint allows you to get free cakes. #### Request Body | Name | Type | Description | | -------- | ------ | ------------------------ | | name | string | Name of the user | | email | string | Email of the user | | password | string | Password for the account | {% tabs %} {% tab title="200 Cake successfully retrieved." %} ``` { "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNWY0ZjE5ZWNjN2Y5ZGEwMDE3ZDg1YmFkIn0sImlhdCI6MTU5OTAxOTUwMSwiZXhwIjoxNTk5NDUxNTAxfQ.diJyrzPOY-FD7quqhbJ9D5sDdN8Oym40qqfgHoldpdg" } ``` {% endtab %} {% tab title="400 Could not find a cake matching this query." %} ``` { "error": "User already exists" } ``` {% endtab %} {% endtabs %} ## Login User `POST` `http://crema-laravel.herokuapp.com/api/auth` #### Request Body | Name | Type | Description | | -------- | ------ | ----------------------- | | email | string | Email of the user | | password | string | Password of the account | {% tabs %} {% tab title="200 " %} ``` { "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNWY0ZjE5ZWNjN2Y5ZGEwMDE3ZDg1YmFkIn0sImlhdCI6MTU5OTA3MDc3MCwiZXhwIjoxNTk5NTAyNzcwfQ.fK3L6ZmU8S7I-i21kJj_0sA212JOPgFaTWeSeAUaORQ" } ``` {% endtab %} {% tab title="400 " %} ``` { "error": "Invalid Credentials" } ``` {% endtab %} {% endtabs %} ## Auth User `GET` `http://crema-laravel.herokuapp.com/api/auth` #### Headers | Name | Type | Description | | ------------- | ------ | ------------ | | Authorization | string | Bearer token | {% tabs %} {% tab title="200 " %} ``` { "id": 4, "name": "Demo User", "email": "demo@ample.com", "email_verified_at": null, "created_at": "2020-09-03T04:25:55.000000Z", "updated_at": "2020-09-03T04:25:55.000000Z" } ``` {% endtab %} {% endtabs %} # About Crema Crema is based on the MUI, React Bootstrap and Ant design {% hint style="info" %} You can find out Crema 4.x documentation [here](https://docs.cremawork.com/v/v-4/). {% endhint %} A professional setup with all the best practices. Crema has vast and height-level architecture in the easiest way for all level developers. You can start with all level projects with the crema and can extend it as you want.\ \ Crema is a fully-featured React-based Admin template that is configured with all the latest and trending libraries and technologies like **Material-UI-5**, **Ant Design,** **React Bootstrap** Redux, React Hooks and a lot more interactive libs. Crema has six dashboards(Crypto, CRM, Analytics, Health Care, Academic, E-Commerce), lots of widgets and metrics, 7 fully functional apps (Todo, Mail, Contact, Chat, Scrum board, and Wall, E-commerce), and a lot of ready-to-use pages. **Key Features:-** * Three Modes - Light, Semi-Dark, and Dark. * A lot of Color combinations to beautify the Template. * 5 Menu Style with or without Background Image with Unlimited color combination * 11 Navigation Style * 3 Layout Type * Six Languages Supported. * Code Splitting and Reusability. Crema is loaded with:- * React Hooks * TypeScript * React Redux * CRA(Create-react-app) * React-Router-Dom v-6 * Context API * Material UI(Separate) * Ant Design(Separate) * React Bootstrap(Separate) * Google Maps * Slick Carousel * React Calendar * Drag N Drop * Recharts * React Player * React Colors * React Beautiful DND * Dropzone * React Timeline * React Table * Material UI Tables * React Notifications * React Player * Axios-mock-adaptor * Material Icons * ES-Lint & TS Lint * Prettier * Husky\ and a lot more... # Crema Overview Crema is available in the Next js and CRA(create-react-app). Crema is also available in both Typescript and Javascript. When you get the Crema template from Themeforest, you will get a zip folder from Themeforest. Upon extracting the content of the zip folder, you will get the following content in Crema 3.x.x
**1. MUI :-** In this folder, you will get the [MUI](https://mui.com/) based template with the [nextjs ](https://nextjs.org/)and [cra](https://reactjs.org/docs/create-a-new-react-app.html). This folder contains the following subfolders. Check out the demo [here](https://cra.cremawork.com/). * **source-context:** In this folder, you will get the source code of **CRA** version purely context API based. * **nextjs-context:** In this folder, you will get the source code of **next-js** version purely context API based. * **source:** In this folder, you will get the source code of **CRA** version. * **source-ts:** In this folder, you will get the **TypeScript** code of **CRA** version. * **nextjs:** In this folder, you will get the source code of **next-js** version. * **nextjs-ts:** In this branch, you will get the **TypeScript** code of **next-js** version. * **starter-kit-source-ts:** In this folder, you will get the **TypeScript starter-kit** of **CRA** version. * **starter-kit-source:** In this folder, you will get the **starter-kit** of **CRA** version. * **starter-kit-nextjs:** In this folder, you will get the **starter-kit** of **next-js** version. **2. ANT:-** In this folder, you will get the [Ant Design ](https://ant.design/)based template with the [cra](https://reactjs.org/docs/create-a-new-react-app.html).This folder contains the following subfolders. Check out the demo [here](https://ant-cra.cremawork.com/). * **source-styled:** In this folder, you will get the source code with **antd 5 +Context API**. * **source:** In this folder, you will get the source code. * **starter-kit-source:** In this folder, you will get the **starter-kit**.
**3. BS5:-** In this folder, you will get the [React bootstrap](https://react-bootstrap.github.io/) based template with the [cra](https://reactjs.org/docs/create-a-new-react-app.html).This folder contains the following subfolders. Check out the demo [here](https://bs-cra.cremawork.com/) * **source:** In this folder, you will get the source code, here is the [demo](https://bs-cra.cremawork.com/) **4. servers:-** In this directory, you will found the following backend servers, These sever has auth APIs . * **Mongoose** * **Laravel** * **Python** **5. build:-** this folder contains the offline demo of Crema MUI. You can check this by using the following commands ``` yarn global add serve serve -s build ``` # Folder Structure Crema has a vast and professional folder structure. The folder structure is professional, simple and easy to understand. 1\. **public**‌ This folder contains the public assets and JavaScript used for rendering of Applications on the browser. * **assets** This folder contains all the images and other raw materials used in the template. 2\. **src** ‌The src contains the code of all the pages in the Crema. This folder is the heart of this project. This is the folder where the magic happens. Basically, this is the folder in which the user do all the work. The src folder structure is as follows:-‌ * **@crema** * **core** It contains all the general and common components that are used throughout the template. * **services** It contains database and authentication service provider's settings and other data and files related to fake APIs. * **utility** It contains all the utility files like context API, hooks, helper function. * **pages** All the code related to the dashboard, apps, and other pages lies in this folder. We have kept the folder structure very simple and easy to understand by breaking the folders into sub-folders and following proper naming. For example, the modules folder contains a folder named 'dashboard' which contains all the files related to the dashboard, similarly, a folder named 'apps' contains all the code related to apps included in the template. * **redux**, As the name suggests, this folder contains the global state management-related files. This folder is divided into three sub folders viz. actions, reducers, and store. * **shared** This folder contains the helping files. It contains language files, constants that are used in Redux, and style-related files. {% hint style="info" %} The basic folder structure in below {% endhint %} ![Crema folder structure.](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FuLne7c6tOC7acCmEVnGa%2Fimage.png?alt=media\&token=3f69e588-3928-49a2-99b1-e3f517630895) # @crema Crema is the main directory of the Crema Template @crema in the base directory of the template. In @crema dirctory you will get following sub directory. ![@crema folder overview](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FiXpXg7tVa9PrGgmH6byr%2Fimage.png?alt=media\&token=26c45981-70be-49ac-b04e-b25e5505e9c6) * **core** It contains all the general and common components that are used throughout the template. ![core directory of the crema](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FHLU2bvHiwRNFfaF2dPwF%2Fimage.png?alt=media\&token=63a20b43-009e-42f5-960f-fbd22ed0a301) * **services** It contains database and authentication service provider's settings and other data and files related to fake APIs. In this directory upi will get following files ![Service directory of the crema](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FfKfg8DBiveoE2TapQpyB%2Fimage.png?alt=media\&token=82feb51d-fae6-4244-acda-ee5aa49d31b3) * **utility** It contains all the utility files like context API, hooks, helper function.
![Utility directory of the crema](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FSloxdKs5mpm0RnmEbp2y%2Fimage.png?alt=media\&token=a8deaf00-f8f8-4eba-8b06-c29a2000b16a) # page In the page directory in the crema you will get all pages and it's components All the code related to the dashboard, apps, and other pages lies in this folder. We have kept the folder structure very simple and easy to understand by breaking the folders into sub-folders and following proper naming. For example, the modules folder contains a folder named 'dashboard' which contains all the files related to the dashboard, similarly, a folder named 'apps' contains all the code related to apps included in the template.
![page directory of the crema](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FHofP7gZTplyHeN6B8nhF%2Fimage.png?alt=media\&token=fb31d4f9-3e25-465e-8807-c99ce899a232) {% hint style="info" %} In the nextjs page directory will be move into modules**.** page is the default directory in the nextjs. {% endhint %} # redux redux configuration of the crema template. Crema use the redux, only for the api calling and data processing. As the name suggests, this folder contains the global state management-related files. This folder is divided into three sub folders viz. actions, reducers, and store. ![redux folder structure](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2Fxygx55MRHxgIh9b2KFi2%2Fimage.png?alt=media\&token=d2bea937-b6ab-419d-91ae-328ff9ff1654) # shared This folder contains the helping files. It contains language files, constants that are used in Redux, and style-related files.
![shared folder structure](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FyAIelTpqL0QnO2ldNKvr%2Fimage.png?alt=media\&token=64f4a57c-3fcb-43bf-8151-30940eeffe92) # types the type definition of the crema template. {% hint style="info" %} This page only for the typescript version only {% endhint %} The type definition of the crema type script version here. ![crema type definition](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FCN3ISINmkuilu3xejNrs%2Fimage.png?alt=media\&token=b112872e-eceb-4361-96e3-8749c225282a) # GitHub Access Crema provides GitHub access to its users, so users can access the latest feature, make a pull request, bug fixes. Crema provides GitHub access to its users, so users can access the latest feature, make a pull request, bug fixes.\ \ Inside the GitHub repo, all branches names are exactly the same as the folder name, which you have downloaded from MUI.
{% embed url="" %} Users can access the GitHub Repository[ ](https://git-access.cremawork.com/) {% endembed %} **1. crema-3.x:-** In this repo you will get the [MUI](https://mui.com/) based template with the [nextjs ](https://nextjs.org/)and [cra](https://reactjs.org/docs/create-a-new-react-app.html). This repo contains the following branches. * **source:** In this branch you will get the source code of **CRA** version, here is the [demo](https://cra.cremawork.com/). * **source-ts:** In this branch you will get the **TypeScript** code of **CRA** version, here is the [demo](https://cra-ts.cremawork.com/). * **nextjs:** In this branch you will get the source code of **next-js** version, here is the [demo](https://crema-next.herokuapp.com/). * **nextjs-ts:** In this branch you will get the **TypeScript** code of **next-js** version, here is the [demo](https://crema-next-ts.herokuapp.com/). * **starter-kit-source-ts:** In this branch you will get the **TypeScript starter-kit** of **CRA** version. * **starter-kit-source:** In this branch you will get the **starter-kit** of **CRA** version. * **starter-kit-nextjs:** In this branch you will get the **starter-kit** of **next-js** version. **2. crema-ant-3.x:-** In this repo you will get the [Ant Design ](https://ant.design/)based template with the [cra](https://reactjs.org/docs/create-a-new-react-app.html) version. This repo contains the following branches. * **source:** In this branch you will get the source code of **CRA** branch, here is the [demo](https://ant-cra.cremawork.com/). * **starter-kit-source:** In this branch you will get the **starter-kit** of **CRA** version. # Slack Community Connect with a community of technical professionals working together to ship high-quality. Share your idea and insights, for inspiration collaboration, and great results. Connect with a community of technical professionals working together to ship high-quality. Share your idea and insights, for inspiration collaboration, and great results. {% embed url="" %} You can join our Slack Community here {% endembed %} # Figma File Crema Figma. You can check out our all pages design here. Figma file is made by using the style guide so you can change the current file color theme according to your need.\ \ Check out the Crema Figma file [here](https://www.figma.com/file/ED1Gn4TPvB3au8YttogrfF/Crema-Design?node-id=0%3A1\&t=EuXY2hQO4jgpVsCP-1). {% @figma/embed fileId="ED1Gn4TPvB3au8YttogrfF" nodeId="0:1" url="" %} # Installation In Crema the following chapters in this module will explain the steps to Set up the Crema. You need to follow the steps one by one in the written order. This module explains the process of Setting up the Crema in your system for use. The following chapters in this module will explain the steps to Set up the Crema. You need to follow the steps one by one in the written order. # Pre-Requisites To install Crema on the system, you need to develop a React Environment in the system. Following steps should be followed to develop React Environment:- **1**. **Node.js** Node.js is a JavaScript run time built needed to run a React App. You need to install the **recommended** version of Node.js from the official website **2**. **Yarn** Yarn is a project manager responsible for adding and installing all the dependencies required for running the Crema on the system. You can install the latest version of Yarn from the official website # Installing Crema Once you have followed the installation pre-requisite steps, You can follow the following steps to install and run the Crema:- 1\. To run the Crema, Open the Crema folder in the editor of your choice. After following the folder, open the terminal and run the following command:- ``` yarn ``` this command will automatically install the required dependencies. {% hint style="info" %} If you are using Nextjs version then you need to check this [doc](/v-3/next-js/installing-next-js) {% endhint %} 2\. Now, run the following command to run the project in the browser. ``` yarn start ``` This command will start the project in the browser in development mode i.e. the project will run on localhost://300X URL. 3\. To add the project to the live server, you need to make the Build of the project. Run the following command to make the Build of the project. ``` yarn build ``` After successful completion of build command, you will find following instructions on the terminal:- The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages: "homepage" : "", The build folder is to ready be deployed. You may serve it with a static server: ``` yarn global add serve serve -s build ``` Find out more about deployment here In case you want to deploy on another server please change accordingly. # Route Overview Route protection means protecting any defined path from unauthorized access. For example, Signin or Signup pages are public pages and any user can access them Route protection means protecting any defined path from unauthorized access. For example, Signin or Signup pages are public pages and any user can access them. However there are many pages that only authenticated users can access, those paths are called Protected path. In Crema, we have provided the functionality of route protection.\ \ In crema we have categorized the routing in the 3 different category like below * **Un-Authorized Route**: In this category only the authentication routes come like sign-in, sign-up, forgot-password etc. * **Authorized Route**: All the protected routes land in this category. only authenticated user can access these routes(pages) * **Anonymous Route**: In this category general purpose pages comes. these page doesn't belongs to user authorization state. like 404, 500, maintenance, coming soon etc\ \ Here is the main routing structure ```javascript {generateRoutes({ isAuthenticated: isAuthenticated, // user authentication state userRole: user.role, // user role unAuthorizedStructure, // all the un-authentated routes goes here authorizedStructure, // all the authentated routes goes here anonymousStructure, // all the anonymous routes goes here })} } /> #################### const authorizedStructure = { fallbackPath: '/signin', // when user is not-autheticate then land here unAuthorizedComponent: ,// when user is autheticate but not authorized then land here routes: [ // all authorized routed goes here ...dashBoardConfigs, ...appsConfig, ], }; const unAuthorizedStructure = { fallbackPath: initialUrl, // first route after login, you can change it as you want routes: authRouteConfig, }; const anonymousStructure = { routes: errorPagesConfigs.concat([ { path: '*', element: ,// setting 404 route }, ]), }; ``` {% hint style="info" %} In case you want manage some routes(page) based on the user role then you need to follow the extra steps as below {% endhint %} To hide/show the menu based on the **user role** and **multiple roles**, We need to protect the navigation menu as well as routes. \ \ **Step 1.** To allow access to the navigation menu for a particular user role. you need to go to the **src/modules/routesConfig.js** file, In this file, we declared all the navigation(route) menus. We want to bind the particular menu with the user role then we assign the role to the route menu. While we assign a role to the route menu, you have to pass one extra property named "**permittedRole**" in the menu object in order to make the menu protected based on the user role. ```javascript id: 'dashboards', // Id of the Menu Group title: 'Dashboards', // Title of the Menu Group messageId: 'sidebar.app.dashboard', // Localization id of the Menu Group type: 'group', group/collapse/item // Type of menu of the Menu Group permittedRole: RoutePermittedRole.Admin, // Allowed to visible User Role url: '/app/my-profile' // path of the menu navigation children: [] ``` If you want to **assign multiple roles** then you need to pass the **permittedRole** in the array like below. ```javascript id: 'dashboards', // Id of the Menu Group title: 'Dashboards', // Title of the Menu Group messageId: 'sidebar.app.dashboard', // Localization id of the Menu Group type: 'group', group/collapse/item // Type of menu of the Menu Group permittedRole: [RoutePermittedRole.Admin, RoutePermittedRole.Staff], // Allowed to visible User Role url: '/app/my-profile' // path of the menu navigation children: [] ``` **Step 2.** We need to protect the route from unwanted access. To protect the route from unwanted access, we need to add the '**permittedRole**' property to the route, this will be protected the route base on the passed permission. Ex in the **src/modules/dashboard/index.js** file we are protecting the ECommerce page from the unwanted user role ```javascript import React from 'react'; import {RoutePermittedRole} from 'shared/constants/AppConst'; const ECommerce = React.lazy(() => import("./ECommerce")); export const dashBoardConfigs = [ { permittedRole: RoutePermittedRole.User, // pass the role that allows access path: '/dashboards/e-commerce', element: , }, ... ]; ``` to allow multiple roles ```javascript import React from 'react'; import {RoutePermittedRole} from 'shared/constants/AppConst'; const ECommerce = React.lazy(() => import("./ECommerce")); export const dashBoardConfigs = [ { permittedRole: [RoutePermittedRole.User, RoutePermittedRole.Admin], // pass the role that allow to access path: '/dashboards/e-commerce', element: , }, ... ]; ``` # Add New Route In crema we have categorized the routing in the 3 different category like below 1. **Un-Authorized Route**: In this category only the authentication routes come like sign-in, sign-up, forgot-password etc. 2. **Authorized Route**: All the protected routes land in this category. only authenticated user can access these routes(pages) 3. **Anonymous Route**: In this category general purpose pages comes. these page doesn't belongs to user authorization state. like 404, 500, maintenance, coming soon etc\ \ Here is the main routing structure ```javascript {generateRoutes({ isAuthenticated: isAuthenticated, // user authentication state userRole: user.role, // user role unAuthorizedStructure, // all the un-authentated routes goes here authorizedStructure, // all the authentated routes goes here anonymousStructure, // all the anonymous routes goes here })} } /> #################### const authorizedStructure = { fallbackPath: '/signin', // when user is not-autheticate then land here unAuthorizedComponent: ,// when user is autheticate but not authorized then land here routes: [ // all authorized routed goes here ...dashBoardConfigs, ...appsConfig, ], }; const unAuthorizedStructure = { fallbackPath: initialUrl, // first route after login, you can change it as you want routes: authRouteConfig, }; const anonymousStructure = { routes: errorPagesConfigs.concat([ { path: '*', element: ,// setting 404 route }, ]), }; ``` To add a route you need to decide first which kind of route you want to add. After decide the category above mentioned. If your route came in the **Un-Authorized** or **Anonymous** category then you just need to add your route in the particular object's routes property.\ \ You need to create a directory regarding your route, with the route name. In this directory all the file related to routes land. {% hint style="info" %} If your route land on the **authorized** category then you need to follow the some extra steps as below describe and don't forget to add that route in the **authorizedStructure** object at the end {% endhint %} Adding a new menu in the Crema is a cup of cake. You don't have to add the menu separately for horizontal layouts and vertical layouts. You simply have to add a new menu to a single file and the menu will be added to all the layouts automatically. **Steps to add a new menu:-** 1\. Go to the file with the path: - ``` src/pages/routesConfig.js ``` 2\. Adding a group of menu's:- If you want to add a group of menus, Just add a new object in the above-said file with the following properties as shown below- ```javascript const routesConfig = [ ..., { id: 'new-group', title: 'Gropup Name', messageId: 'sidebar.app.newGroup', type: 'group', children:[...] } ] ``` The children's property of a group contains objects as shown below. ```javascript const routesConfig = [ ..., { id: 'new-group', title: 'Gropup Name', messageId: 'sidebar.app.newGroup', type: 'group', children: [ { id: 'new-menu', title: 'New Menu', messageId: 'sidebar.app.dashboard.newMenu', type: 'item', icon: 'menu_icon', url: '/new-group/new-menu', }, ... ], }, ]; ``` 3\. Adding Collapse type Menu:- To add a collapse type menu, go to the 'routesConfig' file (path given in step 1) and add a new object to the 'routesConfig' array. The new object show look like this:- ```javascript const routesConfig = [ ..., { id: 'new-group', title: 'Gropup Name', messageId: 'sidebar.app.newGroup', type: 'collapse', children:[...] } ] ``` 4\. Adding a menu item:- Adding a menu item is very easy, You just have to add an object in the 'routesConfig' array in the 'routesConfig' file (path given in step 1). The Item object should look contain the following properties as shown in the screenshot shown below. ```javascript const routesConfig = [ ..., { id: 'new-group', title: 'Gropup Name', messageId: 'sidebar.app.newGroup', type: 'collapse', children: [ { id: 'new-menu', title: 'New Menu', messageId: 'sidebar.app.dashboard.newMenu', type: 'item', icon: 'menu_icon', url: '/new-group/new-menu', }, ... ], }, ]; ``` In the nutshell, You just have to add an object in order to array a new menu. The object contains a property named 'type' which can have three values i.e. 'group', 'collapse', and 'item'. You just have to pass the correct value to this 'type' property as per the type of menu you want to add. All other properties in the object remain the same. # Auth User In the Crema if you want to get the currently authenticated user. You need to call the useAuthUser hook and you will get the auth user like below. In the Crema if you want to get the currently authenticated user. You need to call the `useAuthUser` hook and you will get the auth user like below. ```javascript const {user, isAuthenticated, isLoading} = useAuthUser(); user // authenticated user object isLoading // authentication is in progress isAuthenticated // denote the user auth state ``` --- [Next Page](/llms-full.txt/1)