resolves #15575

add npm equivalent of yarn commands in a separate code block.

Author: havijs

frontend/encore/advanced-config.rst

@@ -103,9 +103,15 @@ state of the current configuration to build a new one:
 When running Encore, both configurations will be built in parallel. If you
 prefer to build configs separately, pass the ``--config-name`` option:
 
-.. code-block:: terminal
+.. configuration-block::
 
-    $ yarn encore dev --config-name firstConfig
+    .. code-block:: terminal
+
+        $ yarn encore dev --config-name firstConfig
+
+    .. code-block:: terminal
+
+        $ npm run dev -- --config-name firstConfig
 
 Next, define the output directories of each build:
 

frontend/encore/bootstrap.rst

@@ -5,9 +5,15 @@ This article explains how to install and integrate the `Bootstrap CSS framework`
 in your Symfony application using :doc:`Webpack Encore </frontend>`.
 First, to be able to customize things further, we'll install ``bootstrap``:
 
-.. code-block:: terminal
+.. configuration-block::
 
-    $ yarn add bootstrap --dev
+    .. code-block:: terminal
+
+        $ yarn add bootstrap --dev
+
+    .. code-block:: terminal
+
+        $ npm install bootstrap --save-dev
 
 Importing Bootstrap Styles
 --------------------------
@@ -40,10 +46,17 @@ Importing Bootstrap JavaScript
 First, install the JavaScript dependencies required by the Bootstrap version
 used in your application:
 
-.. code-block:: terminal
+.. configuration-block::
+
+    .. code-block:: terminal
+
+        // jQuery is only required in versions prior to Bootstrap 5
+        $ yarn add jquery @popperjs/core --dev
+
+    .. code-block:: terminal
 
-    // jQuery is only required in versions prior to Bootstrap 5
-    $ yarn add jquery @popperjs/core --dev
+        // 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:
 

frontend/encore/dev-server.rst

@@ -4,9 +4,15 @@ Using webpack-dev-server and HMR
 While developing, instead of using ``yarn encore dev --watch``, you can use the
 `webpack-dev-server`_:
 
-.. code-block:: terminal
+.. configuration-block::
+
+    .. code-block:: terminal
+
+        $ yarn encore dev-server
+
+    .. code-block:: terminal
 
-    $ yarn encore dev-server
+        $ 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``.
@@ -21,9 +27,15 @@ you're done: the paths in your templates will automatically point to the dev ser
 The ``dev-server`` command supports all the options defined by `webpack-dev-server`_.
 You can set these options via command line options:
 
-.. code-block:: terminal
+.. configuration-block::
+
+    .. code-block:: terminal
+
+        $ yarn encore dev-server --https --port 9000
+
+    .. code-block:: terminal
 
-    $ yarn encore dev-server --https --port 9000
+        $ npm run dev-server -- --https --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

@@ -11,10 +11,17 @@ Installing Encore in Symfony Applications
 Run these commands to install both the PHP and JavaScript dependencies in your
 project:
 
-.. code-block:: terminal
+.. configuration-block::
 
-    $ composer require symfony/webpack-encore-bundle
-    $ yarn install
+    .. code-block:: terminal
+
+        $ composer require symfony/webpack-encore-bundle
+        $ yarn install
+
+    .. code-block:: terminal
+
+        $ composer require symfony/webpack-encore-bundle
+        $ npm install
 
 If you are using :ref:`Symfony Flex <symfony-flex>`, this will install and enable
 the `WebpackEncoreBundle`_, create the ``assets/`` directory, add a
@@ -30,12 +37,15 @@ Installing Encore in non Symfony Applications
 
 Install Encore into your project via Yarn:
 
-.. code-block:: terminal
+.. configuration-block::
+
+    .. code-block:: terminal
+
+        $ yarn add @symfony/webpack-encore --dev
 
-    $ yarn add @symfony/webpack-encore --dev
+    .. code-block:: terminal
 
-    # if you prefer npm, run this command instead:
-    $ npm install @symfony/webpack-encore --save-dev
+        $ 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
@@ -145,7 +155,7 @@ Next, open the new ``assets/js/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 '../css/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/js/app.js');

frontend/encore/postcss.rst

@@ -21,9 +21,15 @@ Encore, you're done!
 
 Next, download any plugins you want, like ``autoprefixer``:
 
-.. code-block:: terminal
+.. configuration-block::
 
-    $ yarn add autoprefixer --dev
+  .. code-block:: terminal
+
+      $ yarn add autoprefixer --dev
+
+  .. code-block:: terminal
+
+      $ npm install autoprefixer --save-dev
 
 Next, create a ``postcss.config.js`` file at the root of your project:
 

frontend/encore/reactjs.rst

@@ -8,9 +8,16 @@ Enabling React.js
 
 Using React? First add some dependencies with Yarn:
 
-.. code-block:: terminal
 
-    $ yarn add react react-dom prop-types
+.. configuration-block::
+
+    .. code-block:: terminal
+
+        $ yarn add react react-dom prop-types
+
+    .. code-block:: terminal
+
+        $ npm install react react-dom prop-types --save
 
 Enable react in your ``webpack.config.js``:
 

frontend/encore/simple-example.rst

@@ -59,22 +59,29 @@ together and - thanks to the first ``app`` argument - output final ``app.js`` an
 
 To build the assets, run:
 
-.. code-block:: terminal
+.. configuration-block::
+
+    .. code-block:: terminal
+
+        # compile assets once
+        $ yarn encore dev
+
+        # or, recompile assets automatically when files change
+        $ yarn encore dev --watch
+
+        # on deploy, create a production build
+        $ yarn encore production
 
-    # compile assets once
-    $ yarn encore dev
-    # if you prefer npm, run:
-    $ npm run dev
+    .. code-block:: terminal
 
-    # or, recompile assets automatically when files change
-    $ yarn encore dev --watch
-    # if you prefer npm, run:
-    $ npm run watch
+        # compile assets once
+        $ npm run dev
 
-    # on deploy, create a production build
-    $ yarn encore production
-    # if you prefer npm, run:
-    $ npm run build
+        # or, recompile assets automatically when files change
+        $ npm run watch
+
+        # on deploy, create a production build
+        $ npm run build
 
 .. note::
 
@@ -159,9 +166,15 @@ files. First, create a file that exports a function:
 
 We'll use jQuery to print this message on the page. Install it via:
 
-.. code-block:: terminal
+.. configuration-block::
+
+    .. code-block:: terminal
+
+        $ yarn add jquery --dev
+
+    .. code-block:: terminal
 
-    $ yarn add jquery --dev
+        $ npm install jquery --save-dev
 
 Great! Use ``require()`` to import ``jquery`` and ``greet.js``:
 
@@ -251,9 +264,16 @@ Next, use ``addEntry()`` to tell Webpack to read these two new files when it bui
 And because you just changed the ``webpack.config.js`` file, make sure to stop
 and restart Encore:
 
-.. code-block:: terminal
 
-    $ yarn run encore dev --watch
+.. configuration-block::
+
+    .. code-block:: terminal
+
+        $ yarn run encore dev --watch
+
+    .. code-block:: terminal
+
+        $ 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
@@ -320,10 +340,17 @@ Encore. When you do, you'll see an error!
 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
+.. configuration-block::
+
+    .. code-block:: terminal
+
+        $ yarn add sass-loader@^10.0.0 sass --dev
+        $ yarn encore dev --watch
+
+    .. code-block:: terminal
 
-    $ yarn add sass-loader@^10.0.0 sass --dev
-    $ yarn encore dev --watch
+        $ 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/url-loader.rst

@@ -8,9 +8,15 @@ generated CSS files.
 Webpack Encore provides this feature via Webpack's `URL Loader`_ plugin, but
 it's disabled by default. First, add the URL loader to your project:
 
-.. code-block:: terminal
+.. configuration-block::
 
-    $ yarn add url-loader --dev
+    .. code-block:: terminal
+
+        $ yarn add url-loader --dev
+
+    .. code-block:: terminal
+
+        $ npm install url-loader --save-dev
 
 Then enable it in your ``webpack.config.js``:
 

frontend/encore/vuejs.rst

@@ -35,9 +35,15 @@ The ``vue-loader`` supports hot module replacement: just update your code and wa
 your Vue.js app update *without* a browser refresh! To activate it, use the
 ``dev-server`` with the ``--hot`` option:
 
-.. code-block:: terminal
+.. configuration-block::
 
-    $ yarn encore dev-server --hot
+    .. code-block:: terminal
+
+        $ yarn encore dev-server --hot
+
+    .. code-block:: terminal
+
+        $ npm run dev-server -- --hot
 
 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