Thank you for Purchasing

Enlite Prime - React Admin Dashboard Template For Full-Stack Developer

Version 2.2.1

• Created : 13 May 2019
• Latest Update : 14 Oct 2024

What is Enlite Prime?

Template Feature

• Modern Technologies. Built with one of most popular javascript library React.JS and Redux
• Premium designs. Simple and elegant theme color along with dark and lightmode
• Multiple layout and RTL Support. Sidebar and Topbar navigation layout. Auto RTL adjustment styling with jss-rtl
• Authentication. Use Firebase social and email login
• Pre-build apps. Sample CRUD app with Redux-Saga and Realtime DB integration.
• Support multilanguage. Including 6 translation English, Deutsch, Arabic, Chinese, Bahasa Indonesia, Español.
• 30+ react components and modules which reusable and easy to modify.
• Various sample pages Landing page, 2 Dashboards variant, and many more
• Next Generation JavaScript written in ES6
• Responsive design Based on standard 12 Grid System
• Starter Project. Build app from scratch without without being distracted from innate feature.
• Test Unit. Material UI Components functional test with Mocha and Chai
• 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
│   ├── api       # api sample dummy data collection and ui initial value
│   │   ├── apps
│   │   ├── chart
│   │   ├── dummy
│   │   ├── icons
│   │   ├── images
│   │   ├── palette
│   │   └── ui
│   ├── app.js
│   ├── components # UI Components
│   │   ├── Badges
│   │   ├── BreadCrumb
│   │   ├── CardPaper
│   │   ├── Contact
│   │   ├── Counter
│   │   ├── Email
│   │   ├── Error
│   │   ├── Forms
│   │   ├── Gallery
│   │   ├── GuideSlider
│   │   ├── Header
│   │   ├── ImageLightbox
│   │   ├── LandingPage
│   │   ├── Loading
│   │   ├── Notification
│   │   ├── Panel
│   │   ├── PapperBlock
│   │   ├── Profile
│   │   ├── Quote
│   │   ├── Search
│   │   ├── SelectLanguage
│   │   ├── Sidebar
│   │   ├── SidebarBig
│   │   ├── SourceReader
│   │   ├── Tables
│   │   ├── TemplateSettings
│   │   ├── TextEditor
│   │   ├── TodoList
│   │   ├── Widget
│   │   ├── helpers
│   │   └── index.js
│   ├── config         # enviroment and other global configuration
│   ├── containers     # application wrapper and root template
│   │   ├── App
│   │   ├── Charts
│   │   ├── Dashboard
│   │   ├── Forms
│   │   ├── LandingPage
│   │   ├── LanguageProvider
│   │   ├── Layouts
│   │   ├── LocaleToggle
│   │   ├── Maps
│   │   ├── NotFound
│   │   ├── Pages
│   │   ├── Parent
│   │   ├── SampleApps
│   │   ├── SampleFullstackApps
│   │   ├── Session
│   │   ├── Tables
│   │   ├── Templates
│   │   ├── UiElements
│   │   └── pageListAsync.js
│   ├── firebase      # Firebase configuration
│   │   ├── config.js
│   │   ├── firebase.js
│   │   └── index.js
│   ├── i18n.js       # Multilanguage setup
│   ├── index.html    # main HTML
│   ├── redux         # redux settings
│   ├── styles        # style declaration witc scss and css
│   ├── translations
│   │   ├── ar.json
│   │   ├── de.json
│   │   ├── en.json
│   │   ├── es.json
│   │   ├── id.json
│   │   └── zh.json
│   └── utils         # redux saga configuration
├── dump_data         # Sample data dump
│   └── enlite-3a841-export.json
├── firebase.json
├── firebase.rules.json
├── internals         # webpack and app configuration
│   ├── config.js
│   ├── generators
│   ├── mocks
│   ├── scripts
│   ├── testing
│   └── webpack
├── node_modules      # packages, modules and plugins
├── 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
                        

Firebase Setup

Installation and Running App

• Connect to the internet
• Install NodeJs from NodeJs Official Page
• Unzip the Enlite Prime 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
• 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: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 visuailzation. Click diagram or full screen button to show in new tab with full screen

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 enlite-prime as a reference

UI and Languages

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 'enl-components';
  
  class SamplePage extends React.Component {
    render() {
      const title = 'Enlite Prime. Blank Page';
      const description = 'Enlite Prime';
      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 'enl-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 'enl-components';
  
  class SamplePage extends React.Component {
    render() {
      const title = 'Enlite Prime. Blank Page';
      const description = 'Enlite Prime';
      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

CRUD App and Authentication

This is the CRUD flow to explain how the sample Pre-build apps works.

Before we go through to the apps, first important thing to combine all reducer and sagas

• Combine saga's
  file: app\utils\sagas.js
• Combine reducers
  file: app\redux\reducers.js

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.

Clean Code with Eslint

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

  //  const ESLintPlugin = require('eslint-webpack-plugin');
  plugins: options.plugins.concat([: {
      /*
        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
      */
      //      new ESLintPlugin({
      //        extensions: 'js',
      //        exclude: 'node_modules',
      //        failOnWarning: true,
      //        failOnError: true,
      //        emitError: true,
      //        emitWarning: true,
      //      }),
  });
      

• Then should become like this

  const ESLintPlugin = require('eslint-webpack-plugin');
  plugins: options.plugins.concat([: {
      /*
        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
      */
          new ESLintPlugin({
            extensions: 'js',
            exclude: 'node_modules',
            failOnWarning: true,
            failOnError: true,
            emitError: true,
            emitWarning: 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 />
    );
  }
                              

Icons Source

• You can explore more than 800 material icons at UI Element › Icons
  
  
• 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