Thank you for Purchasing

Boss Ultimate - React Admin Template Material Design

Version 2.0.2

• Created : 16 Jul 2018
• Latest Update : 19 Jan 2023

What is Boss Ultimate?

Template Feature

• Built with one of most popular javascript library React.JS and Redux
• Use Google Material Design and Icons
• Multiple layout orientation. Sidebar Menu and Navigation Menu layout
• Written in JSX
• Responsive design
• Dark and light mode. Eyes are more focused
• JSS (CSS in JS) and Async Code Splitting
• Clean code maintained by eslint
• 36+ reusable react components and modules
• Based on standard 12 Grid System
• Fully vector icons and font icons
• Simple and elegant Style.
• Easy to modify
• Clear and effective documentation with direct code preview
• 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
│   ├── app.js
│   ├── components    # UI Components
│   │   ├── Badges
│   │   ├── BreadCrumb
│   │   ├── Calendar
│   │   ├── CardPaper
│   │   ├── Cart
│   │   ├── Chat
│   │   ├── Comments
│   │   ├── Contact
│   │   ├── Counter
│   │   ├── Divider
│   │   ├── Email
│   │   ├── Error
│   │   ├── Forms
│   │   ├── Gallery
│   │   ├── Header
│   │   ├── ImageLightbox
│   │   ├── LandingPage
│   │   ├── Loading
│   │   ├── Notification
│   │   ├── Pagination
│   │   ├── Panel
│   │   ├── PapperBlock
│   │   ├── Product
│   │   ├── Profile
│   │   ├── Quote
│   │   ├── Rating
│   │   ├── Search
│   │   ├── Sidebar
│   │   ├── SocialMedia
│   │   ├── SourceReader
│   │   ├── Tables
│   │   ├── 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 Boss Ultimate 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:8080

Deployment

Production

• First 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:8080
• Note: 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.
  This is a default feature from React Boilerplate which has focus of 'offline first'. So will make easier to build Progressive Web Aplication. 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
     

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:8080
• 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

Installation Problem

• if got warning like this :
  

  npm WARN redux-immutablejs@0.0.8 requires a peer of immutable@^3.7.5 but none is installed. You must install peer dependencies yourself.
  npm WARN react-draft-wysiwyg@1.12.13 requires a peer of immutable@3.x.x || 4.x.x but none is installed. You must install peer dependencies yourself.
  npm WARN slick-carousel@1.8.1 requires a peer of jquery@>=1.8.0 but none is installed. You must install peer dependencies yourself.
  npm WARN draftjs-utils@0.9.4 requires a peer of immutable@3.x.x || 4.x.x but none is installed. You must install peer dependencies yourself.
  npm WARN html-to-draftjs@1.4.0 requires a peer of immutable@3.x.x || 4.x.x but none is installed. You must install peer dependencies yourself.
  

  Don't worry the app will run as well

  For warning some of dependencies need another dependencies too, maybe once you install them, there’s some changes from the 3rd party vendor so probably it will make a warning to another dependencies.

• if got an error with a dependencies installation. Try to remove the problematic package in package.json. Then install again with npm install. After finish try to install the problematic package manually.
• if still got an error. Try to update the problematic package instead.

Development Problem

Every code changes, the app will updated directly without reloading the pages. when errors happen or warning will show in browser and console browser.

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:8081
• After this you can can start develop your app with this initial project. And will bo more suitable when use boss-ultimate as a reference

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.

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	'purpleRedTheme', 'greenTheme', 'blueTheme', 'skyBlueTheme', 'magentaTheme', 'purpleTheme', 'yellowCyanTheme', 'orangeTheme', 'cyanTheme', 'redTheme', 'greyTheme', 'greenNatureTheme',	theme: 'greenTheme'

  
  Here's the complete code

  const initialState = {
  /* Settings for Themes and layout */
  sidebarOpen: true,
    theme: 'purpleRedTheme',
    pageLoaded: false,
    palette: List([
      { name: 'Purple Red', value: 'purpleRedTheme' },
      { name: 'Natural Green Orange', value: 'greenTheme' },
      { name: 'Blue Ocean', value: 'blueTheme' },
      { name: 'Blue Sky', value: 'skyBlueTheme' },
      { name: 'Sweet Magenta Cyan', value: 'magentaTheme' },
      { name: 'Violet Green', value: 'purpleTheme' },
      { name: 'Vintage Yellow', value: 'yellowCyanTheme' },
      { name: 'Orange Violet', value: 'orangeTheme' },
      { name: 'Cyan Green', value: 'cyanTheme' },
      { name: 'Red Silver', value: 'redTheme' },
      { name: 'Grey', value: 'greyTheme' },
      { name: 'Green Nature', value: 'greenNatureTheme' },
    ]),
    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.

Enable Direct Code Preview

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

  export default {
    enable: false
  };
  

• Change to enable: true, to enabled direct code preview
• Test with any component demo, example in http://localhost:8080/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.

How to Create

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:
  

  import React from 'react';
  import { Helmet } from 'react-helmet';
  import { PapperBlock } from 'dan-components';
  
  class SamplePage extends React.Component {
    render() {
      const title = 'Boss Ultimate. Blank Page';
      const description = 'Boss Ultimate';
      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

  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

  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="/sample-page" component={SamplePage} />
          </Switch>
        </Dashboard>
      )
    }
  }

• Then you can access it at http://localhost:8080/samplepage
• 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:
  

  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
  

  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 before)
• Import component form component library
  

  import { SampleComponent } from 'dan-components;

• Then use it inside render function
  

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

• Then you can check the result at http://localhost:8080/samplepage

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 />
    );
  }
                              

Icons Source

• You can explore more than 900 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