Frontend Build Guide

InnoShop's frontend assets are built with Vite, orchestrated by a build.js script that handles both core modules and themes independently.

Tech Stack

• Build Tool: Vite 6+
• CSS Preprocessing: Sass (modern-compiler API)
• JS Bundling: Vite lib mode, IIFE output format
• Package Manager: npm

Build Entries

All builds are driven by build.js at the project root. It does not use Vite's dev server or multi-input mode. Each entry is built individually via environment variables passed to npx vite build.

Core Modules

Name	Source	Output Dir	Description
front/css	innopacks/front/resources/assets/scss/app.scss	public/build/front/css/	Frontend styles
front/js	innopacks/front/resources/assets/js/app.js	public/build/front/js/	Frontend scripts
panel/css	innopacks/panel/resources/assets/scss/app.scss	public/build/panel/css/	Admin panel styles
panel/js	innopacks/panel/resources/assets/js/app.js	public/build/panel/js/	Admin panel scripts
install/css	innopacks/install/resources/assets/scss/app.scss	public/build/install/css/	Installation wizard styles

Themes

Source	Output Dir	Distribution Dir
themes/{name}/assets/scss/app.scss	public/static/themes/{name}/css/	themes/{name}/public/css/
themes/{name}/assets/js/app.js	public/static/themes/{name}/js/	themes/{name}/public/js/

After theme compilation, assets are automatically copied to themes/{name}/public/ as a distribution backup.

Command Usage

# Install dependencies
npm install

# Build all core modules (front + panel + install)
npm run build

# Build a single core module
TARGET=front npm run build      # Frontend only
TARGET=panel npm run build      # Admin panel only
TARGET=install npm run build    # Install wizard only

# Build a theme (skips core modules)
THEME=petnow npm run build

# Build core module + theme together
TARGET=panel THEME=petnow npm run build

npm run dev, npm run prod, and npm run production are all aliases for npm run build — they behave identically.

Build Process Details

1. Environment Variables

build.js reads the following environment variables:

Variable	Description	Example
TARGET	Core module to build (front/panel/install)	TARGET=panel
THEME	Theme name to build	THEME=petnow

Internal variables used by vite.config.js (set automatically by build.js):

Variable	Description
BUILD_INPUT	Source file path
BUILD_OUTDIR	Output directory
BUILD_OUTPUT_NAME	JS output filename (default: app)

2. Build Flow

build.js
  ├── Parse TARGET / THEME environment variables
  ├── Build entry list (core modules or theme)
  ├── Call npx vite build for each entry (passes BUILD_INPUT / BUILD_OUTDIR)
  ├── JS entries: Vite outputs index.js → rename to {outputName}.js
  └── Theme builds: copy assets to themes/{name}/public/

3. CSS Compilation

CSS uses Vite's rollupOptions.input mode:

• Input: SCSS file, output: unhashed CSS file
• Hash is stripped via assetFileNames configuration

4. JS Compilation

JS uses Vite's lib mode (IIFE format):

• Input: JS file, output: self-executing function
• Vite lib mode outputs index.js by default; build.js renames it to app.js

Path Aliases

vite.config.js registers the following aliases for use in SCSS/JS:

Alias	Resolves To	Purpose
@front	innopacks/front/resources/	Frontend resource references
@theme	themes/{THEME}/	Theme resource references
~	node_modules/	Legacy SCSS import compatibility (e.g. ~bootstrap)

Output Directory Structure

public/
├── build/
│   ├── front/
│   │   ├── css/app.css
│   │   └── js/app.js
│   ├── panel/
│   │   ├── css/app.css
│   │   └── js/app.js
│   └── install/
│       └── css/app.css
└── static/
    └── themes/
        └── {theme}/
            ├── css/app.css
            ├── js/app.js
            └── images/...

Key Dependencies

Dependency	Purpose
bootstrap 5.3	UI framework (CSS + JS)
bootstrap-icons	Icon library
jquery 3.7	DOM manipulation
axios	HTTP requests
codemirror 6	Code editor
sass / sass-embedded	SCSS compilation

Notes

• No manual hash or manifest handling needed — Vite is configured to output fixed filenames
• On Linux, public/ directory permissions are automatically set to 755 with www:www ownership after build
• Themes must contain assets/scss/app.scss or assets/js/app.js to be compiled; missing files are skipped automatically
• After modifying core or theme assets, run npm run build again for changes to take effect