creativetimofficial / light-bootstrap-dashboard-react

React version of Light Bootstrap Dashboard

Light Bootstrap Dashboard React

Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple. It is built on top of React Bootstrap, using Light Bootstrap Dashboard and it is fully responsive. It comes with a big collections of elements that will offer you multiple possibilities to create the app that best fits your needs. It can be used to create admin panels, project management systems, web applications backend, CMS or CRM.

The product represents a big suite of front-end developer tools that can help you jump start your project. We have created it thinking about things you actually need in a dashboard. Light Bootstrap Dashboard React contains multiple handpicked and optimized plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customization of this product.

It comes with 6 filter colors for the sidebar (black, azure,green,orange,red,purple) and an option to have a background image.

Table of Contents

• Versions
• Demo
• Quick Start
• Documentation
• File Structure
• Browser Support
• Resources
• Reporting Issues
• Technical Support or Questions
• Licensing
• Useful Links

Versions

HTML	React	Vue	Angular

Demo

Dashboard	User Profile	Tables	Maps

View More.

Quick start

Quick start options:

• Clone the repo: git clone https://github.com/creativetimofficial/light-bootstrap-dashboard-react.git.
• Download from Github.
• Download from Creative Tim.

Documentation

The documentation for the Light Bootstrap Dashboard React is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

light-bootstrap-dashboard-react
.
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md
├── gulpfile.js
├── jsconfig.json
├── package.json
├── Documentation
│   ├── css
│   │   ├── demo.css
│   │   ├── documentation.css
│   │   └── light-bootstrap-dashboard.css
│   ├── img
│   └── tutorial-components.html
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── index.js
    ├── logo.svg
    ├── routes.js
    ├── assets
    │   ├── css
    │   │   ├── animate.min.css
    │   │   ├── demo.css
    │   │   ├── light-bootstrap-dashboard-react.css
    │   │   ├── light-bootstrap-dashboard-react.css.map
    │   │   └── light-bootstrap-dashboard-react.min.css
    │   ├── fonts
    │   │   ├── nucleo-icons.eot
    │   │   ├── nucleo-icons.svg
    │   │   ├── nucleo-icons.ttf
    │   │   ├── nucleo-icons.woff
    │   │   └── nucleo-icons.woff2
    │   ├── img
    │   │   └── faces
    │   └── scss
    │       ├── lbd
    │       │   ├── mixins
    │       │   └── plugins
    │       ├── lbdr
    │       │   ├── plugins
    │       │   └── react-differences.scss
    │       └── light-bootstrap-dashboard-react.scss
    ├── layouts
    │   └── Admin.js
    ├── components
    │   ├── FixedPlugin
    │   │   └── FixedPlugin.js
    │   ├── Footer
    │   │   └── Footer.js
    │   ├── Navbars
    │   │   └── AdminNavbar.js
    │   └── Sidebar
    │       └── Sidebar.js
    └── views
        ├── Dashboard.js
        ├── Icons.js
        ├── Maps.js
        ├── Notifications.js
        ├── TableList.js
        ├── Typography.js
        ├── Upgrade.js
        └── UserProfile.js

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

• Demo: https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/admin/dashboard?ref=lbdr-readme
• Download Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react?ref=lbdr-readme
• Documentation: https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/documentation/tutorial?ref=lbdr-readme
• License Agreement: https://www.creative-tim.com/license?ref=lbdr-readme
• Support: https://www.creative-tim.com/contact-us?ref=lbdr-readme
• Issues: Github Issues Page

Reporting Issues

We use GitHub Issues as the official bug tracker for the Light Bootstrap Dashboard React. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the Light Bootstrap Dashboard React. Check the CHANGELOG from your dashboard on our website.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

• Copyright 2022 Creative Tim (https://www.creative-tim.com?ref=lbdr-readme)
• Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)

Useful Links

More products from Creative Tim: https://www.creative-tim.com/products?ref=lbdr-readme

Tutorials: https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w

Freebies: https://www.creative-tim.com/products?ref=lbdr-readme

Affiliate Program (earn money): https://www.creative-tim.com/affiliates/new?ref=lbdr-readme

Social Media:

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Google+: https://plus.google.com/+CreativetimPage

Instagram: https://instagram.com/creativetimofficial

light-bootstrap-dashboard-react's Issues

You should not use <Link> outside a <Router>

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Main page renders.

Current Behavior

Render error: You should not use <Link> outside a <Router>

The above error occurred in the <Link> component:
index.js:2178
    in Link (created by Router.Consumer)
    in Router.Provider (created by Router.Consumer)
    in Router.Consumer (created by Route)
    in Route (created by NavLink)
    in NavLink (at Sidebar.jsx:70)
    in li (at Sidebar.jsx:62)
    in ul (at Sidebar.jsx:57)
    in div (at Sidebar.jsx:56)
    in div (at Sidebar.jsx:33)
    in Sidebar (at Dashboard.jsx:106)
    in div (at Dashboard.jsx:104)
    in Dashboard (created by Router.Consumer)
    in Router.Provider (created by Router.Consumer)
    in Router.Consumer (created by Route)
    in Route (at index.js:18)
    in Router.Consumer (created by Switch)
    in Switch (at index.js:16)
    in Router.Provider (created by Router)

Seems similar to creativetimofficial/material-kit-react#25.

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Get latest
2. npm install
3. npm start
4. Load localhost:3000

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Operating System: Win 10
• Browser and Version: Any browser
• npm list: https://gist.github.com/OliverCole/fac0e9d8c5f56f73d5ef2a4d8dd5c559

Failure Logs

See above.

how can i change css styles? plzzzz urgent!!!!

When i edit the "light-bootstrap-dashboard.css" file and i close my prompt window, and build again the project, the css styles who i change returns to its original state... how can i change it????

Sorry for my english.

Cant compile

Hey i cloned->npm install -> npm start and I got this error :) any idea how to fix this ?

Log:https://gist.github.com/trix0/ad6a312b242920c1d303bf226fd62321

cannot load CSS files when using webpack

Hello,
I think the CSS files provided only work with create-react-app ONLY. I am using webpack to bundle the client code separately. CSS files I use gets loaded and no errors but when I use your dashboard template none of the CSS gets loaded. example error as below
ERROR in ./client/assets/sass/light-bootstrap-dashboard.css?v=1.2.0
Module parse failed: Unexpected character '@' (18:0)
You may need an appropriate loader to handle this file type.
| /
| / light colors */
| @Keyframes spin {
| from {
| transform: rotate(0deg); }
@ ./client/MainRouter.js 23:0-62

All these lines fail
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard.css?v=1.2.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css";

I am sure there is a way to make it work in webpack. Can you please help me correct this for me please?

My current Webpack config file is
const path = require('path')
const webpack = require('webpack')
const CURRENT_WORKING_DIR = process.cwd()

const config = {
name: "browser",
mode: "development",
devtool: 'eval-source-map',
entry: [
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
path.join(CURRENT_WORKING_DIR, 'client/main.js')
],
output: {
path: path.join(CURRENT_WORKING_DIR , '/dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
rules: [
{
test: /.js?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: { presets: ["es2015", "react", "stage-2"] }
}
]
},
{
test: /.scss$/,
use: [
{ loader: "style-loader"}, // creates style nodes from JS strings
{ loader: "css-loader" }, // translates CSS into CommonJS
{ loader: "sass-loader" } // compiles Sass to CSS
]
},
{
test: /.(ttf|eot|svg|gif|jpg|png|css)(?[\s\S]+)?$/,
use: [
{ loader: "style-loader" }, // creates style nodes from JS strings
{ loader: "css-loader" }, // translates CSS into CommonJS
{ loader: "sass-loader" }, // compiles Sass to CSS
{ loader: "file-loader"}
]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}

module.exports = config

Feature Request: Removing React-Bootstrap

Would it be possible to offer a version without React-Bootstrap. I just find that dependency anoyying when you could implement the same components with bootstrap.

npm start error in Linux env

Hi, I downloaded it and tried to learn in Linux, but it failed with following msg, could you please share your idea?

error.txt

My font-icons and logo images have failed to load when i use the reactjs production build(npm run build)

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the old version (1.2.0)
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

The font icons and logo images used should load normally in the production build

Current Behavior

The web application runs normally but the font icons and the logo images do not load
#My reason
The font icons should load normally even in the production build
My font-icons have failed to load when i use the reactjs production build(npm run build)
Yet according to the documentation(https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files), as long as import the CSS file from JS that contains the
font icons, the fonts and css will have to go through the build pipeline,
get hashes during compilation so that browser caching works correctly, and that you get compilation errors if the files
are missing. so it must work without any other configuration

//src/index.js
import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard.css?v=1.2.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css"; //font-icons that iam interested in

so please if you have done npm run build, what changes did you make to your index.html file so that
font icons can work in your production build, i removed the relative path(/static/main.js.878999) for the css to work
The build command added the font icons in the static/media folder

Whats the difference between layout/view files

Hi,

Whats the difference between the Layout > Dashboard.jsx and Views > Dashboard.jsx files? Same question for the Pages components.

Thanks

Josh

TypeError after updating to React 16

After updating to react 16, I received a lot of errors mainly from the navigation part - Sidebar and Header. And I dont know what to do

I'm doing User Authentication using React.createContext() - https://medium.com/dailyjs/reacts-%EF%B8%8F-new-context-api-70c9fe01596b. Here's a link about it

Pleas kindly advise >.<

Having trouble with FormInputs

Im new to react, and i downloaded the free theme. Everywhere i search, its says that you handle forms with a onChange on the component, and a handleChange function. But i can't seem to make it work with your FormInput component. Sorry for the newbie question, but i've really spent some time searching and found no help so far.
Thanks !

manifest Imported Twice

I see that the line <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> is imported twice in the index.html.

Can you explain, why this was imported twice? Thanks

npm install error

I get this error when I try npm install

npm WARN deprecated [email protected]: 1.2.0 should have been a major version bump
npm ERR! Unexpected end of JSON input while parsing near '...11.6","eslint":"2.2.0'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hp\AppData\Roaming\npm-cache\_logs\2018-06-13T00_17_40_195Z-debug.log

2018-06-13T00_17_40_195Z-debug.log

Consider using functional components?

There are a lot of wrapper components from what I see.
One example is https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/src/components/StatsCard/StatsCard.jsx

It contains only markup and props which means that it doesn't really have to deal with state.
React devs usually care about this stuff and they transform such components into
stateless functions because these type of components don't go through the full component life cycle and are more performant

On the other hand the current approach is uniform in terms of code style.

Some warnnings at npm install

npm WARN deprecated [email protected]: This version of react-dom/server contains a minor vulnerability. Please update react-dom to 16.2.1 or 16.4.2+. Learn more: https://fb.me/cve-2018-6341
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN prefer global [email protected] should be installed with -g

├── UNMET PEER DEPENDENCY @types/googlemaps@^3.0.0
├── UNMET PEER DEPENDENCY @types/markerclustererplus@^2.1.29
├── UNMET PEER DEPENDENCY @types/react@^15.0.0 || ^16.0.0

│ ├─┬ UNMET PEER DEPENDENCY [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN optional Skipping failed optional dependency /react-scripts/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN optional Skipping failed optional dependency /watchpack/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of @types/googlemaps@^3.0.0 but none was installed.
npm WARN [email protected] requires a peer of @types/markerclustererplus@^2.1.29 but none was installed.
npm WARN [email protected] requires a peer of @types/react@^15.0.0 || ^16.0.0 but none was installed.
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none was installed.

Unable to npm run build

Hello! As the title said, I am unable to npm run build for it. In fact, it show me this error

Please advice!

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

hi,

When i tried to perform npm start, it gives me the below error and the site is not rendering

Compiled with warnings.

./~/source-map/lib/source-map/source-map-generator.js
8:45-52 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./~/source-map/lib/source-map/source-map-consumer.js
8:45-52 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./~/source-map/lib/source-map/source-node.js
8:45-52 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

I tried upgrading webpack, react-scripts and even source-map. NOthing worked out

Please help me how to resolve this issue

Small bug with mobileSidebarToggle

As I understand, when mobileSidebar is toggled on, an element bodyClick is created which will toggle mobileSidebar again on click.

When clicking on a sidebar view (ex. navigating from Dashboard to User Profile in the demo), the mobileSidebar is toggled again but without removing the bodyClick element, meaning that the first click of the page will toggle on the mobileSidebar again, leaving the mobileSidebar constantly toggled in the opposite position we want.

A quick fix I made for this is placing this code:
var d = document.getElementById("bodyClick"); if (d) d.parentElement.removeChild(d);
In Sidebar.jsx when the NavLinks are being placed.

How to create new customised Dashboards for different flows?

I want to create different dashboards depending on user type. How do I do this?

Thanks

Josh

Module not found: attempting to import which falls outside of the project src

Hello

So after cloning the light bootstrap dashboard react I ran npm install. Then wehn trying to run npm start I recieve the error below but the imported script is with in the src folder. Please help.

Module not found: You attempted to import /layouts/Dashboard/Dashboard.jsx which falls outside of the project src/ directory. Relative imports outside of src/ are not supp
orted. You can either move it inside src/, or add a symlink to it from project's node_modules/.

Broken link

on this page of your documentation: https://lbd-react.creative-tim.com/#/components#buttons-row
the link is broken for this specific link: https://react-bootstrap.github.io/components.html#buttons-props

You can find it under the props section of the custom buttons

Notification problem

Notification does not show up correctly on small screens

font sidebar

how to change the font in the sidebar ?

Page container is wider than the viewport

Great work on this project, there are a few places where it is not completely responsive. The footer flows out of it's container and breaks the page flow.

Tuts needed for the LBD Pro React

I like this admin theme and think it could be really useful but I'm a little disappointed in that the lack of 'how to' get started etc. If there were some video tuts for this (and not just the LDB theme) it would be great. Also a simple 'how to' step by step blog post or something would be good.

SweetAlert and Modal component issue

Hi,
I have some problems to integrate Sweet Alert or Modal component to the View with Jquery Datatables.

Here part of my code:

import React, {Component} from 'react';
// jQuery plugin - used for DataTables.net
import $ from 'jquery';
import {Grid, Row, Col} from 'react-bootstrap';

import Card from 'components/Card/Card.jsx';
import Button from 'elements/CustomButton/CustomButton.jsx';
import SweetAlert from 'react-bootstrap-sweetalert';
require('datatables.net-responsive');
$.DataTable = require('datatables.net-bs');

class Main extends Component {
constructor(props){
super(props);
this.state = {
alert: null
};
}
warningWithConfirmMessage(){
this.setState({
alert: (
<SweetAlert
warning
style={{display: "block",marginTop: "-100px"}}
title="Are you sure?"
onConfirm={() => this.successDelete()}
onCancel={() => this.hideAlert()}
confirmBtnBsStyle="info"
cancelBtnBsStyle="danger"
confirmBtnText="Sí, bórralo!"
cancelBtnText="Cancelar"
showCancel
>
¿Esta seguro de borrar el usuario?

)
});
}
successDelete(){
this.setState({
alert: (
<SweetAlert
success
style={{display: "block",marginTop: "-100px"}}
title="Deleted!"
onConfirm={() => this.hideAlert()}
onCancel={() => this.hideAlert()}
confirmBtnBsStyle="info"
>
Your imaginary file has been deleted.

)
});
}
hideAlert(){
this.setState({
alert: null
});
}
return (

        <Card title="Usuarios del sistema" content={<div className = "fresh-datatables" >
         <Button fill onClick={this.warningWithConfirmMessage.bind(this)}>Try me!</Button>

The main problem is that I dont get any errors, but the component is never showed..
in other parts of my project does not work either.

Can you help me??

regards

Consider adding backend hooks

It's really confusing how real backend routing is abstracted from us and the first router we see includes the ui right away.

There's no space to add an actual backend logic/listeners on the same port.

Documentation for adding light-bootstrap-dashboard-react into existing react project

hello
Is there any documentation for adding light-bootstrap-dashboard-react into existing react project

Is chart.js used?

I see references to chart.js and react-chartjs-2
https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/package.json#L6

It seems that the dashboard only uses chartist.
Maybe clean dependencies which are not used.
This will improve installation time a bit.

Updating dependencies

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting

Updated project

Current Behavior

The project will work with the current dependencies

Failure Information (for bugs)

There are several outdated dependencies that may have vulnerabilities.

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

notably, Bootstrap and React-DOM need to be updated but several other decencies are out of date.

Additional Information

This product is absolutely awesome, but using any Node-based project with potentially vulnerable dependencies is a deal-breaker for me. I just got a virus on my computer that spawned from a vulnerability linked to Nodemon. It was really bad. Any major library could potentially be infected due to the striated nature of dependency trees, and thus, it is of the utmost important that dependencies are kept as up-to-date as possible; especially ones that have been marked as vulnerable by the registry.

Note: I have tried updating the dependencies but I broke my app and didn't know how to fix it.

Please help. I will definitely buy the pro version and recommend to colleagues as long as this is an updated product.

Missing unit tests

Are we planning on writing any Unit/Snapshot/Integration tests?

Debug in VSCode

I had been playing with create-react-app and was able to debug it using VSCode. I removed it and added in LBD and now I'm not getting the same behavior. Have you had anyone who has used VSCode to debug this or run into this issue?

Here's my launch.json setting:

{ //make sure the Debugger for Chrome extension is installed
            "type": "chrome",
            "request": "launch",
            "name": "Front-End",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}/Nri.ProposalTracker.Ui/front-end/src",
            "preLaunchTask": "start-devserver",
            "userDataDir": "${workspaceRoot}/.vscode/.chrome",
            "sourceMapPathOverrides": {
                "webpack:///*": "*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///./~/*": "${webRoot}/node_modules/*"                
            }
        }

And here's my tasks.json setting:

{
            "taskName": "start-devserver",
            "command": "yarn start",            
            "type": "shell",
            "options": {
                "cwd": "${workspaceRoot}/Nri.ProposalTracker.Ui/front-end"
            },
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": false,
                "panel": "shared"
            }
        } 

Typo in FormInputs, properties field name

https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/src/components/FormInputs/FormInputs.jsx#L19

Failed to compile after install

Can't start app?
./src/index.js
Module not found: Can't resolve 'containers/App/App.jsx'

Add a submenu in the sidebar

Add new layout to index.jsx

Hi,
I've tried to add my own component into this application.

What i've done:
added my component into the indexRoutes, my indexRoutes looks like below,

var indexRoutes = [ { path: "/testing", name: "testing", component: Testing }, { path: "/", name: "Home", component: Dashboard }, ];

Result:
It only renders one route, in my case, "/testing" route. What am i doing wrong?
Thanks

syntax problem in index.js route

Route not have attr "to", maybe need write attr "path"?

How to change sidebar background image

I try changing copy of default sidebar background, but no background image is shown.

Using Components to React Native project

Hello,

I want to use this product on a react native project using Expo.How can I incorporate the react dashboard into react native project??

Regards
Nipa

Failed to load the sidebar image and react logo image in the production build

!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

I expect the sidebar image and react logo image at the top load normally in the production build.

Current Behavior

The sidebar image and react logo image cannot load in the production build, I can see the image not found in the browser console

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. npm run build
2. Use any static server to serve the react build files
3. you get it...

Context

who has managed to load the sidebar3.jpg image or react logo image at the top in the production build.
Everything works perfectly in the development mode but I had to make a couple of changes
to the index.html file and static\css\main.33ec52e9.css to ensure that pixel den icons
load properly and also javascript files in the production mode(build mode)
look at my current production index.html.

<link rel="manifest" href="manifest.json"><!doctype html><html lang="en"><head>
  <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,
  shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" 
  href="manifest.json"><link rel="shortcut icon" href="favicon.ico">
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon.png"><title>Biz Watch - Retailer</title>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"
   rel="stylesheet"><link href="//fonts.googleapis.com/css?family=Roboto:400,700,300" rel="stylesheet">
   <link href="static/css/main.33ec52e9.css" rel="stylesheet"></head>
   <body><noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div><script type="text/javascript" src="static/js/main.964c9296.js"></script>
   </body></html>

css file

src:url(../media/Pe-icon-7-stroke.71394c0c.eot);
   src:url(../media/Pe-icon-7-stroke.71394c0c.eot?#iefixd7yf1v) format("embedded-opentype"),
   url(../media/Pe-icon-7-stroke.b38ef310.woff) format("woff"),
   url(../media/Pe-icon-7-stroke.01798bc1.ttf) format("truetype"),
   url(../media/Pe-icon-7-stroke.c45f7de0.svg#Pe-icon-7-stroke) format("svg");

//so how did u load the sidebar image becuase i have tried all tricks but all in vain..
yet the sidebar3.jpg is imported in the sidebar.jsx file so it must be automatically put in the
build folder after build process.

• Device:
• Operating System:
• Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.

Profile picture missing

The profile picture seems to be missing on User Profile page

[Bug] failure to start: Cannot find module '@csstools/normalize.css'

Version

1.3

Reproduction link

https://www.creative-tim.com/new-issue/light-bootstrap-dashboard-react

Operating System

linux Ubuntu 18.04

Device

Dell XPS 15

Browser & Version

Chrome

Steps to reproduce

clone the repo
$ npm install
$ npm start

What is expected?

The browser to start

What is actually happening?

Failed to compile.

./src/assets/css/pe-icon-7-stroke.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/assets/css/pe-icon-7-stroke.css)
Error: Cannot find module '@csstools/normalize.css'

---

Solution

Additional comments

How to integrate APIs in this template

Can anyone please let me know how to integrate APIs using this template.

I have tried to integrate APIs using 'axios' in this template where APIs created in Node.js.
I got this error in the browser

Access to XMLHttpRequest at 'http://localhost:3000/user/import' from origin 'http://localhost:4000' 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.

  `constructor(props) {
	super(props);
	this.state = {
		users: []
	};
	this.load_table();
}

componentDidMount() {
	this.load_table();
}

async load_table(){

	const instance = await axios.post('http://localhost:3000/user/import',
		{	headers: 
				{'x-access-token': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkNTY1YWUwYWE3NjNiNDlhNDY1ODQ1YyIsImlhdCI6MTU2NjA0ODA4MiwiZXhwIjoxNTY2MTM0NDgyfQ.aGX0AhwL-9DrZZ20F5vJqPnqqYRThtWlaDe_GfGW3kU'
				}
		}
		);
	console.log('instance>>',instance);
	
	this.setState({
		users: []
	});

}

How to customize buttons colors

!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting

Current Behavior

What is the current behavior?

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. step 1
2. step 2
3. you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Device:
• Operating System:
• Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.

Panels in demo generate: TypeError: Cannot read property '_owner' of undefined when expanded

On the View Live Demo page (and the downloaded same) Navigate
Sidebar->Components->Panels
on the panels page attempt expand either the standard bootstrap or accordion panel
Expected to see the sub-text in an expanded region.

On the creative tim website, got a blank page.
Using the downloaded code received the following message:

TypeError: Cannot read property '_owner' of undefined
Panels.componentDidUpdate
C:/_src/_BI_Alternative/Knoa-Proto/src/views/Components/Panels.jsx:18
  15 | class Panels extends Component {
  16 |   componentDidUpdate(e) {
  17 |     if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac()) {
18 |      
this._reactInternalInstance._currentElement._owner._instance._reactInternalInstance._currentElement._owner._instance.componentDidUpdate(
  19 |         e
  20 |       );
  21 |     }

Local development server environment is
Windows 10
Chrome 73.0.3683.86
light-bootstrap-dashboard-pro-react 1.1.1
node.js v9.3.0

package.json
bootstrap 3.3.7
react 16.2.0

The following appears in the Chrome Dev console.

Panels.jsx:18 Uncaught TypeError: Cannot read property '_owner' of undefined
    at Panels.componentDidUpdate (Panels.jsx:18)
    at commitLifeCycles (react-dom.development.js:8778)
    at commitAllLifeCycles (react-dom.development.js:9946)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at commitRoot (react-dom.development.js:10050)
    at performWorkOnRoot (react-dom.development.js:11017)
    at performWork (react-dom.development.js:10967)
    at batchedUpdates (react-dom.development.js:11086)
    at batchedUpdates (react-dom.development.js:2330)
    at dispatchEvent (react-dom.development.js:3421)
componentDidUpdate @ Panels.jsx:18
commitLifeCycles @ react-dom.development.js:8778
commitAllLifeCycles @ react-dom.development.js:9946
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
commitRoot @ react-dom.development.js:10050
performWorkOnRoot @ react-dom.development.js:11017
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
index.js:2178 The above error occurred in the <Panels> component:
    in Panels (created by Route)
    in Route (at Dashboard.jsx:131)
    in Switch (at Dashboard.jsx:112)
    in div (at Dashboard.jsx:102)
    in div (at Dashboard.jsx:99)
    in Dashboard (created by Route)
    in Route (at index.js:16)
    in Switch (at index.js:14)
    in Router (created by HashRouter)
    in HashRouter (at index.js:13)

npm run build error "Lexical error "

!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [ X] I am running the latest version
• [X ] I checked the documentation and found no answer
• [X ] I checked to make sure that this issue has not already been filed
• [ X] I'm reporting the issue to the correct repository (for multi-repository projects)

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Device: MacBook Pro
• Operating System: MacOS 10.13.6
• nodejs : 12.4.0

Failure Logs

I can not run npm run build. there was an error

Lexical error on line 1: Unrecognized text.
Erroneous area:
1: 100% - $sidebar-width
^.........^

Please include any relevant log snippets or files here.
2019-06-15T04_24_13_228Z-debug.log

Check the render method of `Header`.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Header. - not even sure where to find this - new to react

Custom sidebar color

According to the docs, this template

comes with 6 filter colors for the sidebar (black, azure, green, orange, red, purple) and an option to have a background image.

In my case, I've removed the background image and now would like to change the background color of the sidebar to #0b7c9c.

I tried to achieve this by removing the data-color attribute from this element in Sidebar.jsx

<div id="sidebar" className="sidebar" data-color="black">

And adding a CSS rule

#sidebar {
  background-color: #0b7c9c;
}

But the sidebar still has a black background color. How can I change the background color of the sidebar to #0b7c9c?

Sub-menu sidebar

How to add sub menus in the sidebar?

Highlighting more than one menu in sidebar

Is there support for RTL languages?

I could not find a simple way to RTL the display:

• Sidebar to the right
• Reverse order for table columns
• etc...