Skip to content
1 change: 1 addition & 0 deletions deployment.rst
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,7 @@ setup:
* Add/edit CRON jobs
* Restarting your workers
* :ref:`Building and minifying your assets <how-do-i-deploy-my-encore-assets>` with Webpack Encore
* :ref:`Compile your assets <asset-mapper-deployment>` if you're using the AssetMapper component
* Pushing assets to a CDN
* On a shared hosting platform using the Apache web server, you may need to
install the :ref:`symfony/apache-pack package <web-server-apache-mod-php>`
Expand Down
74 changes: 57 additions & 17 deletions frontend.rst
Original file line number Diff line number Diff line change
@@ -1,21 +1,48 @@
Managing CSS and JavaScript
===========================

.. admonition:: Screencast
:class: screencast

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

Symfony ships with a pure-JavaScript library - called Webpack Encore - that makes
it a joy to work with CSS and JavaScript. You can use it, use something else, or
create static CSS and JS files in your ``public/`` directory directly and
include them in your templates.
Introduction
============

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 option to help you build a modern,
fast frontend, *and* enjoy the process:

* :ref:`Webpack Encore <frontend-webpack-encore>` is a powerful tool built with Node
on top of `Webpack`_ that allows you to write modern CSS & JavaScript and handle
things like JSX (React), Vue or TypeScript.

* :ref:`AssetMapper <frontend-asset-mapper>`, is a production-ready simpler alternative
to Webpack Encore that runs entirely in PHP. It's currently experimental.

========================================== ================= ======================================================
Encore AssetMapper
========================================== ================= ======================================================
Production Ready? yes yes
Stable? yes :doc:`experimental </contributing/code/experimental>`
Requirements node none: pure PHP
Requires a build step? yes no
Works in all browsers? yes yes
Supports :doc:`Stimulus/UX </frontend/ux>` yes yes
Supports Sass/Tailwind yes :ref:`yes <asset-mapper-tailwind>`
Supports React, Vue, Svelte? yes yes**
Supports TypeScript yes no**
========================================== ================= ======================================================

** Using JSX (React), Vue or TypeScript 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.

.. _frontend-webpack-encore:

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 professional
Expand Down Expand Up @@ -84,26 +111,39 @@ Full API

* `Full API`_

.. _frontend-asset-mapper:

AssetMapper
-----------

AssetMapper is an alternative to Webpack Encore that runs entirely in PHP
without any complex build steps. It leverages the ``importmap`` feature of
your browser, which is available in all browsers thanks to a polyfill.
AssetMapper is currently :doc:`experimental </contributing/code/experimental>`.

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

Symfony UX Components
---------------------

* :doc:`/frontend/ux`

.. include:: /frontend/_ux-libraries.rst.inc

Other Front-End Articles
------------------------

* :doc:`/frontend/create_ux_bundle`
* :doc:`/frontend/custom_version_strategy`

.. toctree::
:hidden:
:glob:

frontend/encore/installation
frontend/encore/simple-example
frontend/encore/*

.. toctree::
:maxdepth: 1
:glob:

frontend/asset_mapper
frontend/*
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The bottom of https://symfony.com/doc/current/frontend.html is currently "wonky". I think the intention was for the the first, :hidden toctree to "load" all of the encore stuff into the toctree... and then this bottom toctree would only load anything "remaining". In practice, it would render everything.

So, I reduced this to just ONE toctree, which is :hidden:. The 2 documents that are outside of encore/* were added manually under the Other Front-End Articles section.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fun fact, including documents in a toctree entry is no longer relevant with the PHP based parser IIRC

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That IS a fun fact, thank you!


.. _`Webpack Encore`: https://www.npmjs.com/package/@symfony/webpack-encore
Expand Down
Loading