frontend_build_system

Overview

This page documents the frontend build system to be used in the current app. It mirrors the legacy structure and conventions.

Goals

• Use Webpack (not Encore).
• Keep assets in FE app under public/assets.
• Compile TS/JS via webpack and serve only compiled output.
• Keep a clean source vs runtime separation.

Asset Locations (Runtime)

Assets

• Public root: server/var_www/symfony_fe/public
• Assets root: public/assets/
• public/assets/fonts/
• public/assets/media/
• public/assets/style/
• public/assets/script/

Source Locations (Build Inputs)

Source

• Script source: server/var_www/symfony_fe/script/
• Alias: @ → script/
• TS/JS are compiled to public/assets/script/.

Webpack Configuration

Webpack

• Location: server/var_www/symfony_fe/webpack.config.js
• Output:
• JS: public/assets/script/[name].js
• CSS: public/assets/style/[name].css
• CSS extraction: MiniCssExtractPlugin.
• TS/JS transpile: Babel (preset-env + preset-typescript).
• Minification: Terser (drop_console in production).
• Clean output directory each build.

CSS Output by Environment

Env

• Development: multiple per-page CSS outputs.
• Production (live): a single bundled CSS file.
• Ensure /assets/ is referenced exactly once in the final URLs.

Template Integration (Twig)

Twig

• Templates must reference /assets/script/*.js and /assets/style/*.css.
• Do not reference TS source directly.

jQuery Policy

Jquery

• jQuery should not be used.
• Remove ProvidePlugin for jQuery; replace with vanilla JS.

Entry Points

Entries

• Keep the old entry list for now.
• Add a FIXME to review each entry for relevance later.

Next Steps

Next

• Implement the webpack config and source layout in the current FE app.
• Update Twig templates to include compiled assets.

DeveloperDoc ID: Page: Frontend Build System