Merge branch '5.3' into 5.4

* 5.3:
  resolves #15575 add npm equivalent of yarn commands in a separate code block.

Author: javiereguiluz

frontend/encore/advanced-config.rst

@@ -105,8 +105,12 @@ 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:
 
 .. code-block:: yaml

frontend/encore/bootstrap.rst

@@ -7,8 +7,12 @@ 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
 --------------------------
 
@@ -42,9 +46,14 @@ used in your application:
 
 .. code-block:: terminal
 
-    // jQuery is only required in versions prior to Bootstrap 5
+    # 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
+
 Now, require bootstrap from any of your JavaScript files:
 
 .. code-block:: javascript

frontend/encore/dev-server.rst

@@ -6,8 +6,12 @@ While developing, instead of using ``yarn encore dev --watch``, you can use the
 
 .. 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
 ``localhost:8080`` by default, meaning your build assets are available at ``localhost:8080/build``.
 This server does not actually write the files to disk; instead it serves them from memory,
@@ -32,8 +36,12 @@ 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()``
 method in your ``webpack.config.js`` file:
 

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``.
+You *should* commit all of your source asset files, ``package.json`` and ``yarn.lock`` or ``package-lock.json``.
 
 My App Lives under a Subdirectory
 ---------------------------------
@@ -105,8 +105,9 @@ 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, you can require / import it to use
-it. For example, after running ``yarn add respond.js``, you try to require that module:
+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``,
+you try to require that module:
 
 .. code-block:: javascript
 

frontend/encore/installation.rst

@@ -14,8 +14,13 @@ 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
 the `WebpackEncoreBundle`_, create the ``assets/`` directory, add a
 ``webpack.config.js`` file, and add ``node_modules/`` to ``.gitignore``. You can
@@ -32,9 +37,10 @@ Install Encore into your project via Yarn:
 
 .. code-block:: terminal
 
+    # if you use the Yarn package manager
     $ yarn add @symfony/webpack-encore --dev
 
-    # if you prefer npm, run this command instead:
+    # 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
@@ -145,7 +151,7 @@ Next, open the new ``assets/app.js`` file which contains some JavaScript code
     // any CSS you import will output into a single css file (app.css in this case)
     import './styles/app.css';
 
-    // Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
+    // Need jQuery? Install it with "yarn add jquery"(or "npm install jquery"), then uncomment to import it.
     // import $ from 'jquery';
 
     console.log('Hello Webpack Encore! Edit me in assets/app.js');

frontend/encore/postcss.rst

@@ -23,8 +23,12 @@ 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:
 
 .. code-block:: javascript

frontend/encore/reactjs.rst

@@ -10,8 +10,12 @@ Using React? First add some dependencies with Yarn:
 
 .. 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``:
 
 .. code-block:: diff

frontend/encore/simple-example.rst

@@ -55,23 +55,33 @@ together and - thanks to the first ``app`` argument - output final ``app.js`` an
 
 .. _encore-build-assets:
 
-To build the assets, run:
+To build the assets, run the following if you use the Yarn package manager:
 
 .. code-block:: terminal
 
     # compile assets once
     $ yarn encore dev
-    # if you prefer npm, run:
-    $ npm run dev
 
     # or, recompile assets automatically when files change
     $ yarn encore dev --watch
-    # if you prefer npm, run:
-    $ npm run watch
 
     # on deploy, create a production build
     $ yarn encore production
-    # if you prefer npm, run:
+
+    # if you use the npm package manager
+    $ npm install react react-dom prop-types --save
+
+If you use the npm package manager, run the following commands instead:
+
+.. code-block:: terminal
+
+    # compile assets once
+    $ npm run dev
+
+    # or, recompile assets automatically when files change
+    $ npm run watch
+
+    # on deploy, create a production build
     $ npm run build
 
 .. note::
@@ -161,8 +171,12 @@ 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``:
 
 .. code-block:: diff
@@ -222,8 +236,12 @@ and restart Encore:
 
 .. code-block:: terminal
 
+    # if you use the Yarn package manager
     $ yarn run encore dev --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
 in your build directory. And, if any of those files require/import CSS, Webpack
 will *also* output ``checkout.css`` and ``account.css`` files.
@@ -291,9 +309,14 @@ 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@^10.0.0 sass --dev
     $ yarn encore dev --watch
 
+    # if you use the npm package manager
+    $ npm install sass-loader@^10.0.0 sass --save-dev
+    $ npm run watch
+
 Your app now supports Sass. Encore also supports LESS and Stylus. See
 :doc:`/frontend/encore/css-preprocessors`.
 

frontend/encore/vuejs.rst

@@ -69,8 +69,12 @@ your Vue.js app update *without* a browser refresh! To activate it, use the
 
 .. 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
+
 That's it! Change one of your ``.vue`` files and watch your browser update. But
 note: this does *not* currently work for *style* changes in a ``.vue`` file. Seeing
 updated styles still requires a page refresh.