Thank you for Purchasing

Dandelion Pro - React Admin Dashboard Template

Version 2.6.1

• Created : 18 Nov 2018
• Latest Update : 27 Nov 2024

What is Dandelion Pro?

Template Feature

• Modern Technologies. Built with one of most popular javascript library React.JS and Redux Tookit
• Premium designs. Simple and elegant style with many variant gradient and flat theme
• Multiple layout orientation. Sidebar Menu and Navigation Menu layout
• 40+ react components and modules which reusable and easy to modify
• Eyes are more focused. Come with dark and light mode
• Next Generation JavaScript written in ES6
• Responsive design Based on standard 12 Grid System
• High Performance. Styling with JSS (CSS in JS) and Async Code Splitting
• Clean code maintained by eslint
• Fully vector icons and font icons
• Direct code preview. Get source code easier without open files.
• And many more...

Files and Folder Structure

├── app           # main application source code
│   ├── actions   # redux action dispatchers and action types
│   ├── api       # api sample dummy data collection and ui initial value
│   │   ├── apps
│   │   ├── chart
│   │   ├── dummy
│   │   ├── icons
│   │   ├── images
│   │   ├── palette
│   │   └── ui
│   ├── app.js
│   ├── components    # UI Components
│   │   ├── Badges
│   │   ├── BreadCrumb
│   │   ├── Calculator
│   │   ├── Calendar
│   │   ├── CardPaper
│   │   ├── Cart
│   │   ├── Chat
│   │   ├── Comments
│   │   ├── Contact
│   │   ├── Counter
│   │   ├── Divider
│   │   ├── DynamicInvoice
│   │   ├── Email
│   │   ├── Error
│   │   ├── Forms
│   │   ├── Gallery
│   │   ├── GuideSlider
│   │   ├── Header
│   │   ├── ImageLightbox
│   │   ├── LandingPage
│   │   ├── Loading
│   │   ├── Notification
│   │   ├── Pagination
│   │   ├── Panel
│   │   ├── PapperBlock
│   │   ├── Product
│   │   ├── Profile
│   │   ├── Quote
│   │   ├── Rating
│   │   ├── Search
│   │   ├── Sidebar
│   │   ├── SocialMedia
│   │   ├── SourceReader
│   │   ├── Tables
│   │   ├── TaskBoard
│   │   ├── TemplateSettings
│   │   ├── TextEditor
│   │   ├── Widget
│   │   └── index.js
│   ├── config         # enviroment and other global configuration
│   ├── containers     # application wrapper and root template
│   │   ├── App
│   │   ├── Charts
│   │   ├── Dashboard
│   │   ├── Forms
│   │   ├── LandingPage
│   │   ├── LanguageProvider
│   │   ├── Layouts
│   │   ├── Maps
│   │   ├── NotFound
│   │   ├── Pages
│   │   ├── Parent
│   │   ├── Tables
│   │   ├── Templates
│   │   ├── UiElements
│   │   └── pageListAsync.js
│   ├── index.html    # main HTML
│   ├── redux         # redux settings
│   ├── styles        # style declaration witc scss and css
│   └── utils         # redux saga configuration
├── internals         # webpack and app configuration
│   ├── config.js
│   ├── generators
│   ├── mocks
│   ├── scripts
│   ├── testing
│   └── webpack
├── package-lock.json
├── package.json      # npm package manager file 
├── postcss.config.js # css config
├── public            # all public assets directory
│   ├── favicons
│   └── images  
├── server            # backend configuration
│   ├── argv.js
│   ├── index.js
│   ├── logger.js
│   ├── middlewares
│   ├── port.js
│   ├── rawdocs.js
│   └── rawicons.js
└── yarn.lock
                        

Installation and Running App

• Connect to the internet
• Install NodeJs from NodeJs Official Page
• Unzip the Dandelion Pro file to a folder in your computer
• Open Terminal
• Go to your file project (where you've unzipped the product)
• Install Modules
  Install module dependencies by run this script in terminal

  npm install

  It will download some necessary dependencies, it could take some minutes, just wait until finish.
• Build Webpack DLL dependencies(If necessary)
  Install module dependencies by run this script in terminal. This process ussualy done by 'npm install', but if system require it just run this command:

  npm run build:dll

• Run App
  After build static library, then run the app.

  npm start

  The process should be take about 1-2 minutes.
  
  INFO:
  - Just run this script whenever you want start the project.
  - Run npm install again if you have new module dependencies,
  
• Navigate to http://localhost:3000

Deployment

Production

• First you have to clone/copy the all project code in your hosting/cloud server.
• Open your console to access the hosting/cloud server.
• If you haven't install the dependencies before, please run npm install
• After that you need to build the production assets first

  npm run build

  It usually take longer time than development to generate and compress production code. The generated files will be placed in build/
• Then start the app

  npm run start:prod

• -------- OR -------
• If you want run it in background you may try PM2 https://www.npmjs.com/package/pm2. Then run this command:

  node node_modules/.bin/cross-env NODE_ENV=production pm2 start server

• Then navigate to http://localhost:3000

Offline Access

Enable offline access

This is a feature from React Boilerplate which has focus of 'offline first'. So will make easier to build Progressive Web Aplication. The next frontier in performant web apps: availability without a network connection from the instant your users load the app.

• Open app/app.js At very bottom just enable(uncomment) this code

  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/service-worker.js').then(registration => {
        console.log('SW registered: ', registration);
      }).catch(registrationError => {
        console.log('SW registration failed: ', registrationError);
      });
    });
  }
  }

• Next, open /internals/webpack/webpack.prod.babel.js Then enable(uncomment) the webpack plugin import

  const WorkboxPlugin = require('workbox-webpack-plugin');

  and enable(uncomment) WorkboxPlugin webpack config around line:87

  new WorkboxPlugin.GenerateSW({
    // these options encourage the ServiceWorkers to get in there fast
    // and not allow any straggling "old" SWs to hang around
    clientsClaim: true,
    navigateFallback: '/index.html',
    skipWaiting: true,
    maximumFileSizeToCacheInBytes: 5242880
  }),

• Go to console, then do the same as deployment method above. Build the site

  npm run build

• After finish run the site in production mode

  npm run start:prod

• Then navigate to http://localhost:3000
• WARNING: Do not cache build/.htaccess and build/service-worker.js in your server, required for offline-first updates.
• Note 1: With this feature all scripts will be stored in Local Storage, so can be accessed even offline. And if any updates, The service-worker.js will handle it when browser reload or re-open the site. Once update received, the site won't changes immediately, because the status is pending/waiting, Please run the second reload to set the update as active.
  
• Note 2: After build finish then when you access it on local, all of the assets will be stored in local storage. So when You make a change the result will not update, because browser will take the code from cache.
  But you can clear it by clear in local storage by following this step.
  
  Google Chrome and Opera
  1. Open "Developer Tools" or Right click > Inspect element
  2. Then go to tab "Application"
  3. Choose "Clear Storage" in left sidebar
  4. Scroll down then You will see button "Clear site data"
  5. Just click it to clear all stored assets
     
  
  
  Safari and Firefox
  1. Open "Developer Tools" or Right click > Inspect element
  2. Then go to tab "Storage"
  3. Choose "Local Storage" in left sidebar
  4. Just right click > Delete All
     

Troublehooting

Here's most common error problem when installation and first setup project

Basic Code Structure

Main HTML

The HTML root in /app/index.html

You can put google analytics, font icon, embeded fonts, etc here.

Main JS

The JS root in /app/app.js. This is the entry file for the application, only setup and boilerplate code.

Directory Alias

You can find directory alias settings in /internals/webpack/webpack.base.babel.js

Template Architecture

This is template architecture in diagram visualization. Click diagram or full screen button to show in new tab with full screen

Components & Containers

This diagram bellow explain whole project structure.

Routing

This diagram explain routing structure from api menu to page routing and every available layout(containers) to components.

Redux

Explain CRUD data structure from dummy api read by components then created and manipulated by reducers.

Design & Themes

The redux structure about manipulating state that related ui changes.

Starter Project

• You can go through to starter-project/ folder
• Connect to the internet
• Open Terminal
• The next installation process are same like was described above
• Install module dependencies by run this script in terminal

  npm install

  It will download some necessary dependencies, it could take some minutes, just wait until finish.
• Build Webpack DLL dependencies(If necessary)
  Install module dependencies by run this script in terminal. This process ussualy done by 'npm install', but if system require it just run this command:

  npm run build:dll

• Run App
  After build static library, then run the app.

  npm start

  
  
  INFO:
  - Just run this script whenever you want start the project.
  - Run npm install again if you have new module dependencies,
  
• Navigate to http://localhost:3001
• After this you can can start develop your app with this initial project. And will bo more suitable when use dandelion-pro as a reference

Change Layout and Theme

• Open app/redux/modules/ui.js
• Then change the initialState value. Here's the available api:

  Key	Type	Available Value	Example
  theme:	String	'greenOrangeTheme', 'purpleRedTheme', 'skyBlueTheme', 'magentaTheme', 'purpleTheme', 'pinkGreenTheme', 'orangeTheme', 'yellowCyanTheme', 'blueCyanTheme', 'blueTheme', 'yellowBlueTheme', 'cyanTheme', 'redTheme', 'greyTheme'	theme: 'pinkGreenTheme'
  type:	String	'light', 'dark',	type: 'dark'
  gradient:	Boolean	true, false,	gradient: true
  decoration:	Boolean	true, false,	decoration: true
  bgPosition:	String	'half', 'full', 'header',	bgPosition: 'half
  layout:	String	'left-sidebar', 'right-sidebar', 'top-navigation', 'mega-menu',	layout: 'left-sidebar

  
  Here's the complete code

  // file: app/redux/modules/ui.js
  
  const initialState = {
    /* Settings for Themes and layout */
    theme: 'pinkGreenTheme',
    type: 'light', // light or dark
    gradient: true, // true or false
    decoration: true, // true or false
    bgPosition: 'half', // half, header, full
    layout: 'left-sidebar', // left-sidebar, right-sidebar, top-navigation, mega-menu
    /* End settings */
    sidebarOpen: true,
    pageLoaded: false,
    palette: List([
      { name: 'Fruit', value: 'greenOrangeTheme' },
      { name: 'Purple', value: 'purpleRedTheme' },
      { name: 'Ocean Sky', value: 'skyBlueTheme' },
      { name: 'Rose Gold', value: 'magentaTheme' },
      { name: 'Ultra Violet', value: 'purpleTheme' },
      { name: 'Botani', value: 'pinkGreenTheme' },
      { name: 'Ubuntu', value: 'orangeTheme' },
      { name: 'Patriot', value: 'brownTheme' },
      { name: 'Vintage', value: 'yellowCyanTheme' },
      { name: 'Mint', value: 'blueCyanTheme' },
      { name: 'Deep Ocean', value: 'blueTheme' },
      { name: 'School', value: 'yellowBlueTheme' },
      { name: 'Leaf', value: 'cyanTheme' },
      { name: 'Metal Red', value: 'redTheme' },
      { name: 'Grey', value: 'greyTheme' },
    ]),
    subMenuOpen: []
  };
  

Permanent UI Setting

All UI configuration above will be reseted once page reload. To make it permanent you can store the config in local storage with redux-persist plugins.

• Open app/redux/configureStore.js
• In persistConfig.whitelist add the reducer name['ui']

  // file: app/redux/configureStore.js
  const persistConfig = {
    key: 'dandelion',
    storage,
    whitelist: ['ui']
  };                          
                            

• Make some UI changes, i.e dark-mode then reload the browser, then ui changes will be persisted.
• Note: you can also add another reducer name to whitelist to save the state in local storage. If you want to reset them, just clear the local storage.

Theme Palette Color

This theme has two theme mode, dark and light. To change default color you can find in

• Light mode: app/api/palette/lightPalette.js
• Dark mode: app/api/palette/darkPalette.js

Every kind of themes has two palette, there are primary and secondary within light, main, dark and contrastText. Just change the value as you like. In example if you want to change purpleRedTheme in dark mode

// app/api/palette/darkPalette.js
purpleRedTheme: {
  palette: {
    primary: {
      light: '#EDE7F6',
      main: '#673AB7',
      dark: '#512DA8',
      contrastText: '#fff',
    },
    secondary: {
      light: '#FCE4EC',
      main: '#EC407A',
      dark: '#C2185B',
      contrastText: '#fff',
    },
  },
},

UI Redux Architecture

This is UI architecture in diagram visuailzation. Click diagram or full screen button to show in new tab with full screen

Enable Direct Code Preview

• Open config file app/config/codePreview.js
• By default it set by false

  // file: app/config/codePreview.js
  
  export default {
    enable: false
  };
  

• Change to enable: true, to enabled direct code preview
• Test with any component demo, example in http://localhost:3000/app/tables/advanced-table.
• Then at the bottom of every components you will see <> Show Code Button. Just click it.
• The source code of that components will show as well.
  
  
  
  np: Basically this feature read source file directly, so for every changes you make in component will also changes that preview.
  
• You can see through, copy and paste directly any component in front of your eyes.
• This feature use Source Reader component. You can find it in src/app/components/SourceReader/SourceReader.js. It was implemented in mostly component demos.

Create New Page

• Go to app/containers/
• Create new folder ex: MyPage. The name must in capitalize
• Create new js file inside that folder MyPage, ex SamplePage.js. The name must in capitalize
• Inside the file create a simple page HTML ex:
  

  // file: app/containers/MyPage/SamplePage.js
  
  import React from 'react';
  import { Helmet } from 'react-helmet';
  import { PapperBlock } from 'dan-components';
  
  class SamplePage extends React.Component {
    render() {
      const title = 'Dandelion Pro. Blank Page';
      const description = 'Dandelion Pro';
      return (
        <div>
          <Helmet>
            <title>{title}</title>
            <meta name="description" content={description} />
            <meta property="og:title" content={title} />
            <meta property="og:description" content={description} />
            <meta property="twitter:title" content={title} />
            <meta property="twitter:description" content={description} />
          </Helmet>
          <PapperBlock title="Blank Page" desc="Some text description">
            Content
          </PapperBlock>
        </div>
      );
    }
  }
  
  export default SamplePage;
  
  

• Import it asynchronously to the routing. Open file app/containers/pageListAsync.js

  // app/containers/pageListAsync.js
  
  export const SamplePage = Loadable({
    loader: () => import('./MyPage/SamplePage'),
    loading: Loading,
  });

• Load it inside the template. In this example we'll use in dashboard template. Open file app/containers/App/Application.js

  // file: app/containers/App/Application.js
  
  import { SamplePage } from '../pageListAsync';
  class Application extends React.Component {
    render() {
      const { changeMode } = this.props;
      return (
        <Dashboard history={this.props.history} changeMode={changeMode}>
          <Switch>
            <Route exact path="/app/sample-page" component={SamplePage} />
          </Switch>
        </Dashboard>
      )
    }
  }

• Then you can access it at http://localhost:3000/app/sample-page
• Also you can put the a usual link inside <a /> or material button. See this documentation

Create New Component

• Go to app/components/
• Create new folder ex: MyComponent. The name must in capitalize
• Create new js file inside that folder MyComponent, ex SampleComponent.js. The name must in capitalize
• Inside the file create a simple ES6 Class ex:
  

  // file: app/components/MyComponent/SampleComponent.js
  
  import React from 'react';
  
  class SampleComponent extends React.Component {
    render() {
      return (
        <H1>Hello World</H1>
      );
    }
  }
  
  export default SampleComponent;
  
  

• Register it to index. Open file app/components/index.js
• Import that component
  

  
  // file: app/components/index.js
  
  import SampleComponent from './MyComponent/SampleComponent';
                                

• Open a target page where you want use it. Ex: Open src/app/MyPage/SamplePage. (Example page that we've made in previous section)
• Import component form component library
  

  import { SampleComponent } from 'dan-components;

• Then use it inside render function
  

  render() {
    return (
      <SampleComponent />
    );
  }
                              

• Here's complete code
  

  // file: app/containers/MyPage/SamplePage.js
  
  import React from 'react';
  import { Helmet } from 'react-helmet';
  import { PapperBlock, SampleComponent } from 'dan-components';
  
  class SamplePage extends React.Component {
    render() {
      const title = 'Dandelion Pro. Blank Page';
      const description = 'Dandelion Pro';
      return (
        <div>
          <Helmet>
            <title>{title}</title>
            <meta name="description" content={description} />
            <meta property="og:title" content={title} />
            <meta property="og:description" content={description} />
            <meta property="twitter:title" content={title} />
            <meta property="twitter:description" content={description} />
          </Helmet>
          <PapperBlock title="Blank Page" desc="Some text description">
            <SampleComponent />
          </PapperBlock>
        </div>
      );
    }
  }
  
  export default SamplePage;
  
  

• Then you can check the result at http://localhost:3000/mypage/sample-page

Clean Code with Eslint

• Go to internals/webpack/webpack.base.babel.js
• Just uncomment this code bellow

  module: {
      rules: [
        /*
          Disabled eslint by default.
          You can enable it to maintain and keep clean your code.
          NOTE: By enable eslint running app process at beginning will slower
        */
        //      {
        //        enforce: 'pre',
        //        test: /\.js?$/,
        //        exclude: [/node_modules/],
        //        loader: 'eslint-loader',
        //        options: {
        //          quiet: true,
        //        }
        //      },
        {

• Then should become like this

  module: {
      rules: [
        /*
          Disabled eslint by default.
          You can enable it to maintain and keep clean your code.
          NOTE: By enable eslint running app process at beginning will slower
        */
        {
          enforce: 'pre',
          test: /\.js?$/,
          exclude: [/node_modules/],
          loader: 'eslint-loader',
          options: {
            quiet: true,
          }
        },

• Run the project npm start.
  You will be notified with an error message if your code not clean or consistent. ESLint itself is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
  More about elint https://eslint.org/docs/user-guide/getting-started

Icons Used

Material Font Icons

• Please make sure Google Material Icons already embeded in app/index.html.
  If not just embed this inside head tag

  <head>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  </head>

• Connect to internet
• Import Material UI Icon to your component

  import Icon from '@material-ui/core/Icon';

• Then add it inside render method. Example for use access_time icon

  <Icon>access_time<Icon />

Material SVG Icons

• Import all necessary icons form Material UI Icons library

  import AccessTime from '@material-ui/icons/AccessTime';
  import Adjust from '@material-ui/icons/Adjust';
  import BatteryStd from '@material-ui/icons/BatteryStd';
                              

• Use them as component in render method

   render() {
    return (
      <div>
        <AccessTime />
        <Adjust />
        <BatteryStd />
      <div />
    );
  }
                              

Ionicon SVG

• Import all necessary icons form Material UI Icons library

  import Ionicon from 'react-ionicons'
                              

• Use them as component in render method

   render() {
    return (
      <div>
        <Ionicon icon="ios-add-circle" fontSize="35px" onClick={() => console.log('Hi!')} color="red"/>
        <Ionicon icon="ios-alert" rotate={true} fontSize="35px" color="blue"/>
        <Ionicon icon="ios-analytics-outline" fontSize="35px" color="#C9C9C9"/>
        <Ionicon icon="md-basket" fontSize="35px" color="rgb(125, 176, 24)"/>
        <Ionicon icon="md-calculator" rotate={true} fontSize="35px" color="rgb(125, 176, 24)"/>
      <div />
    );
  }
                              

Icons Source

• You can explore more than 1600 material and ion icons at UI Element › Icons and UI Element › Ionicons
  
  
• And click one of icon, then the guide detail of using the icon will show
  
  

Sources and Credit

Online Suport

If you have any questions about customization of this template wich are not covered in the documentation feel free to ask a question in the comment section or contact me directly via e-mail form on my profile page.

A product by Ilham Meidi Brata

Enjoy and don’t forget to rate my template.

Thank you very much!

Change Log