Build Tool
Learn about the build tool in terms of the development pipeline and production builds

FrontalJS

Our first priority at dlex.io, is to provide the simplest and the most robust experience for our customers, we needed to come up with a simple yet powerful way to enhance users experience with our HTML products, in terms of allowing users to customize their bundle and to make it as optimized and efficient out of the box as possible.

With that said, we had to rethink how the entire market does HTML products, and we had to start with the build tool; Gulp, basically because Gulp is just a task runner and we needed something more advanced, like Webpack, which is a bundler; choosing webpack enabled many features out of the box, to make it even simpler we started working on frontal.js, the following is a few of the features available:

  • Support for Sass and Less
  • Next generation JavaScript via Babel: modern es16 features
  • HMR & Auto-Reload: No need for browsersync
  • Automatic Bundle Injection: you won't have to manually add script and style tags
  • Automatic Asset Optimization: from CSS, to JS and images
  • HTML Partials: to make your HTML pages as clean and neat as possible
  • SVGs via the <i-svg> html element

Learn more at frontal.js official website.

frontal.js is developed and open sourced by the dlex.io team, if you encounter any problems during installation or the usage of frontal.js, please don't hesitate to submit your issue with your environment information and console output.

Development

Starting local development with Nile Dashboard is as simple as running the following command:

$ npm start

This commands actually runs the frontal dev command, which starts an express server with HMR and auto-reload enabled, the following should be your terminal output once the server is started:

> Your application is running at: http://localhost:3000.

This server serves your HTML pages from the pages directory as well as assets and the public directory. You can now edit and save pages/index.html and watch the server auto-refreshs to show your changes almost real-time.

Building

Once you are done developing your dashboard pages and ready for your final optimized build, you can easily generate your build with the following command

$ npm run build

This command actually runs the frontal build command, this command generates a new directory called .frontal at the root directory of your project, within that directory, you will see all your html pages, style and javascript assets ready for production.

Frontal by default minifies HTML for performance, you can customize it not to do so, by adding the following configuration to frontal.config.js

// frontal.config.js
module.exports = {
    // ...
    pages: {
        html: {
          format: 'beautify',
        },
    }
    // ...
};

This will make your HTML pages open sourced for further development, for example, by integrating it within a backend such as Laravel.

Serving

Once you have successfully built your dashboard, you can try it out with the serve command, this command starts an express server, that runs the final production build from the generated .frontal directory.

$ npm run serve

This command runs the frontal serve command

Next Up

Learn how to customize your bundle further and enable certain components for all or some pages.
Learn how to customize components using sass variables

{title}