Skip to content

[Frontend] Identify the 2 main approaches to a frontend #19208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 5, 2023
Merged

[Frontend] Identify the 2 main approaches to a frontend #19208

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 26 additions & 7 deletions frontend.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
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.
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>`
or :ref:`building your frontend with a JavaScript framework <frontend-js>` like React.
Both work great - and are discussed below.

However, Symfony *does* come with two powerful options to help you build a modern,
.. _frontend-twig-php:

Using PHP & Twig
----------------

Symfony comes 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
Expand Down Expand Up @@ -39,7 +45,7 @@ be executed by a browser.
.. _frontend-asset-mapper:

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
Expand All @@ -51,7 +57,7 @@ to a polyfill.
.. _frontend-webpack-encore:

Webpack Encore
--------------
~~~~~~~~~~~~~~

.. screencast::

Expand All @@ -65,7 +71,7 @@ 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
Expand All @@ -74,6 +80,18 @@ using `Stimulus`_, `Turbo`_ and a set of tools called `Symfony UX`_.
To learn about Stimulus & the UX Components, see:
the `StimulusBundle Documentation`_

.. _frontend-js:

Using a Front-end Framework (React, Vue, Svelte, etc)
-----------------------------------------------------

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.

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

Expand All @@ -89,3 +107,4 @@ Other Front-End Articles
.. _Stimulus: https://stimulus.hotwired.dev/
.. _Turbo: https://turbo.hotwired.dev/
.. _Symfony UX: https://ux.symfony.com
.. _API Platform: https://api-platform.com/