Table of Contents

Bundle Static Modules

Summary

How to install and run the Vite build that compiles Dotkernel Light's front-end assets into the public folder.

Details

Prerequisite software: Node.js ^20.19.0 || >=22.12.0 (per package.json)

Vite is a frontend dev tool we use:

  • To avoid network bottlenecks that can occur when your application has a lot of separate scripts and style sheets.
  • To concatenate and compress (uglify) .css and .js files
  • To preprocess .scss files into .css.
  • To copy the fonts and images used in your project, from the assets folder to the public folder.

First you need to install dependencies into the node_modules directory by running this command:

npm install

If everything ran ok, you should see a new root folder named node_modules where all the npm packages are installed. If npm install fails, this could be caused by user permissions for npm. Our recommendation is to install npm through Node Version Manager.

The watch command compiles the components then monitors the source files and triggers their recompilation when one of them is changed:

npm run watch

Initially, Vite is configured to delete and rebuild the contents of these folders from the public folder:

  • css
  • fonts
  • images
  • js

The folders are populated from their counterparts in src/App/assets, with one exception: images are copied into public/images/app/, not public/images/ directly, so template references look like {{ asset('images/app/logo.svg') }}. fonts has no such prefix and is copied flat into public/fonts/. See vite.config.js for the exact mapping.

Make sure to not edit anything inside the four public folders manually. Other files and folders in the public folder will be left as is.

An alternative to the watch command is build which simply compiles the components, overwriting as needed:

npm run build

FAQ

Q: What is the minimum Node.js version Dotkernel Light supports? A: ^20.19.0 || >=22.12.0, as declared in package.json's engines field.

Q: What's the difference between npm run watch and npm run build? A: watch recompiles automatically whenever a source file changes; build compiles once.

Q: Can I edit the compiled files under public/css, public/js, public/fonts or public/images directly? A: No — Vite deletes and rebuilds those four folders on every run, from their counterparts in src/App/assets.

On this page