frontend.rst

Front-end Tools: Handling CSS & JavaScript

Symfony gives you the flexibility to choose any front-end tools you want. This could be dead-simple - like putting CSS & JS directly in the public/ directory - or more advanced - like scaffolding your front-end with a tool like Next.js.

However, Symfony does come with two powerful options to help you build a modern, fast frontend, and enjoy the process:

• :ref:`AssetMapper <frontend-asset-mapper>` (recommended for new projects) runs entirely in PHP, doesn't require any build step and leverages modern web standards.
• :ref:`Webpack Encore <frontend-webpack-encore>` is built with Node.js on top of Webpack.

Production Ready?	yes	yes
Stable?	yes	yes
Requirements	none	Node.js
Requires a build step?	no	yes
Works in all browsers?	yes	yes
Supports Stimulus/UX	yes	yes
Supports Sass/Tailwind	:ref:`yes <asset-mapper-tailwind>`	yes
Supports React, Vue, Svelte?	yes :ref:`[1] <ux-note-1>`	yes
Supports TypeScript	:ref:`yes <asset-mapper-ts>`	yes

[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.

AssetMapper (Recommended)

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.

:doc:`Read the AssetMapper Documentation </frontend/asset_mapper>`

Webpack Encore

.. screencast::

    Do you prefer video tutorials? Check out the `Webpack Encore screencast series`_.

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. Encore gives you a professional asset system that's a delight to use.

:doc:`Read the Encore Documentation </frontend/encore/index>`

Stimulus & Symfony UX Components

Once you've installed AssetMapper or 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

Other Front-End Articles

• :doc:`/frontend/create_ux_bundle`
• :doc:`/frontend/custom_version_strategy`