source

The source is the crema's default app. That is built with the Context APIs(State Management). Source has the default folder structure like below

Source folder structure

// Accounts route configuration with permission
export const accountPagesConfigs = [
  {
    permittedRole: [RoutePermittedRole.User, RoutePermittedRole.Admin],
    path: '/my-profile',
    element: <Account />,
  },
];

As shown in the above image source have the src folder and some basic configuration files.

the src folder has some subfolders as below describe.

1. assets: images of the related app

2. core: this is the core folder that has routes configurations and app layout of a particular app We have 2 folders inside this like below I. AppLayout: In this folder, we have a single file for app layout configuration like below.

   import React from 'react';
   import { useRoutes } from 'react-router-dom';
   import { Layouts } from '@crema/components/AppLayout';
   import AppContentView from '@crema/components/AppContentView';
   import generateRoutes from '@crema/utility/RouteGenerator';
   import { useAuthUser } from '@crema/utility/AuthHooks';
   import { useLayoutContext } from '@crema/context/LayoutContextProvider';
   import {
     anonymousStructure,
     authorizedStructure,
     unAuthorizedStructure,
   } from '../AppRoutes';
   import routesConfig from '../AppRoutes/routeConfig';
   
   const AppLayout = () => {
     const { navStyle } = useLayoutContext();
     const { user, isAuthenticated } = useAuthUser();
     const AppLayout = Layouts[navStyle];
     const generatedRoutes = generateRoutes({
       isAuthenticated: isAuthenticated,
       userRole: user?.role,
       unAuthorizedStructure,
       authorizedStructure,
       anonymousStructure,
     });
     const routes = useRoutes(generatedRoutes);
   
     return (
       <>
         {isAuthenticated ? (
           <AppLayout routes={routes} routesConfig={routesConfig} />
         ) : (
           <AppContentView routes={routes} />
         )}
       </>
     );
   };
   
   export default AppLayout;

   II. AppRoutes: In this folder, we have all routes with the permission and left sidebar configuration like below.

   //Left Sidebar configuration
   const routesConfig = [
     {
       id: 'extra-pages',
       title: 'Extra Pages',
       messageId: 'sidebar.pages.extraPages',
       type: 'group',
       children: [
         {
           id: 'account',
           title: 'Account',
           messageId: 'sidebar.pages.extraPages.account', //
           type: 'item',
           permittedRole: [RoutePermittedRole.User, RoutePermittedRole.Admin],
           icon: <MdOutlineManageAccounts />,
           url: '/my-profile',
         },
         ...
       ],
     }
     ...
   ]

   We have the above configuration of the left sidebar.

   // Accounts route configuration with permission
   export const accountPagesConfigs = [
     {
       permittedRole: [RoutePermittedRole.User, RoutePermittedRole.Admin],
       path: '/my-profile',
       element: <Account />,
     },
   ];
   

   We have multiple files for all modules. each module has its route config file

3. module: In this folder, we have multiple modules. Here we can write our full module or we can directly access the library module like below. by using this we can use the same module in the multiple apps

   // Directly accessing the lib module
   
   import { SigninFirebase } from '@crema/modules/auth/SignIn';
   
   export default SigninFirebase;