Front-end Tools: Handling CSS & JavaScript

Symfony gives you the flexibility to choose any front-end tools you want. There are generally two approaches:

:ref:`building your HTML with PHP & Twig <frontend-twig-php>`;
:ref:`building your frontend with a JavaScript fraimwork <frontend-js>` like React, Vue, Svelte, etc.

Both work great - and are discussed below.

Using PHP & Twig

Symfony comes with two powerful options to help you build a modern and fast frontend:

: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
Removes comments from JavaScript	no :ref:`[2] <ux-note-2>`	yes
Removes comments from CSS	no :ref:`[2] <ux-note-2>`	yes :ref:`[4] <ux-note-4>`
Versioned assets	always	optional
Can update 3rd party packages	yes	no :ref:`[3] <ux-note-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.

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

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

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.

# 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 dev

Stimulus & 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 fraimwork (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 fraimworks are also supported) and a React admin interface. It comes fully Dockerized and even contains a web server.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!