Front-end Tools: Handling CSS & JavaScript
Symfony gives you the flexibility to choose any front-end tools you want. There are generally two approaches:
- building your HTML with PHP & Twig;
- building your frontend with a JavaScript framework like React, Vue, Svelte, etc.
Both work great - and are discussed below.
Using PHP & Twig
Symfony comes with several powerful options to help you build a modern and fast frontend:
- AssetMapper (recommended for new projects) runs entirely in PHP, doesn't require any build step and leverages modern web standards.
- Symfony Reprise brings first-class Symfony integration to modern JavaScript bundlers (Vite and Rsbuild), the way Webpack Encore did for Webpack.
- Webpack Encore is built with Node.js on top of Webpack. It's the original bundler integration; for new bundler-based projects, Symfony Reprise is the more modern and faster alternative.
| AssetMapper | Reprise | Encore | |
|---|---|---|---|
| Production Ready? | yes | no | yes |
| Stable? | yes | no | yes |
| Requirements | none | Node.js | Node.js |
| Requires a build step? | no | yes | yes |
| Works in all browsers? | yes | yes | yes |
| Supports Stimulus/UX | yes | yes | yes |
| Supports Sass/Tailwind | yes | yes | yes |
| Supports React, Vue, Svelte? | yes [1] | yes | yes |
| Supports TypeScript | yes | yes | yes |
| Removes comments from JavaScript | no [2] | yes | yes |
| Removes comments from CSS | no [2] | yes | yes [4] |
| Versioned assets | always | always | optional |
| Can update 3rd party packages | yes | no [3] | no [3] |
[1] Using JSX (React), Vue, etc with AssetMapper is possible, but you'll need to use their native tools for pre-compilation. Also, some features (like Vue single-file components) cannot be compiled down to pure JavaScript that can be executed by a browser.
[2] You can install the SensioLabs Minify Bundle to minify CSS/JS code (and remove all comments) when compiling assets with AssetMapper.
[3] If you use npm, there are update checkers available (e.g. npm-check).
[4] CSS comments can be removed using CssMinimizerPlugin, which is included
in Webpack Encore and configurable via Encore.configureCssMinimizerPlugin().
AssetMapper (Recommended)
Screencast
Do you prefer video tutorials? Check out the AssetMapper screencast series.
AssetMapper is the recommended system for handling your assets. It runs entirely
in PHP with no complex build step or dependencies. It does this by leveraging
the importmap feature of your browser, which is available in all browsers thanks
to a polyfill.
Symfony Reprise
Warning
Symfony Reprise is experimental: its API and behavior may still change, sometimes drastically.
Symfony Reprise is the modern, faster alternative to Webpack Encore. Instead of wrapping Webpack, it brings first-class Symfony integration to today's JavaScript bundlers, Vite and Rsbuild, which build on much faster tooling (esbuild, Rolldown and Rspack).
Vite and Rsbuild already handle Sass/PostCSS, TypeScript, JSX/Vue/Svelte, code
splitting, minification and Hot Module Replacement on their own. Reprise adds the
Symfony-side glue those bundlers leave out: entrypoints.json and manifest.json
generation, asset versioning, the dev server wiring, Twig functions to render the
<script> and <link> tags, and Symfony UX / Stimulus integration.
Because it generates the same entrypoints.json and manifest.json as Webpack
Encore, moving from Encore is mostly a tag-for-tag swap in your templates
(encore_entry_* becomes reprise_entry_*).
Install it with Composer and npm, then pick your bundler (Vite or Rsbuild):
1 2
$ composer require symfony/reprise
$ npm install @symfony/reprise --save-devFor the full configuration and usage, read the Symfony Reprise documentation.
Webpack Encore
Screencast
Do you prefer video tutorials? Check out the Webpack Encore screencast series.
Note
Webpack Encore is fully supported, but for new projects AssetMapper is recommended. Choose Encore when you already use it, or when you need a full JavaScript bundler.
Webpack Encore is a simpler way to integrate Webpack into your application. It wraps Webpack, giving you a clean & powerful API for bundling JavaScript modules, pre-processing CSS & JS and compiling and minifying assets.
Note
Webpack Encore is now Symfony's legacy bundler-based option. It's still supported, but if you're starting a new project that needs a bundler, consider Symfony Reprise, a more modern and faster alternative built on Vite and Rsbuild.
Switch from AssetMapper
By default, new Symfony webapp projects (created with symfony new --webapp myapp)
use AssetMapper. If you still need to use Webpack Encore, use the following steps to
switch. This is best done on a new project and provides the same features (Turbo/Stimulus)
as the default webapp.
1 2 3 4 5 6 7 8 9
# Remove AssetMapper & Turbo/Stimulus temporarily
$ composer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundle
# Add Webpack Encore & Turbo/Stimulus back
$ composer require symfony/webpack-encore-bundle symfony/ux-turbo symfony/stimulus-bundle
# Install & Build Assets
$ npm install
$ npm run devStimulus & Symfony UX Components
Once you've installed AssetMapper or Webpack Encore, it's time to start building your front-end. You can write your JavaScript however you want, but we recommend using Stimulus, Turbo and a set of tools called Symfony UX.
To learn about Stimulus & the UX Components, see the StimulusBundle Documentation
Using a Front-end Framework (React, Vue, Svelte, etc)
Screencast
Do you prefer video tutorials? Check out the API Platform screencast series.
If you want to use a front-end framework (Next.js, React, Vue, Svelte, etc), we recommend using their native tools and using Symfony as a pure API. A wonderful tool to do that is API Platform. Their standard distribution comes with a Symfony-powered API backend, frontend scaffolding in Next.js (other frameworks are also supported) and a React admin interface. It comes fully Dockerized and even contains a web server.