erdkse / adminlte-3-react

React 18.3.1 start-up project with AdminLTE 3.2.0 template

Admin LTE 3.2.0 - React 18.3.1

This repository is a form of original AdminLTE project. It is aim to use AdminLTE template with React.

Demo

Online demo: https://erdkse.com/projects/preview/adminlte-react

To login website you can create a user. All authenication related features are working and live!

Firebase is added as backend provider to increase better user experince.

Development

First, install the dependencies with npm install command.

You need to run npm run firebase:start on a different terminal and keep it running.

Then, in the project directory, you can run: npm run dev

Open http://localhost:5173 to view it in the browser.

License

Released 2021 by Erdi Köse

Support for more

If you liked my work and would like to support for my expenses like server costs, please; (ie. Firebase)

adminlte-3-react's Issues

Strange Horizontal overflow

Whenever the content wrapper gets bigger it appears a strange horizontal overflow. It also happens when you resize the window.

Chrome

Firefox

Unable to install

Downloaded, ran npm install and got the following output:

> npm install
npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated [email protected]: Package renamed as '@messageformat/core', see messageformat.github.io for more details. 'messageformat' will eventually provide a polyfill for Intl.MessageFormat, once it's been defined by Unicode & ECMA.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause 
a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path C:\Users\[redacted]\Documents\Git Projects\adminlte-3-react-main\adminlte-3-react-main\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: D:\Program Files\nodejs\node.exe C:\Users\[redacted]\Documents\Git Projects\adminlte-3-react-main\adminlte-3-react-main\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'D:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'C:\\Users\\[redacted]\\Documents\\Git Projects\\adminlte-3-react-main\\adminlte-3-react-main\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb find Python Python is not set from command line or npm configuration
npm ERR! gyp verb find Python Python is not set from environment variable PYTHON
npm ERR! gyp verb find Python checking if "python3" can be used
npm ERR! gyp verb find Python - executing "python3" to get executable path
npm ERR! gyp verb find Python - "python3" is not in PATH or produced an error
npm ERR! gyp verb find Python checking if "python" can be used
npm ERR! gyp verb find Python - executing "python" to get executable path
npm ERR! gyp verb find Python - executable path is "C:\Python310\python.exe"
npm ERR! gyp verb find Python - executing "C:\Python310\python.exe" to get version
npm ERR! gyp verb find Python - version is "3.10.1"
npm ERR! gyp info find Python using Python version 3.10.1 found at "C:\Python310\python.exe"
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 17.5.0
npm ERR! gyp verb command install [ '17.5.0' ]
npm ERR! gyp verb install input version string "17.5.0"
npm ERR! gyp verb install installing version: 17.5.0
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version is already installed, need to check "installVersion"
npm ERR! gyp verb got "installVersion" 9
npm ERR! gyp verb needs "installVersion" 9
npm ERR! gyp verb install version is good
npm ERR! gyp verb get node dir target node version installed: 17.5.0
npm ERR! gyp verb build dir attempting to create "build" dir: C:\Users\[redacted]\Documents\Git Projects\adminlte-3-react-main\adminlte-3-react-main\node_modules\node-sass\build
npm ERR! gyp verb build dir "build" dir needed to be created? C:\Users\[redacted]\Documents\Git Projects\adminlte-3-react-main\adminlte-3-react-main\node_modules\node-sass\build
npm ERR! gyp verb find VS msvs_version not set from command line or npm config
npm ERR! gyp verb find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp verb find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp verb find VS looking for Visual Studio 2015
npm ERR! gyp verb find VS - not found
npm ERR! gyp verb find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack     at VisualStudioFinder.fail (C:\Users\[redacted]\Documents\Git Projects\adminlte-3-react-main\adminlte-3-react-main\node_modules\node-gyp\lib\find-visualstudio.js:121:47)
npm ERR! gyp ERR! stack     at C:\Users\[redacted]\Documents\Git Projects\adminlte-3-react-main\adminlte-3-react-main\node_modules\node-gyp\lib\find-visualstudio.js:74:16
npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (C:\Users\[redacted]\Documents\Git Projects\adminlte-3-react-main\adminlte-3-react-main\node_modules\node-gyp\lib\find-visualstudio.js:351:14) 
npm ERR! gyp ERR! stack     at C:\Users\[redacted]\Documents\Git Projects\adminlte-3-react-main\adminlte-3-react-main\node_modules\node-gyp\lib\find-visualstudio.js:70:14
npm ERR! gyp ERR! stack     at C:\Users\[redacted]\Documents\Git Projects\adminlte-3-react-main\adminlte-3-react-main\node_modules\node-gyp\lib\find-visualstudio.js:372:16
npm ERR! gyp ERR! stack     at C:\Users\[redacted]\Documents\Git Projects\adminlte-3-react-main\adminlte-3-react-main\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack     at C:\Users\[redacted]\Documents\Git Projects\adminlte-3-react-main\adminlte-3-react-main\node_modules\node-gyp\lib\util.js:33:16
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:406:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:526:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1090:16)
npm ERR! gyp ERR! System Windows_NT 10.0.19044
npm ERR! gyp ERR! command "D:\\Program Files\\nodejs\\node.exe" "C:\\Users\\[redacted]\\Documents\\Git Projects\\adminlte-3-react-main\\adminlte-3-react-main\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\[redacted]\Documents\Git Projects\adminlte-3-react-main\adminlte-3-react-main\node_modules\node-sass
npm ERR! gyp ERR! node -v v17.5.0
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm start is not working (dist folder not found)

I've just download the source and run "npm install"and "npm start".

There is a error message:

Error: ENOENT: no such file or directory, stat '/tmp/adminlte-3-react/dist/index.html'

I guess that dist folder was not created.

unable to login for testing

Hello there, am unable to login to the site as per below

Sidebar Menu

Thanks 😍

Firebase: how to specify the Firebase environment correctly?

Hi, how to specify the Firebase config in the production correctly? I tried to put the below in but did not work. Tks.

The firebase config like this:

VITE_NODE_ENV=production VITE_FIREBASE_CONFIG={ apiKey: "===============", authDomain: "=====saas.firebaseapp.com", projectId: "====-saas", storageBucket: "=======-saas.appspot.com", messagingSenderId: "=====", appId: "1:=====:web:4d222293978711fc8d96ea", measurementId: "G-P======" };

scss compatibilities

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

Not working for mobile

For some reason the app is not working on mobile, do you know what is happening in this case?

Sidebar dont close in tablet when user tab an one option or suboption.

When user click in a option of sidebar in tablet, sidebar dont collapse.

This happens when you click on an option that has submenus.

[Nice to have] Publish as npm package

It would be amazing if this could be served as an npm package, to allow for easy implementation into existing projects.
I imagine that would simplify the process loads, and also give the chance of having an easy way of propagating necessary changes, as opposed to jury rigged implementations to achieve similar ends.

cors is blocking

Access to XMLHttpRequest at 'https://adminlte-gatekeeper.herokuapp.com/v1/auth/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Error: Cannot find module './lenient'

npm start
npm WARN config global --global, --local are deprecated. Use --location=global instead.

[email protected] start
craco start

node:internal/modules/cjs/loader:936
throw err;
^

Error: Cannot find module './lenient'
Require stack:

• C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules\yn\index.js
• C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules\ts-node\dist\util.js
• C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules\ts-node\dist\index.js
• C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules\cosmiconfig-typescript-loader\dist\loader.js
• C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules\cosmiconfig-typescript-loader\dist\index.js
• C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules@craco\craco\lib\config.js
• C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules@craco\craco\scripts\start.js
  at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
  at Function.Module._load (node:internal/modules/cjs/loader:778:27)
  at Module.require (node:internal/modules/cjs/loader:1005:19)
  at require (node:internal/modules/cjs/helpers:102:18)
  at Object. (C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules\yn\index.js:2:17)
  at Module._compile (node:internal/modules/cjs/loader:1105:14)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
  at Module.load (node:internal/modules/cjs/loader:981:32)
  at Function.Module._load (node:internal/modules/cjs/loader:822:12)
  at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  'C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules\yn\index.js',
  'C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules\ts-node\dist\util.js',
  'C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules\ts-node\dist\index.js',
  'C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules\cosmiconfig-typescript-loader\dist\loader.js',
  'C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules\cosmiconfig-typescript-loader\dist\index.js',
  'C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules\@craco\craco\lib\config.js',
  'C:\Users\Coop\Documents\prac\react\react_adminlte_demo\adminlte-3-react\node_modules\@craco\craco\scripts\start.js'
  ]
  }

data-card-widget="maximize" is not working

Could you please check data-card-widget="maximize" is not working

Gatekeeper.js cannot update

I can't edit anything in this file.
Every time you modify the code, it will run as before.

class Gatekeeper { constructor() { this.LOCALSTORAGE_IDENTIFIER = 'gatekeeper_token'; this.URL = 'https://test-local'; this.payload = { accountID: null, clientURL: null, browserID: null, }; this.tab = new tab_1.Tab(); fingerprintjs_1.default.load() .then((fp) => fp.get()) .then(({ visitorId }) => (this.payload.browserID = visitorId)); } }

Gatekeeper Server API and Gatekeeper-client-sdk

The Gatekeeper-client-sdk project doesn't have a github and its pointed to a 3rd party website by the creator (https://gatekeeper-api.profabric.tech/v1/auth/login). As there's no documentation for the gatekeeper-client-sdk nor documentation on how to update the login to some other server or implementation.

FWIW, its a base64 encoded JWT response: (header).(payload).(signature)

Modal

Hi, I wonder if it is possible to use bootstrap, admin lte 3 modals in this project. Thanks.

Menu Sidebar is not scrolling if page height is bigger.

Hi Erdkse,

I was looking for one solution where I want the page to be work exactly like below url

https://adminlte.io/themes/v3/index.html

But it seems the page is working like right now below url

https://adminlte.io/themes/v3/index.html

The problem is I want that page should not scroll if I am scrolling the side menu bar. I checked the AdminLTE 3 code and found that they are using OverlayScrollbars.

If you know how to integrate in your code that will be great help.

Regards,
Ashish

profabric error

Hello,

I have this error in prorabric components. I want to use my own webpack config from the project I'm trying to import adminlte into. What are these profabric components and why are they used ?
Thank you for any information.

ERROR in ../node_modules/@profabric/react-components/index.js 2:0-72
Module not found: Error: Can't resolve '@profabric/web-components/loader' in 'C:\temp\Projects\BackendAndWeb\App\ClientApp\node_modules\@profabric\react-components'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@profabric/web-components/loader' failed to resolve only because it
was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./theme_new/pages/profile/TimelineTab.tsx 28:25-63
 @ ./theme_new/pages/profile/Profile.tsx 53:36-60
 @ ./theme_new/App.tsx 61:32-74
 @ ./theme_new/index.tsx 24:28-44

AdminLTE Version 4

REJack expects version 4 of AdminLTE to launch pretty soon (last estimate was April). Do you have any plans to update this library or support a new one?

Both react-app-rewired and @craco/craco are used. I think maybe you don't need the two of them at the same time?

Both libs serve the same purpose. So, maybe remove one of them from package.json ?

.env file doesn't work

Hi,

The .env file (I tried other declinations, like .env.local, .env.development) doest seems to work.

Even the process.env.REACT_APP_USERS_API_URL you provided is undefined.

Is there something I'm missing ?

Thx

Sidebar dont close in tablet.

When user click in i fas fa bars and now user click out Sidebar, Sidebar dont close.

[Question] How to customize the splash screen?

Nvm, I found the solution. Sorry for the noise.

Tq.

Errors installing and running

I am using react 17.0.2 and i get these errors , please assist

2021-04-07T08_57_38_992Z-debug.log

Dashboard is running with SSL on Local

Editing the previous issue because I noticed Vite is running localhost on secure mode with SSL certified. This is hitting an error page or host, since there is no SSL for localhost.

Hope you check on this and fix it.

Thanks, regards

[Question] how to manage adminlte 3 required js files in index.html

Hi
I looking for adminlte js files <jquery, adminlte.js,demo.js and so on> that usually added in index.html, how to load it without called in index.html or import it in index.js or app.js?

Can't start

I'm new to this, sorry

I just cloned this repo to a local

tried to run npm start and it gives me this error:

[email protected] start
craco start

"craco" is not recognized as an internal or external command,
executable program or batch file.

Sidebar issue: the fa-angle icon (right or down) overlaps with the nav-icon when the sidebar is collapsed.

Hi. The angle icon overlaps with the nav-icon whenever the sidebar is collapsed. I checked the demo on the AdminLTE3 website, and it doesn't have the same behavior. see images below:

it doesn't see the axios library.

hi, i want to use axios in auth.js file but it doesn't see this code.
import {axios} from 'axios';

auto logout when reload page

After i login, i press reload button of browser then i have to login again. How can i fix this?