minor #19348 Remove yarn commands in front-end docs (javiereguiluz)

This PR was merged into the 5.4 branch.

Discussion
----------

Remove yarn commands in front-end docs

Related to #19193, we discussed internally about this and we decided to remove all `yarn` commands. Reasons:

* Nowadays, `npm` is as good and fast as `yarn`
* Readers without much experience in front-end can just use the `npm` commands that will work because `npm` is bundled with Node.js (no need to install other package managers)
* Readers with lots of experience in front-end can easily adapt the shown `npm` commands to the package manager that they use: yarn, pnpm, bun, etc.

Commits
-------

c33618b Remove yarn commands in front-end docs

Author: OskarStark

.doctor-rst.yaml

@@ -65,7 +65,6 @@ rules:
     valid_use_statements: ~
     versionadded_directive_should_have_version: ~
     yaml_instead_of_yml_suffix: ~
-    yarn_dev_option_at_the_end: ~
 
     #   master
     versionadded_directive_major_version:

frontend/create_ux_bundle.rst

@@ -87,11 +87,11 @@ In this case, the file located at ``[assets directory]/dist/controller.js`` will
                }
            }
 
-    2. Run either ``npm install`` or ``yarn install`` to install the new dependencies.
+    2. Run ``npm install`` to install the new dependencies.
 
     3. Write your Stimulus controller with TypeScript in ``src/controller.ts``.
 
-    4. Run ``npm run build`` or ``yarn run build`` to transpile your TypeScript controller into JavaScript.
+    4. Run ``npm run build`` to transpile your TypeScript controller into JavaScript.
 
 To use your controller in a template (e.g. one defined in your bundle) you can use it like this:
 

frontend/encore/advanced-config.rst

@@ -105,10 +105,6 @@ prefer to build configs separately, pass the ``--config-name`` option:
 
 .. code-block:: terminal
 
-    # if you use the Yarn package manager
-    $ yarn encore dev --config-name firstConfig
-
-    # if you use the npm package manager
     $ npm run dev -- --config-name firstConfig
 
 Next, define the output directories of each build:

frontend/encore/bootstrap.rst

@@ -7,10 +7,6 @@ First, to be able to customize things further, we'll install ``bootstrap``:
 
 .. code-block:: terminal
 
-    # if you use the Yarn package manager
-    $ yarn add bootstrap --dev
-
-    # if you use the npm package manager
     $ npm install bootstrap --save-dev
 
 Importing Bootstrap Styles
@@ -46,11 +42,6 @@ used in your application:
 
 .. code-block:: terminal
 
-    # if you use the Yarn package manager
-    # (jQuery is only required in versions prior to Bootstrap 5)
-    $ yarn add jquery @popperjs/core --dev
-
-    # if you use the npm package manager
     # (jQuery is only required in versions prior to Bootstrap 5)
     $ npm install jquery @popperjs/core --save-dev
 

frontend/encore/dev-server.rst

@@ -1,15 +1,11 @@
 Using webpack-dev-server and HMR
 ================================
 
-While developing, instead of using ``yarn encore dev --watch``, you can use the
+While developing, instead of using ``npx encore dev --watch``, you can use the
 `webpack-dev-server`_:
 
 .. code-block:: terminal
 
-    # if you use the Yarn package manager
-    $ yarn encore dev-server
-
-    # if you use the npm package manager
     $ npm run dev-server
 
 This builds and serves the front-end assets from a new server. This server runs at
@@ -30,10 +26,6 @@ You can set these options via command line options:
 
 .. code-block:: terminal
 
-    # if you use the Yarn package manager
-    $ yarn encore dev-server --port 9000
-
-    # if you use the npm package manager
     $ npm run dev-server -- --port 9000
 
 You can also set these options using the ``Encore.configureDevServerOptions()``
@@ -90,10 +82,6 @@ server SSL certificate:
 
     .. code-block:: terminal
 
-        # if you use the Yarn package manager
-        $ NODE_OPTIONS=--openssl-legacy-provider yarn encore dev-server
-
-        # if you use the npm package manager
         $ NODE_OPTIONS=--openssl-legacy-provider npm run dev-server
 
 CORS Issues

frontend/encore/faq.rst

@@ -53,7 +53,7 @@ and the built files. Your ``.gitignore`` file should include:
     # whatever path you're passing to Encore.setOutputPath()
     /public/build
 
-You *should* commit all of your source asset files, ``package.json`` and ``yarn.lock`` or ``package-lock.json``.
+You *should* commit all of your source asset files, ``package.json`` and ``package-lock.json``.
 
 My App Lives under a Subdirectory
 ---------------------------------
@@ -105,8 +105,8 @@ file script tag is rendered automatically.
 This dependency was not found: some-module in ./path/to/file.js
 ---------------------------------------------------------------
 
-Usually, after you install a package via yarn or npm, you can require / import
-it to use it. For example, after running ``yarn add respond.js`` or ``npm install respond.js``,
+Usually, after you install a package via npm, you can require / import
+it to use it. For example, after running ``npm install respond.js``,
 you try to require that module:
 
 .. code-block:: javascript
@@ -151,7 +151,7 @@ productive (for example by resolving aliases). However, you may face this error:
     calling Encore directly.
 
 It fails because the Encore Runtime Environment is only configured when you are
-running it (e.g. when executing ``yarn encore dev``). Fix this issue calling to
+running it (e.g. when executing ``npx encore dev``). Fix this issue calling to
 ``Encore.isRuntimeEnvironmentConfigured()`` and
 ``Encore.configureRuntimeEnvironment()`` methods:
 

frontend/encore/installation.rst

@@ -1,12 +1,8 @@
 Installing Encore
 =================
 
-First, make sure you `install Node.js`_. Optionally you can also install the
-`Yarn package manager`_. In the next sections you will always see the commands
-for both ``npm`` and ``yarn``, but you only need to run one of them.
-
-The following instructions depend on whether you are installing Encore in a
-Symfony application or not.
+First, make sure you `install Node.js`_. Then, follow the instructions below,
+which depend on whether you are installing Encore in a Symfony application or not.
 
 Installing Encore in Symfony Applications
 -----------------------------------------
@@ -17,11 +13,6 @@ project:
 .. code-block:: terminal
 
     $ composer require symfony/webpack-encore-bundle
-
-    # if you use the Yarn package manager
-    $ yarn install
-
-    # if you use the npm package manager
     $ npm install
 
 If you are using :ref:`Symfony Flex <symfony-flex>`, this will install and enable
@@ -36,24 +27,19 @@ and files by yourself following the instructions shown in the next section.
 Installing Encore in non Symfony Applications
 ---------------------------------------------
 
-Install Encore into your project via Yarn:
+Install Encore into your project via npm:
 
 .. code-block:: terminal
 
-    # if you use the Yarn package manager
-    $ yarn add @symfony/webpack-encore --dev
-
-    # if you use the npm package manager
     $ npm install @symfony/webpack-encore --save-dev
 
 This command creates (or modifies) a ``package.json`` file and downloads
-dependencies into a ``node_modules/`` directory. Yarn also creates/updates a
-``yarn.lock`` (called ``package-lock.json`` if you use npm).
+dependencies into a ``node_modules/`` directory.
 
 .. tip::
 
-    You *should* commit ``package.json`` and ``yarn.lock`` (or ``package-lock.json``
-    if using npm) to version control, but ignore ``node_modules/``.
+    You *should* commit ``package.json`` and ``package-lock.json``
+    to version control, but ignore ``node_modules/``.
 
 Creating the webpack.config.js File
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -223,5 +209,4 @@ on which features of Encore you have enabled.
     :doc:`split chunks </frontend/encore/split-chunks>`.
 
 .. _`install Node.js`: https://nodejs.org/en/download/
-.. _`Yarn package manager`: https://yarnpkg.com/getting-started/install
 .. _`WebpackEncoreBundle`: https://github.com/symfony/webpack-encore-bundle

frontend/encore/postcss.rst

@@ -23,10 +23,6 @@ Next, download any plugins you want, like ``autoprefixer``:
 
 .. code-block:: terminal
 
-    # if you use the Yarn package manager
-    $ yarn add autoprefixer --dev
-
-    # if you use the npm package manager
     $ npm install autoprefixer --save-dev
 
 Next, create a ``postcss.config.js`` file at the root of your project:
@@ -36,7 +32,7 @@ Next, create a ``postcss.config.js`` file at the root of your project:
     module.exports = {
         plugins: {
             // include whatever plugins you want
-            // but make sure you install these via yarn or npm!
+            // but make sure you install these via npm!
 
             // add browserslist config to package.json (see below)
             autoprefixer: {}

frontend/encore/reactjs.rst

@@ -10,14 +10,10 @@ Enabling React.js
 
     Check out live demos of Symfony UX React component at `https://ux.symfony.com/react`_!
 
-Using React? First add some dependencies with Yarn:
+Using React? First add some dependencies with npm:
 
 .. code-block:: terminal
 
-    # if you use the Yarn package manager
-    $ yarn add react react-dom prop-types
-
-    # if you use the npm package manager
     $ npm install react react-dom prop-types --save
 
 Enable react in your ``webpack.config.js``:

frontend/encore/simple-example.rst

@@ -56,28 +56,20 @@ together and - thanks to the first ``app`` argument - output final ``app.js`` an
 
 .. _encore-build-assets:
 
-To build the assets, run the following if you use the Yarn package manager:
+To build the assets, run the following if you use the npm package manager:
 
 .. code-block:: terminal
 
     # compile assets and automatically re-compile when files change
-    $ yarn watch
-    # or
     $ npm run watch
 
     # or, run a dev-server that can sometimes update your code without refreshing the page
-    $ yarn dev-server
-    # or
     $ npm run dev-server
 
     # compile assets once
-    $ yarn dev
-    # or
     $ npm run dev
 
     # on deploy, create a production build
-    $ yarn build
-    # or
     $ npm run build
 
 All of these commands - e.g. ``dev`` or ``watch`` - are shortcuts that are defined
@@ -186,10 +178,6 @@ We'll use jQuery to print this message on the page. Install it via:
 
 .. code-block:: terminal
 
-    # if you use the Yarn package manager
-    $ yarn add jquery --dev
-
-    # if you use the npm package manager
     $ npm install jquery --save-dev
 
 Great! Use ``import`` to import ``jquery`` and ``greet.js``:
@@ -372,10 +360,6 @@ and restart Encore:
 
 .. code-block:: terminal
 
-    # if you use the Yarn package manager
-    $ yarn watch
-
-    # if you use the npm package manager
     $ npm run watch
 
 Webpack will now output a new ``checkout.js`` file and a new ``account.js`` file
@@ -437,18 +421,12 @@ Encore. When you do, you'll see an error!
 .. code-block:: terminal
 
     >   Error: Install sass-loader & sass to use enableSassLoader()
-    >     yarn add sass-loader@^13.0.0 sass --dev
 
 Encore supports many features. But, instead of forcing all of them on you, when
 you need a feature, Encore will tell you what you need to install. Run:
 
 .. code-block:: terminal
 
-    # if you use the Yarn package manager
-    $ yarn add sass-loader@^13.0.0 sass --dev
-    $ yarn encore dev --watch
-
-    # if you use the npm package manager
     $ npm install sass-loader@^13.0.0 sass --save-dev
     $ npm run watch