Learn about the internals of Frontal

The concept behind Frontal is basically to live-watch a config file and applying the bundles configured and auto inject it within pages without having to restart the development server.

However, in this guide we will discuss the internals of Frontal, the repository is a mono-repo that consists of core packages and plugin packages, in this guide we will go through each package and explain its role within Frontal.

Core Packages

  • packages/frontal.js: this package implements the command line tool that powers the frontal command. It also implements the primary Frontal application class that uses core packages and applies plugin packages.
  • packages/config: this package implements the Config class that reads and watches frontal.config.js for changes as well as applying defaults.
  • packages/webpack: this package implements initiating a webpack instance as well as handling the core reactive bundling feature of Frontal.
  • packages/server: this package is highly inspired by the webpack-dev-server and it implements an HTTP server that is powered by express.js, it handles both development and production modes, it also implements the WebSocket server that is responsible for handling HMR and live reloading during development.
  • packages/plugin: this package implements the base class of plugins, each plugin must extend that class.

Plugin Packages

Writing Plugins

The plugins eco-system within Frontal is experimental, however, if you are looking to extend Frontal by modifying webpack or bundles compiled you can read the Writing a Plugin guide.

Would You Like To KnowAbout Our Next Products & Free Tools?