Skip to content

Commit 90bbe24

Browse files
committed
Merge branch '7.0' into 7.1
* 7.0: [Frontend] Identify the 2 main approaches to a frontend UX bundles: fix autoimport paths
2 parents 1a57b6f + 7eeca0c commit 90bbe24

File tree

2 files changed

+31
-9
lines changed

2 files changed

+31
-9
lines changed

frontend.rst

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
Front-end Tools: Handling CSS & JavaScript
22
==========================================
33

4-
Symfony gives you the flexibility to choose any front-end tools you want. This could
5-
be dead-simple - like putting CSS & JS directly in the ``public/`` directory - or
6-
more advanced - like scaffolding your front-end with a tool like Next.js.
4+
Symfony gives you the flexibility to choose any front-end tools you want. There
5+
are generally two approaches:
76

8-
However, Symfony *does* come with two powerful options to help you build a modern,
7+
#. :ref:`building your HTML with PHP & Twig <frontend-twig-php>`;
8+
#. :ref:`building your frontend with a JavaScript framework <frontend-js>` like React.
9+
10+
Both work great - and are discussed below.
11+
12+
.. _frontend-twig-php:
13+
14+
Using PHP & Twig
15+
----------------
16+
17+
Symfony comes with two powerful options to help you build a modern,
918
fast frontend, *and* enjoy the process:
1019

1120
* :ref:`AssetMapper <frontend-asset-mapper>` (recommended for new projects) runs
@@ -39,7 +48,7 @@ be executed by a browser.
3948
.. _frontend-asset-mapper:
4049

4150
AssetMapper (Recommended)
42-
-------------------------
51+
~~~~~~~~~~~~~~~~~~~~~~~~~
4352

4453
AssetMapper is the recommended system for handling your assets. It runs entirely
4554
in PHP with *no* complex build step or dependencies. It does this by leveraging
@@ -51,7 +60,7 @@ to a polyfill.
5160
.. _frontend-webpack-encore:
5261

5362
Webpack Encore
54-
--------------
63+
~~~~~~~~~~~~~~
5564

5665
.. screencast::
5766

@@ -65,7 +74,7 @@ asset system that's a *delight* to use.
6574
:doc:`Read the Encore Documentation </frontend/encore/index>`
6675

6776
Stimulus & Symfony UX Components
68-
--------------------------------
77+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6978

7079
Once you've installed AssetMapper or Encore, it's time to start building your
7180
front-end. You can write your JavaScript however you want, but we recommend
@@ -74,6 +83,18 @@ using `Stimulus`_, `Turbo`_ and a set of tools called `Symfony UX`_.
7483
To learn about Stimulus & the UX Components, see:
7584
the `StimulusBundle Documentation`_
7685

86+
.. _frontend-js:
87+
88+
Using a Front-end Framework (React, Vue, Svelte, etc)
89+
-----------------------------------------------------
90+
91+
If you want to use a front-end framework (Next.js, React, Vue, Svelte, etc),
92+
we recommend using their native tools and using Symfony as a pure API. A wonderful
93+
tool to do that is `API Platform`_. Their standard distribution comes with a
94+
Symfony-powered API backend, frontend scaffolding in Next.js (other frameworks
95+
are also supported) and a React admin interface. It comes fully Dockerized and even
96+
contains a web server.
97+
7798
Other Front-End Articles
7899
------------------------
79100

@@ -89,3 +110,4 @@ Other Front-End Articles
89110
.. _Stimulus: https://stimulus.hotwired.dev/
90111
.. _Turbo: https://turbo.hotwired.dev/
91112
.. _Symfony UX: https://ux.symfony.com
113+
.. _API Platform: https://api-platform.com/

frontend/create_ux_bundle.rst

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ of packages in ``importmap`` should be the same as the ones in ``peerDependencie
4848
"fetch": "eager",
4949
"enabled": true,
5050
"autoimport": {
51-
"dist/bootstrap4-theme.css": false,
52-
"dist/bootstrap5-theme.css": true
51+
"@acme/feature/dist/bootstrap4-theme.css": false,
52+
"@acme/feature/dist/bootstrap5-theme.css": true
5353
}
5454
}
5555
},

0 commit comments

Comments
 (0)