Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 53f9d77

Browse filesBrowse files
weaverryanweaverryan
committed
feature #18370 Hello AssetMapper Documentation (weaverryan)
This PR was squashed before being merged into the 6.3 branch. Discussion ---------- Hello AssetMapper Documentation Hi! I wrote some docs! This covers all the important things that I can think of right now :). I'd appreciate any reviews. ### Post-Merge Symfony.com TODOs: * [ ] On https://symfony.com/doc/current/index.html, add an `Introduction` link under `Front-End` that links to https://symfony.com/doc/current/frontend.html * [ ] Update the `Webpack Encore` link on that same page to... probably https://symfony.com/doc/current/frontend.html#webpack-encore ? Thanks! Commits ------- ef77936 Hello AssetMapper Documentation
2 parents 5e68a2a + ef77936 commit 53f9d77
Copy full SHA for 53f9d77

File tree

Expand file treeCollapse file tree

4 files changed

+1161
-17
lines changed
Filter options
Expand file treeCollapse file tree

4 files changed

+1161
-17
lines changed

‎deployment.rst

Copy file name to clipboardExpand all lines: deployment.rst
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,7 @@ setup:
222222
* Add/edit CRON jobs
223223
* Restarting your workers
224224
* :ref:`Building and minifying your assets <how-do-i-deploy-my-encore-assets>` with Webpack Encore
225+
* :ref:`Compile your assets <asset-mapper-deployment>` if you're using the AssetMapper component
225226
* Pushing assets to a CDN
226227
* On a shared hosting platform using the Apache web server, you may need to
227228
install the :ref:`symfony/apache-pack package <web-server-apache-mod-php>`

‎frontend.rst

Copy file name to clipboardExpand all lines: frontend.rst
+57-17Lines changed: 57 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,48 @@
1-
Managing CSS and JavaScript
2-
===========================
3-
4-
.. admonition:: Screencast
5-
:class: screencast
6-
7-
Do you prefer video tutorials? Check out the `Webpack Encore screencast series`_.
8-
9-
Symfony ships with a pure-JavaScript library - called Webpack Encore - that makes
10-
it a joy to work with CSS and JavaScript. You can use it, use something else, or
11-
create static CSS and JS files in your ``public/`` directory directly and
12-
include them in your templates.
1+
Introduction
2+
============
3+
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.
7+
8+
However, Symfony *does* come with two powerful option to help you build a modern,
9+
fast frontend, *and* enjoy the process:
10+
11+
* :ref:`Webpack Encore <frontend-webpack-encore>` is a powerful tool built with Node
12+
on top of `Webpack`_ that allows you to write modern CSS & JavaScript and handle
13+
things like JSX (React), Vue or TypeScript.
14+
15+
* :ref:`AssetMapper <frontend-asset-mapper>`, is a production-ready simpler alternative
16+
to Webpack Encore that runs entirely in PHP. It's currently experimental.
17+
18+
========================================== ================= ======================================================
19+
Encore AssetMapper
20+
========================================== ================= ======================================================
21+
Production Ready? yes yes
22+
Stable? yes :doc:`experimental </contributing/code/experimental>`
23+
Requirements node none: pure PHP
24+
Requires a build step? yes no
25+
Works in all browsers? yes yes
26+
Supports :doc:`Stimulus/UX </frontend/ux>` yes yes
27+
Supports Sass/Tailwind yes :ref:`yes <asset-mapper-tailwind>`
28+
Supports React, Vue, Svelte? yes yes**
29+
Supports TypeScript yes no**
30+
========================================== ================= ======================================================
31+
32+
** Using JSX (React), Vue or TypeScript with AssetMapper is possible, but you'll
33+
need to use their native tools for pre-compilation. Also, some features (like
34+
Vue single-file components) cannot be compiled down to pure JavaScript that can
35+
be executed by a browser.
1336

1437
.. _frontend-webpack-encore:
1538

1639
Webpack Encore
1740
--------------
1841

42+
.. screencast::
43+
44+
Do you prefer video tutorials? Check out the `Webpack Encore screencast series`_.
45+
1946
`Webpack Encore`_ is a simpler way to integrate `Webpack`_ into your application.
2047
It *wraps* Webpack, giving you a clean & powerful API for bundling JavaScript modules,
2148
pre-processing CSS & JS and compiling and minifying assets. Encore gives you professional
@@ -84,26 +111,39 @@ Full API
84111

85112
* `Full API`_
86113

114+
.. _frontend-asset-mapper:
115+
116+
AssetMapper
117+
-----------
118+
119+
AssetMapper is an alternative to Webpack Encore that runs entirely in PHP
120+
without any complex build steps. It leverages the ``importmap`` feature of
121+
your browser, which is available in all browsers thanks to a polyfill.
122+
AssetMapper is currently :doc:`experimental </contributing/code/experimental>`.
123+
124+
:doc:`Read the AssetMapper Documentation </frontend/asset_mapper>`
125+
87126
Symfony UX Components
88127
---------------------
89128

129+
* :doc:`/frontend/ux`
130+
90131
.. include:: /frontend/_ux-libraries.rst.inc
91132

92133
Other Front-End Articles
93134
------------------------
94135

136+
* :doc:`/frontend/create_ux_bundle`
137+
* :doc:`/frontend/custom_version_strategy`
138+
95139
.. toctree::
96140
:hidden:
97141
:glob:
98142

99143
frontend/encore/installation
100144
frontend/encore/simple-example
101145
frontend/encore/*
102-
103-
.. toctree::
104-
:maxdepth: 1
105-
:glob:
106-
146+
frontend/asset_mapper
107147
frontend/*
108148

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

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.