diff --git a/.doctor-rst.yaml b/.doctor-rst.yaml index 950324be7e4..c61210111a0 100644 --- a/.doctor-rst.yaml +++ b/.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: diff --git a/frontend/create_ux_bundle.rst b/frontend/create_ux_bundle.rst index eaadd3f1e41..87d6b123e42 100644 --- a/frontend/create_ux_bundle.rst +++ b/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: diff --git a/frontend/encore/advanced-config.rst b/frontend/encore/advanced-config.rst index cfe50ee1658..dec07e5d7b9 100644 --- a/frontend/encore/advanced-config.rst +++ b/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: diff --git a/frontend/encore/bootstrap.rst b/frontend/encore/bootstrap.rst index f5b3959eafd..f027b22ddc4 100644 --- a/frontend/encore/bootstrap.rst +++ b/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 diff --git a/frontend/encore/dev-server.rst b/frontend/encore/dev-server.rst index 4feecb3deec..5112b99448d 100644 --- a/frontend/encore/dev-server.rst +++ b/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 diff --git a/frontend/encore/faq.rst b/frontend/encore/faq.rst index 60dc7cc9e9d..709df68d2b3 100644 --- a/frontend/encore/faq.rst +++ b/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: diff --git a/frontend/encore/installation.rst b/frontend/encore/installation.rst index 118e15e7b0e..1753b770b36 100644 --- a/frontend/encore/installation.rst +++ b/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 `, 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 `. .. _`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 diff --git a/frontend/encore/postcss.rst b/frontend/encore/postcss.rst index 40b2dc43923..9f42f2606d0 100644 --- a/frontend/encore/postcss.rst +++ b/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: {} diff --git a/frontend/encore/reactjs.rst b/frontend/encore/reactjs.rst index facd7cdcbb6..4660b07603a 100644 --- a/frontend/encore/reactjs.rst +++ b/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``: diff --git a/frontend/encore/simple-example.rst b/frontend/encore/simple-example.rst index 9ba62c797ee..ce15976e464 100644 --- a/frontend/encore/simple-example.rst +++ b/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 diff --git a/frontend/encore/vuejs.rst b/frontend/encore/vuejs.rst index ca39808483e..1c403721188 100644 --- a/frontend/encore/vuejs.rst +++ b/frontend/encore/vuejs.rst @@ -73,10 +73,6 @@ 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 diff --git a/setup/symfony_server.rst b/setup/symfony_server.rst index 2e61d331bd4..5aa13399c71 100644 --- a/setup/symfony_server.rst +++ b/setup/symfony_server.rst @@ -288,7 +288,7 @@ server provides a ``run`` command to wrap them as follows: # compile Webpack assets using Symfony Encore ... but do that in the # background to not block the terminal - $ symfony run -d yarn encore dev --watch + $ symfony run -d npx encore dev --watch # continue working and running other commands... @@ -298,7 +298,7 @@ server provides a ``run`` command to wrap them as follows: # and you can also check if the command is still running $ symfony server:status Web server listening on ... - Command "yarn ..." running with PID ... + Command "npx ..." running with PID ... # stop the web server (and all the associated commands) when you are finished $ symfony server:stop @@ -351,9 +351,9 @@ If you like some processes to start automatically, along with the webserver # .symfony.local.yaml workers: # built-in command that builds and watches front-end assets - # yarn_encore_watch: - # cmd: ['yarn', 'encore', 'dev', '--watch'] - yarn_encore_watch: ~ + # npm_encore_watch: + # cmd: ['npx', 'encore', 'dev', '--watch'] + npm_encore_watch: ~ # built-in command that starts messenger consumer # messenger_consume_async: @@ -363,7 +363,7 @@ If you like some processes to start automatically, along with the webserver # you can also add your own custom commands build_spa: - cmd: ['yarn', '--cwd', './spa/', 'dev'] + cmd: ['npm', '--cwd', './spa/', 'dev'] # auto start Docker compose when starting server (available since Symfony CLI 5.7.0) docker_compose: ~