238 comments found.
Hi, How to implement a role based menu?
Hi,
To change menu content and link you can change in app/api/ui/menu.js
And for menu layout you can change in app/redux/modules/uiReducer.js like in this docs https://ilhammeidi.github.io/enlite-docs/code_flow/ui_lang.html#theme
Regards.
Hi, The documentation recommends using saga but the examples do not use it. Also , as per the documentation it mentions saga folders and configuration, but I dont have those files. can you please suggest what approach should I take
Hi flezcano,
Thanks for purchasing.
And sorry for the missed documentation.
This template already migrated tfrom redux to redux-toolkit which simpler. So no need redux-saga anymore.
In example for Contact with Firebase, it has 2 config files:
- Redux Slice to handle front-end side /app/containers/SampleFirebaseApps/Contact/reducers/contactSlice.js
app/containers/SampleFirebaseApps/Contact/services/contactApi.js
Each config has CRUD functions like add, fetch, update, etc. For more references about redux-toolkit you can check this link https://redux-toolkit.js.org/tutorials/quick-start
And for Authentication with Firebase that just uses native function from firebase. /app/containers/Pages/UsersFirebase/Login.js I followed in firebase official docs https://firebase.google.com/docs/web/setup
I will update the complete documentation next week.
Feel free if you have any further queries.
Regards.
i need ico
i need ico
i need ico
icon
i neeeed ico icon
I have purchased Enlite Prime on 01 February, 2025.
I have done npm install npm run build:dll npm start
I am getting error following error. Module not found: Error: Can’t resolve ‘styled-components’ in ’/src/enlite-prime_v221/enlite-prime’
How to solve it?
Hi, to solve this please run ‘npm install styled-components’ then ‘npm run build:dll’
After it should be work when start project with npm run dev
Hope this can help.
Regards
Hello, where is all the data stored and is it fully functional? DB etc.
Thanks
Hi, Enlite Prime uses Firebase Realtime Database to store Sample Apps and authentication data. Only Sample Apps (Mail, Chat, and Todo List) and Authentication are fully functionals.
But for another dummy datas are stored as local variable.
Regards.
Dear ilhammeidi,
I am writing to request urgent support for Enlite Prime 2.0, which I purchased on June 25th, 2024 (License #2515b2df-a16d-4854-9ad7-54f32559ce98). My developers are attempting to install the template on an Azure server and have encountered a critical issue.
Problem:
After successfully deploying the template and accessing the login/registration pages, we are unable to load any other pages within the application. When attempting to access these pages, we receive the following error message: “The resources you are looking for has been removed, had its name changed, or is temporarily unavailable.”
Developer’s Feedback:
My developer has informed me that the template deploys successfully and the login/registration pages are accessible. However, all other pages fail to load, indicating a potential issue with routing or resource configuration within the template itself.
Video Documentation:
To help illustrate the problem, my developer has recorded a video of the installation process and the error encountered: https://drive.google.com/file/d/1ry0Go2wTnc2FRxdH1rMPByloON7hLL-D/view?usp=sharing
Request:
We would greatly appreciate your assistance in resolving this issue as soon as possible. Please review the provided video and advise on potential solutions or configuration adjustments that may be necessary to ensure the proper functioning of all pages within the Enlite Prime 2.0 template.
Thank you for your time and attention to this matter.
Sincerely,
Meir Sarig
Hi,
Please try to set the fallback navigation to index.html
https://stackoverflow.com/questions/77549485/how-to-deploy-a-create-react-app-project-to-azureRegards.
In the project downloaded whats the difference between starter project and enlite prime folder please ?
and why i dont see all the components in the starter project ? Please i need an answer
Hi, The starter-project is a minimal version. It has basic pages, like login, register, form, table, minimal dashboard. The starter-project suitable for build app from beginning.
Protected Page doesn’t seem to be working. Fails also in the online demo with the same error
ProtectedPage.js:8 Uncaught TypeError: Cannot read properties of undefined (reading ‘loggedIn’) at ProtectedPage.js:8:57 at eval (react-redux.mjs:107:28) at memoizedSelector (use-sync-external-store-with-selector.development.js:78:30) at getSnapshotWithSelector (use-sync-external-store-with-selector.development.js:133:14) at mountSyncExternalStore (react-dom.development.js:16799:20) at Object.useSyncExternalStore (react-dom.development.js:17727:14) at useSyncExternalStore (react.development.js:1677:21) at useSyncExternalStoreWithSelector (use-sync-external-store-with-selector.development.js:144:15) at useSelector2 (react-redux.mjs:161:27) at ProtectedPage (ProtectedPage.js:8:29)
Ok I will update and fix it in this weekend.
Hi, I just update the project by changing authReducer to auth in
app/containers/Session/ProtectedPage.js
const isAuth = useSelector(state => state.auth.loggedIn);
Regards.
Hi, steps to reproduce the issue:
Unzip the package. Navigate to either start or starter project.
Upload the Google Cloud using the command.
gcloud run deploy site
(Gets the following error)
===> BUILDING
[builder] Timer: Builder started at 2024-10-06T09:36:39Z
[builder] === Node.js – Runtime (google.nodejs.runtime@1.0.0) ===
[builder] 2024/10/06 09:36:39 [DEBUG] GET https://dl.google.com/runtimes/ubuntu2204/nodejs/version.json
[builder] ** CACHE MISS: “nodejs”
[builder] Installing Node.js v22.9.0.
[builder] 2024/10/06 09:36:40 [DEBUG] GET https://dl.google.com/runtimes/ubuntu2204/nodejs/nodejs-22.9.0.tar.gz
[builder] === Node.js – Yarn (google.nodejs.yarn@2.1.0) ===
[builder] 2024/10/06 09:36:43 [DEBUG] GET https://registry.npmjs.org/yarn
[builder] ** CACHE MISS: “yarn_engine”
[builder] Installing Yarn v1.22.22
[builder] 2024/10/06 09:36:43 [DEBUG] GET https://yarnpkg.com/downloads/1.22.22/yarn-v1.22.22.tar.gz
[builder] Setting environment variable PATH=/layers/google.nodejs.yarn/yarn_engine/bin:/layers/google.nodejs.runtime/node/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
[builder] * CACHE MISS: “yarn_modules”
[builder] —-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-
[builder] Running “yarn install—non-interactive—prefer-offline—modules-folder=/layers/google.nodejs.yarn/yarn_modules/node_modules—frozen-lockfile (PATH=/layers/google.nodejs.yarn/yarn_engine/bin:/layers/google.nodejs.runtime/node/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/layers/google.nodejs.yarn/yarn_modules/node_modules/.bin)”
[builder] yarn install v1.22.22
[builder] error SyntaxError: Invalid value type 2324:0 in /workspace/yarn.lock
[builder] at Parser.unexpected (/layers/google.nodejs.yarn/yarn_engine/lib/cli.js:64026:11)
[builder] at Parser.parse (/layers/google.nodejs.yarn/yarn_engine/lib/cli.js:64154:16)
[builder] at Parser.parse (/layers/google.nodejs.yarn/yarn_engine/lib/cli.js:64131:26)
[builder] at parse (/layers/google.nodejs.yarn/yarn_engine/lib/cli.js:64231:21)
[builder] at module.exports.exports.default (/layers/google.nodejs.yarn/yarn_engine/lib/cli.js:63793:96)
[builder] at Function.<anonymous> (/layers/google.nodejs.yarn/yarn_engine/lib/cli.js:3068:63)
[builder] at Generator.next (<anonymous>)
So points to some issuer on yarn.lock. So I deleted did yarn import/install and tried again. Got the following error then “Module not found: Error: Can’t resolve ‘styled-components’ in ’/workspace’”
Project works when I run it locally.
Hi, I haven’t try with google cloud. Can you run with npm install? because I think gcp by default using yarn. In the template demo I used static site deployment like vercel or netlify.
I will try with gcp and let you know soon.
GCP by default uses yarn and there is a yarn.lock file in the directly. I tried to remove and forced to use npm. Didn’t work run into issues with libraries. Then did the other way around removed npm and tried with yarn. The site gets deployed but then runs into other errors. Seems the issue is with the npm lock file that has things defined outside of package.json. Tried for 3-4 hours but still unable solve the depdencies.
If yarn and gcloud run deploy don’t work, you have to install it manually by opening the ssh terminal. Please remove the node_modules/ with ‘rm -rf node_modules’ then run npm install.
And for the installation warning you can ignore it by edit .npmrc add or uncomment ‘loglevel=silent’
Regards.
Running the starter-project in GCP as a container. Getting the following error.
ERROR in undefined main Module not found: Error: Can’t resolve ‘styled-components’ in ’/workspace’
Hi, please try to install to install separately with npm install styled-components
Hi, this didn’t work
Hello! I have followed your instructions as closely as possible. I receive the following error message when I run npm install command.
$ npm install npm warn ERESOLVE overriding peer dependency npm warn While resolving: mini-create-react-context@0.4.1 npm warn Found: react@18.2.0 npm warn node_modules/react npm warn react@”18.2.0” from the root project npm warn 61 more (@draft-js-plugins/buttons, @draft-js-plugins/editor, ...) npm warn npm warn Could not resolve dependency: npm warn peer react@”0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0” from mini-create-react-context@0.4.1 npm warn node_modules/mini-create-react-context npm warn mini-create-react-context@”0.4.0” from react-router@5.3.3 npm warn node_modules/react-router npm warn npm warn Conflicting peer dependency: react@17.0.2 npm warn node_modules/react npm warn peer react@”0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0” from mini-create-react-context@0.4.1 npm warn node_modules/mini-create-react-context npm warn mini-create-react-context@”0.4.0” from react-router@5.3.3 npm warn node_modules/react-router npm warn ERESOLVE overriding peer dependency npm warn While resolving: react-side-effect@2.1.1 npm warn Found: react@18.2.0 npm warn node_modules/react npm warn react@”18.2.0” from the root project npm warn 61 more (@draft-js-plugins/buttons, @draft-js-plugins/editor, ...) npm warn npm warn Could not resolve dependency: npm warn peer react@”16.3.0 || ^17.0.0” from react-side-effect@2.1.1 npm warn node_modules/react-side-effect npm warn react-side-effect@”2.1.0” from react-helmet@6.1.0 npm warn node_modules/react-helmet npm warn npm warn Conflicting peer dependency: react@17.0.2 npm warn node_modules/react npm warn peer react@”16.3.0 || ^17.0.0” from react-side-effect@2.1.1 npm warn node_modules/react-side-effect npm warn react-side-effect@”2.1.0” from react-helmet@6.1.0 npm warn node_modules/react-helmet npm warn ERESOLVE overriding peer dependency npm warn While resolving: react-virtualized@9.22.3 npm warn Found: react@17.0.2 npm warn node_modules/react-sortable-tree-patch-react-17/node_modules/react npm warn react@”17.0.0” from react-sortable-tree-patch-react-17@2.9.0 npm warn node_modules/react-sortable-tree-patch-react-17 npm warn react-sortable-tree-patch-react-17@”2.9.0” from mui-datatables@4.3.0 npm warn node_modules/mui-datatables npm warn 2 more (react-dnd-scrollzone-patch-react-17, react-dom) npm warn npm warn Could not resolve dependency: npm warn peer react@”15.3.0 || ^16.0.0-alpha” from react-virtualized@9.22.3 npm warn node_modules/react-sortable-tree-patch-react-17/node_modules/react-virtualized npm warn react-virtualized@”9.21.2” from react-sortable-tree-patch-react-17@2.9.0 npm warn node_modules/react-sortable-tree-patch-react-17 npm warn npm warn Conflicting peer dependency: react@16.14.0 npm warn node_modules/react npm warn peer react@”15.3.0 || ^16.0.0-alpha” from react-virtualized@9.22.3 npm warn node_modules/react-sortable-tree-patch-react-17/node_modules/react-virtualized npm warn react-virtualized@”9.21.2” from react-sortable-tree-patch-react-17@2.9.0 npm warn node_modules/react-sortable-tree-patch-react-17 npm warn ERESOLVE overriding peer dependency npm warn While resolving: react-virtualized@9.22.3 npm warn Found: react-dom@17.0.2 npm warn node_modules/react-sortable-tree-patch-react-17/node_modules/react-dom npm warn react-dom@”17.0.0” from react-sortable-tree-patch-react-17@2.9.0 npm warn node_modules/react-sortable-tree-patch-react-17 npm warn react-sortable-tree-patch-react-17@”2.9.0” from mui-datatables@4.3.0 npm warn node_modules/mui-datatables npm warn 1 more (react-dnd-scrollzone-patch-react-17) npm warn npm warn Could not resolve dependency: npm warn peer react-dom@”15.3.0 || ^16.0.0-alpha” from react-virtualized@9.22.3 npm warn node_modules/react-sortable-tree-patch-react-17/node_modules/react-virtualized npm warn react-virtualized@”9.21.2” from react-sortable-tree-patch-react-17@2.9.0 npm warn node_modules/react-sortable-tree-patch-react-17 npm warn npm warn Conflicting peer dependency: react-dom@16.14.0 npm warn node_modules/react-dom npm warn peer react-dom@”15.3.0 || ^16.0.0-alpha” from react-virtualized@9.22.3 npm warn node_modules/react-sortable-tree-patch-react-17/node_modules/react-virtualized npm warn react-virtualized@”9.21.2” from react-sortable-tree-patch-react-17@2.9.0 npm warn node_modules/react-sortable-tree-patch-react-17
> enlite_prime@2.2.0 preinstall > npm run npmcheckversion
> enlite_prime@2.2.0 npmcheckversion > node ./internals/scripts/npmcheckversion.js
> enlite_prime@2.2.0 postinstall > npm run build:dll
> enlite_prime@2.2.0 build:dll > node ./internals/scripts/dependencies.js
Building the Webpack DLL… asset reactBoilerplateDeps.dll.js 40.5 MiB emitted (name: reactBoilerplateDeps) asset vendors-node_modules_organism-react-ajax_build_es_src_worker_mjs.dll.js 90.5 KiB [emitted] (id hint: vendors) asset node_modules_organism-react-ajax_build_es_src_lib_dlog_mjs.dll.js 4.78 KiB [emitted] asset node_modules_keyframe-css_build_es_src_flip_mjs.dll.js 2.04 KiB [emitted] asset node_modules_keyframe-css_build_es_src_candleInTheWind_mjs.dll.js 2.04 KiB [emitted] asset node_modules_keyframe-css_build_es_src_pulsate_mjs.dll.js 1.98 KiB [emitted] asset node_modules_keyframe-css_build_es_src_breath_mjs.dll.js 1.75 KiB [emitted] asset node_modules_keyframe-css_build_es_src_fadeInUpBig_mjs.dll.js 1.64 KiB [emitted] asset node_modules_keyframe-css_build_es_src_fadeInRight_mjs.dll.js 1.64 KiB [emitted] asset node_modules_keyframe-css_build_es_src_fadeInDown_mjs.dll.js 1.63 KiB [emitted] asset node_modules_keyframe-css_build_es_src_fadeInLeft_mjs.dll.js 1.63 KiB [emitted] asset node_modules_keyframe-css_build_es_src_fadeOutRight_mjs.dll.js 1.62 KiB [emitted] asset node_modules_keyframe-css_build_es_src_fadeInUp_mjs.dll.js 1.62 KiB [emitted] asset node_modules_keyframe-css_build_es_src_fadeOutLeft_mjs.dll.js 1.62 KiB [emitted] + 5 assets 15398 modules webpack 5.91.0 compiled successfully in 8966 ms
removed 1 package, and audited 1782 packages in 14s
254 packages are looking for funding run `npm fund` for details
11 vulnerabilities (2 low, 6 moderate, 3 high)
To address issues that do not require attention, run: npm audit fix
To address all issues possible (including breaking changes), run: npm audit fix—force
Some issues need review, and may require choosing a different dependency.
Run `npm audit` for details.
Also, a couple of things: I am able to run the project when I install it using the npm install command, but I receive those error messages. If I try to enable the Firebase Authentication features, rebuild, and launch the browser just shows a spinning circle and it never finishes loading. I have tried numerous installations, but nothing has worked so far with Firebase. Also, I tried removing some of the package.json dependencies, but that doesn’t fix the same error messages (for example, remove the react-router package.
Thank you! Can’t wait to get everything working! Jason
Hi Jason,
Thanks for purchasing.
You can ignore the warning dependencies, or you can remove it in file .npmrc by adding or uncomment loglevel=silent
For firebase there’s many possible thing error and that should be in console browser, could you let me know the browser log if any error. So I can investigate it.
Regards.
Hi, When we build the source code by “npm run build” command and deploy the build folder on the production server, the new changes not reflecting automatically on the browser. It requires hard reload(Ctrl + F5) and some times clearing cache and cookies. This is very frustrating to ask user every time to do the hard reload and other staff to get the new changes on their browser. Please help to overcome this issue so that user will get the latest changes automatically. Please help on this.
Hi,
Please try to fix on your server configuration. The build result always generated a new file name (filename[hash].js). Please make sure to do not cache the .htaccess and index.html.
1. Disable Server-Side Caching:
- Configure your web server (Apache, Nginx) to disable caching for static assets.
- Use appropriate cache-control headers.
2. CDN Configuration:
- Configure your CDN to purge cached assets after a deployment.
- Use CDN-specific tools to invalidate cache.
Regards.
We are using node js for file upload and for that we have created one file called server.js within server folder. Now please help how to build the project so that both react and node js work properly in production environment.
We are facing challenges to deploy the node js code in production as after build we are unable to start back end node js.
Please try to put your upload start script in build or start:prod script
"scripts": {
"build": "npm run build && node ./server",
...
...
}
Here’s the referecence
https://stackoverflow.com/questions/70588644/file-upload-to-custom-folder-in-react
Here I have used the process.env.PUBLIC_URL so that files from public folder should work. How to set the .env file in this project so that process.env.PUBLIC_URL should work
Hi,
This template use cross-env https://www.npmjs.com/package/cross-env
For example you can add in start:prod script
"start:prod": "cross-env NODE_ENV=production PUBLIC_URL=true node server",
And if you want to use .env (dotenv) you can install and use https://www.npmjs.com/package/dotenv
Regards.
We have a file upload mechanism where we are storing the files under ”/public/images/uploads/”. Files are showing currently during development. But when we build and deploy in the production server then the files are not showing.
Please help us to resolve this issue.
Hi,
If you deploy it as static site like vercel or netlify, please try move the or copy all files in public/ there are images/ and favicons/ to the build/ folder
And if you use cloud server, please make sure the uploads/ folder exist in production server and no permission access issues.
Regards.
Do you have a figma version we can have as well?
Hi,
Sorry I don’t have the figma version. Just react only.
Regards.
Hi, Can you please suggest a good document viewer react plugin where all kind of files(jpeag,png,jpg,xlsx,ppt,docx,pptx etc) will be open smoothly.
Hi susovankaran,
For document reader, you can try this plugins:
- Free and opensource https://www.npmjs.com/package/react-doc-viewer
- Paid plugin https://pspdfkit.com/guides/web/react/
Regards.
In menu section the sub-menu titles are cropped after certain character. I want to show the full text in sub-menu drawer. Please suggest how can I achieve that.
Hi susovankaran,
To show long text you can word-wrap the text. In app/components/Sidebar/sidebar-jss.js around line:172 change white-space from nowrap to normal.
primary: {
whiteSpace: 'normal'
},
Feel free if you have any further questions.
Regards.
Thank you ,it works.
How to create dynamic menu level for sidebar?
More menu levels are only available in the Sidebar component (not the Big Sidebar). In app/api/ui/menu.js please add multilevel: true, on the first level parent.
Then add more child objects inside and attribute level: 2, keyParent: 'parent1' and soon for a deeper level.
{
key: 'menu_levels',
name: 'Menu Levels',
multilevel: true,
icon: 'sort',
child: [
{
key: 'level_1',
name: 'Level 1',
link: '/#'
},
{
key: 'level_2',
keyParent: 'menu_levels',
name: 'Level 2',
level: 2,
child: [
{
key: 'sub_menu_1',
keyParent: 'level_2',
name: 'Sub Menu 1',
level: 3,
child: [
{
key: 'deep_1',
name: 'Deeper 1',
link: '/#'
},
{
key: 'deep_2',
name: 'Deeper 2',
link: '/#'
},
]
},
{
key: 'sub_menu_2',
name: 'Sub Menu 2',
link: '/#'
},
]
},
]
},
Thank you.
accessor const columns = useMemo( () => [ { accessorFn: (row) => `${row.firstName} ${row.lastName}`, header: ‘Name’, //Add a link in a cell render Cell: ({ renderedCellValue, row }) => ( <Link to={`/profile/${row.original.username}`}> {renderedCellValue} </Link> ), },] Can columns be combined?
To merge columns you can use the colSpan attribute on the td (table data) elements to specify how many columns the cell should span.
