{"id":1316,"date":"2026-02-15T20:14:31","date_gmt":"2026-02-15T20:14:31","guid":{"rendered":"https:\/\/docs.ai.drawconclusions.org\/?page_id=1316"},"modified":"2026-02-24T12:45:55","modified_gmt":"2026-02-24T12:45:55","slug":"frontend-build-system","status":"publish","type":"page","link":"https:\/\/docs.ai.drawconclusions.org\/?page_id=1316","title":{"rendered":"Frontend Build System"},"content":{"rendered":"<h1>frontend_build_system<\/h1>\n<h2>Overview<\/h2>\n<p>This page documents the frontend build system to be used in the current app. It mirrors the legacy structure and conventions.<\/p>\n<h2>Goals<\/h2>\n<ul>\n<li>Use Webpack (not Encore).<\/li>\n<li>Keep assets in FE app under public\/assets.<\/li>\n<li>Compile TS\/JS via webpack and serve only compiled output.<\/li>\n<li>Keep a clean source vs runtime separation.<\/li>\n<\/ul>\n<h2>Asset Locations (Runtime)<\/h2>\n<h2>Assets<\/h2>\n<ul>\n<li>Public root: <code>server\/var_www\/symfony_fe\/public<\/code><\/li>\n<li>Assets root: <code>public\/assets\/<\/code><\/li>\n<li><code>public\/assets\/fonts\/<\/code><\/li>\n<li><code>public\/assets\/media\/<\/code><\/li>\n<li><code>public\/assets\/style\/<\/code><\/li>\n<li><code>public\/assets\/script\/<\/code><\/li>\n<\/ul>\n<h2>Source Locations (Build Inputs)<\/h2>\n<h2>Source<\/h2>\n<ul>\n<li>Script source: <code>server\/var_www\/symfony_fe\/script\/<\/code><\/li>\n<li>Alias: <code>@<\/code> \u2192 <code>script\/<\/code><\/li>\n<li>TS\/JS are compiled to <code>public\/assets\/script\/<\/code>.<\/li>\n<\/ul>\n<h2>Webpack Configuration<\/h2>\n<h2>Webpack<\/h2>\n<ul>\n<li>Location: <code>server\/var_www\/symfony_fe\/webpack.config.js<\/code><\/li>\n<li>Output:<\/li>\n<li>JS: <code>public\/assets\/script\/[name].js<\/code><\/li>\n<li>CSS: <code>public\/assets\/style\/[name].css<\/code><\/li>\n<li>CSS extraction: MiniCssExtractPlugin.<\/li>\n<li>TS\/JS transpile: Babel (preset-env + preset-typescript).<\/li>\n<li>Minification: Terser (drop_console in production).<\/li>\n<li>Clean output directory each build.<\/li>\n<\/ul>\n<h2>CSS Output by Environment<\/h2>\n<h2>Env<\/h2>\n<ul>\n<li>Development: multiple per-page CSS outputs.<\/li>\n<li>Production (live): a single bundled CSS file.<\/li>\n<li>Ensure <code>\/assets\/<\/code> is referenced exactly once in the final URLs.<\/li>\n<\/ul>\n<h2>Template Integration (Twig)<\/h2>\n<h2>Twig<\/h2>\n<ul>\n<li>Templates must reference <code>\/assets\/script\/*.js<\/code> and <code>\/assets\/style\/*.css<\/code>.<\/li>\n<li>Do not reference TS source directly.<\/li>\n<\/ul>\n<h2>jQuery Policy<\/h2>\n<h2>Jquery<\/h2>\n<ul>\n<li>jQuery should not be used.<\/li>\n<li>Remove ProvidePlugin for jQuery; replace with vanilla JS.<\/li>\n<\/ul>\n<h2>Entry Points<\/h2>\n<h2>Entries<\/h2>\n<ul>\n<li>Keep the old entry list for now.<\/li>\n<li>Add a FIXME to review each entry for relevance later.<\/li>\n<\/ul>\n<h2>Next Steps<\/h2>\n<h2>Next<\/h2>\n<ul>\n<li>Implement the webpack config and source layout in the current FE app.<\/li>\n<li>Update Twig templates to include compiled assets.<\/li>\n<\/ul>\n<p class=\"developerdocs-id-search\" aria-hidden=\"true\">DeveloperDoc ID: dd_id_c3cc7f11e1<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1289,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[],"doc_layer":[30],"class_list":["post-1316","page","type-page","status-publish","hentry","layer-dd_id_8f59177ca0"],"_links":{"self":[{"href":"https:\/\/docs.ai.drawconclusions.org\/index.php?rest_route=\/wp\/v2\/pages\/1316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.ai.drawconclusions.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.ai.drawconclusions.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.ai.drawconclusions.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.ai.drawconclusions.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1316"}],"version-history":[{"count":5,"href":"https:\/\/docs.ai.drawconclusions.org\/index.php?rest_route=\/wp\/v2\/pages\/1316\/revisions"}],"predecessor-version":[{"id":3835,"href":"https:\/\/docs.ai.drawconclusions.org\/index.php?rest_route=\/wp\/v2\/pages\/1316\/revisions\/3835"}],"up":[{"embeddable":true,"href":"https:\/\/docs.ai.drawconclusions.org\/index.php?rest_route=\/wp\/v2\/pages\/1289"}],"wp:attachment":[{"href":"https:\/\/docs.ai.drawconclusions.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1316"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.ai.drawconclusions.org\/index.php?rest_route=%2Fwp%2Fv2%2Fdoc_category&post=1316"},{"taxonomy":"doc_layer","embeddable":true,"href":"https:\/\/docs.ai.drawconclusions.org\/index.php?rest_route=%2Fwp%2Fv2%2Fdoc_layer&post=1316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}