Migrate to yarn for installing dependencies

.github/PULL_REQUEST_TEMPLATE.md

@@ -17,5 +17,5 @@ _A very high-level summary of easily-reproducible changes that can be understood
 **Testing:**
 
 - [ ] Automated (jest and/or cypress) tests added (for new features) or updated (for existing features)
-- [ ] If necessary, I have run the local E2E non-smoke tests relevant to my changes (`CYPRESS_APP_ENV=local CYPRESS_SMOKE=false npm run test:e2e:interactive`)
+- [ ] If necessary, I have run the local E2E non-smoke tests relevant to my changes (`CYPRESS_APP_ENV=local CYPRESS_SMOKE=false yarn test:e2e:interactive`)
 - [ ] This PR requires manual testing

.github/workflows/simorgh-deploy-storybook.yml

@@ -21,15 +21,15 @@ jobs:
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: node-modules-${{ hashFiles('package-lock.json') }}
+          key: node-modules-${{ hashFiles('yarn.lock') }}
 
       - name: Install Node Modules
         if: steps.cache.outputs.cache-hit != 'true'
-        run: npm ci
+        run: yarn ci
 
       - name: Build Storybook
         run: |
-          npm run build:storybook
+          yarn build:storybook
           git config --global user.name "simorgh-bbc"
           git config --global user.email "DENewsSimorghDev@bbc.co.uk"
 

.github/workflows/simorgh-e2e-tests.yml

@@ -25,5 +25,5 @@ jobs:
       - name: Run Simorgh E2Es
         uses: cypress-io/github-action@v2
         with:
-          build: npm run build
-          start: npm start
+          build: yarn build
+          start: yarn start

.github/workflows/simorgh-integration-tests.yml

@@ -32,11 +32,11 @@ jobs:
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: node-modules-${{ hashFiles('package-lock.json') }}
+          key: node-modules-${{ hashFiles('yarn.lock') }}
 
       - name: Install Node Modules
         if: steps.cache.outputs.cache-hit != 'true'
-        run: npm ci
+        run: yarn ci
 
       - name: Integration Tests
-        run: npm run test:integration -- --ci
+        run: yarn test:integration -- --ci

.github/workflows/simorgh-local-server-tests.yml

@@ -31,28 +31,29 @@ jobs:
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: node-modules-${{ hashFiles('package-lock.json') }}
+          key: node-modules-${{ hashFiles('yarn.lock') }}
 
       - name: Install Node Modules
         if: steps.cache.outputs.cache-hit != 'true'
-        run: npm ci
+        run: yarn ci
 
       - name: Build Simorgh
-        run: npm run build:local
+        run: yarn build:local
 
       - name: Start Simorgh Server
         run: nohup node build/server.js > /dev/null 2>&1 &
 
       - name: Run AMP Validator
-        run: npm run amp:validate
+        run: yarn amp:validate
 
       - name: Run bbc-a11y
-        run: npm run bbcA11y:ci
+        run: yarn bbcA11y:ci
 
       - name: Run Lighthouse
-        run: npm run lighthouse
+        run: yarn lighthouse
 
       - name: Run Puppeteer Tests
         run: |
-          npm install --no-save puppeteer
-          npm run test:puppeteer
+          yarn add puppeteer
+          yarn test:puppeteer
+          yarn remove puppeteer

.github/workflows/simorgh-misc-checks.yml

@@ -33,11 +33,11 @@ jobs:
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: node-modules-${{ hashFiles('package-lock.json') }}
+          key: node-modules-${{ hashFiles('yarn.lock') }}
 
       - name: Install Node Modules
         if: steps.cache.outputs.cache-hit != 'true'
-        run: npm ci
+        run: yarn ci
 
       - name: Chromatic UI Tests
         uses: chromaui/action@v1
@@ -62,10 +62,10 @@ jobs:
         run: npx apache2-license-checker
 
       - name: Duplicate Dependency Checker
-        run: npm run test:dependencies
+        run: yarn test:dependencies
 
       - name: Linting
-        run: npm run test:lint
+        run: yarn test:lint
 
       - name: NPM Audit
         run: npx audit-ci --config audit-ci.json

.github/workflows/simorgh-unit-tests.yml

@@ -43,16 +43,16 @@ jobs:
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: node-modules-${{ hashFiles('package-lock.json') }}
+          key: node-modules-${{ hashFiles('yarn.lock') }}
 
       - name: Install Node Modules
         if: steps.cache.outputs.cache-hit != 'true'
-        run: npm ci
+        run: yarn ci
 
       - name: Build Simorgh
         run: |
           echo ${GITHUB_REF##*/}
-          npm run build
+          yarn build
 
       - name: Setup Code Climate Test Coverage
         if: ${{ github.event_name == 'push' || github.event.pull_request.head.repo.full_name == 'bbc/simorgh' }} # Only run if PR originates from the Simorgh repo
@@ -64,7 +64,7 @@ jobs:
           ./cc-test-reporter before-build
 
       - name: Unit Tests
-        run: npm run test:unit
+        run: yarn test:unit
 
       - name: Report Code Climate Test Coverage
         if: ${{ github.event_name == 'push' || github.event.pull_request.head.repo.full_name == 'bbc/simorgh' }} # Only run if PR originates from the Simorgh repo

.yarnrc

@@ -0,0 +1 @@
+version=1.22.10

AdHocCypress/README.md

@@ -1,17 +1,19 @@
 # Ad Hoc Cypress Tests
 
 ## General approach to end-to-end (E2E) testing
+
 This is documented in [the README in the primary directory of our cypress tests](https://github.com/bbc/simorgh/blob/latest/cypress/README.md).
 
 ## This suite of tests
+
 The purpose of this test suite is to allow for testing of ad-hoc functionality within the Simorgh application, without affecting the tests which are executed as part of the End-to-End tests in both the Test and Live environments.
 
 ## Running Ad Hoc Tests
 
-| Environment | Command                                       | 
-| ----------- | --------------------------------------------- |
-| local       | `CYPRESS_APP_ENV=local npm run cypress:adhoc` |
-| test        | `CYPRESS_APP_ENV=test npm run cypress:adhoc`  |
-| live        | `CYPRESS_APP_ENV=live npm run cypress:adhoc`  |
+| Environment | Command                                    |
+| ----------- | ------------------------------------------ |
+| local       | `CYPRESS_APP_ENV=local yarn cypress:adhoc` |
+| test        | `CYPRESS_APP_ENV=test yarn cypress:adhoc`  |
+| live        | `CYPRESS_APP_ENV=live yarn cypress:adhoc`  |
 
 As with the primary Cypress tests, the same [environment variables](https://github.com/bbc/simorgh#environment-variables) can also be used with the `cypress:adhoc` command

CONTRIBUTING.md

@@ -36,19 +36,44 @@ If you never created a pull request before, [here is a great tutorial on how to
 
 Fork the project, clone your fork, configure the remotes and install the dependencies:
 
+1. Clone your fork of the repo into the current directory
+
+   ```
+   git clone https://github.com/<YOUR ACCOUNT>/simorgh.git
+   ```
+
+2. Navigate to the newly cloned directory
+
+   ```
+   cd simorgh
+   ```
+
+3. Assign the original repo to a remote called "upstream"
+
+   ```
+   git remote add upstream https://github.com/bbc/simorgh
+   ```
+
+4. Use recommended version of node for the project, listed in [`.nvmrc`](https://github.com/bbc/simorgh/blob/latest/.nvmrc)
+
+   ```
+   nvm use
+   ```
+
+### Installing dependencies
+
+**Install Yarn**
+
+The Simorgh project uses Yarn for package management. To install Yarn, run this command:
+
+```
+npm install --global yarn
+```
+
+**Install the project dependencies with Yarn**
+
 ```
-# Clone your fork of the repo into the current directory
-git clone https://github.com/<YOUR ACCOUNT>/simorgh.git
-# Navigate to the newly cloned directory
-cd simorgh
-# Assign the original repo to a remote called "upstream"
-git remote add upstream https://github.com/bbc/simorgh
-# Use recommended version of node for the project, listed in `.nvmrc`
-nvm use
-# Install latest version of npm
-npm install --global npm@latest
-# Install the project dependencies
-npm install
+yarn install
 ```
 
 If it has been a while since you've cloned the repo, pull from the `latest` branch
@@ -119,7 +144,7 @@ Pick a JSON file under `data/news/articles/[id].json`, and:
 1. add an example of your block somewhere in the `content.model.blocks` array.
 2. add your new component to the `blockTypes` array.
 
-Run `npm run dev` and you should see your component at your article of choice, eg http://localhost:7080/news/articles/c0000000001o
+Run `yarn dev` and you should see your component at your article of choice, eg http://localhost:7080/news/articles/c0000000001o
 
 #### Update the schema
 
@@ -183,7 +208,7 @@ If on the other hand you are adding new files to the root directory of simorgh,
 
 ### `.env` is showing in my `git status`
 
-The `.env` file should not be commited as it is often overwritten by the values in `envConfig/` at build time. There is a `postshrinkwrap` command which runs after an `npm install` so should be run during setup of the application.
+The `.env` file should not be commited as it is often overwritten by the values in `envConfig/` at build time. There is a `postshrinkwrap` command which runs after an `yarn install` so should be run during setup of the application.
 
 If the `.env` file is appearing in your `git status` it means it is now longer being assumed as unchanged, to fix this run:
 

README.md

@@ -158,20 +158,28 @@ Install Node. [https://nodejs.org/en/](https://nodejs.org/en/). We use the versi
 nvm use
 ```
 
+#### Install Yarn
+
+The Simorgh project uses Yarn for package management. It is recommended to install Yarn through the npm package manager, which comes bundled with Node.js when you install it on your system. To install Yarn, run this command:
+
+```
+npm install --global yarn
+```
+
 Then you can run the following commands to install Simorgh
 
 ```
 git clone git@github.com:bbc/simorgh.git
 cd simorgh
-npm install
+yarn install
 ```
 
 ## Local Development
 
 To run this application locally, with hot-reloading, run
 
 ```
-npm run dev
+yarn dev
 ```
 
 The application will start on [http://localhost:7080](http://localhost:7080).
@@ -220,7 +228,7 @@ You can find other pages types by looking through our routes and their associate
 
 We use Storybook for developing components in isolation from the Simorgh Application. You can access this at [https://bbc.github.io/simorgh/](https://bbc.github.io/simorgh/)
 
-To run locally `npm run storybook`, it will then be available at [http://localhost:9001/](http://localhost:9001/). Introduction to and documentation for Storybook is here: [https://storybook.js.org/basics/introduction/](https://storybook.js.org/basics/introduction/).
+To run locally `yarn storybook`, it will then be available at [http://localhost:9001/](http://localhost:9001/). Introduction to and documentation for Storybook is here: [https://storybook.js.org/basics/introduction/](https://storybook.js.org/basics/introduction/).
 
 When viewing Video stories locally, make sure to use a BBC domain, as outlined in the [changing request location section](https://github.com/bbc/simorgh#changing-request-location). Video will not work in the hosted version of Storybook linked above for this reason.
 
@@ -231,9 +239,9 @@ Please also note that if you would like to see the components rendered with our
 ## Production build locally
 
 To run this application locally with a production build, run:
-`npm run build && npm run start`.
+`yarn build && yarn start`.
 
-We use `npm run build` locally which bundles the application pointing at localhost for data and static assets.
+We use `yarn build` locally which bundles the application pointing at localhost for data and static assets.
 
 ## Using environment builds locally
 
@@ -243,14 +251,14 @@ To run TEST bundles on localhost:
 
 - In `envConfig/test.env` change the values of:
   - `LOG_DIR='/var/log/simorgh'` to `LOG_DIR='log'`
-- Then run `rm -rf build && npm run build:test && npm run start`
+- Then run `rm -rf build && yarn build:test && yarn start`
 - Visit a test article: http://localhost:7080/news/articles/c0g992jmmkko
 
 To run LIVE bundles on localhost:
 
 - In `envConfig/live.env` change the values of:
   - `LOG_DIR='/var/log/simorgh'` to `LOG_DIR='log'`
-- Then run `rm -rf build && npm run build:live && npm run start`
+- Then run `rm -rf build && yarn build:live && yarn start`
 - Visit a live article: http://localhost:7080/news/articles/c8xxl4l3dzeo
 
 ## Changing request location
@@ -273,15 +281,15 @@ On deployment `make buildCi` is run in the CI environment which creates bundles
 
 ### Bundle analysis reports
 
-Every run of `npm run build` will update the bundle analysis files in the repo. To view a breakdown of the bundle size, open the generated html report in a browser `./reports/webpackBundleReport.html` This is generated via `webpack-bundle-analyzer`. The data is also available as json `./reports/webpackBundleReport.json`.
+Every run of `yarn build` will update the bundle analysis files in the repo. To view a breakdown of the bundle size, open the generated html report in a browser `./reports/webpackBundleReport.html` This is generated via `webpack-bundle-analyzer`. The data is also available as json `./reports/webpackBundleReport.json`.
 
 ## Tests
 
 ### Linting and unit tests
 
-We have linting with the [Airbnb styleguide](https://github.com/airbnb/javascript/tree/master/react) and we use [Prettier](https://github.com/prettier/prettier) as a code formatter. They can be run with `npm run test:lint`.
+We have linting with the [Airbnb styleguide](https://github.com/airbnb/javascript/tree/master/react) and we use [Prettier](https://github.com/prettier/prettier) as a code formatter. They can be run with `yarn test:lint`.
 
-We have [Jest](https://facebook.github.io/jest) unit tests that can be run with `npm run test:unit`.
+We have [Jest](https://facebook.github.io/jest) unit tests that can be run with `yarn test:unit`.
 
 `npm test` runs both sets of these.
 
@@ -292,14 +300,14 @@ We have [Jest](https://facebook.github.io/jest) unit tests that can be run with
 We use [Cypress](https://www.cypress.io/) for our end-to-end tests. To run the [smoke tests](https://github.com/bbc/simorgh/tree/latest/cypress/integration#how-our-cypress-tests-work) locally, run this single command:
 
 ```
-npm run test:e2e
+yarn test:e2e
 ```
 
 It will spin up a production server on port 7080 and run the Cypress tests against that.
 To run the smoke tests interactively, run:
 
 ```
-npm run test:e2e:interactive
+yarn test:e2e:interactive
 ```
 
 This loads a user interface which easily allows for individual tests to be run alongside a visual stream of the browser, as the tests run.
@@ -320,16 +328,16 @@ These commands can be run in combination.
 
 #### Full suite of tests
 
-The default way to run the e2e suite aka `npm run test:e2e` or `npm run test:e2e:interactive` runs a subset of our tests, otherwise know as _smoke tests_. To run the full suite:
+The default way to run the e2e suite aka `yarn test:e2e` or `yarn test:e2e:interactive` runs a subset of our tests, otherwise know as _smoke tests_. To run the full suite:
 
-`CYPRESS_SMOKE=false npm run test:e2e`
+`CYPRESS_SMOKE=false yarn test:e2e`
 
 #### Limiting scope of runs
 
 Tests can be restricted to only run for a single service by specifying it using the `CYPRESS_ONLY_SERVICE` environment variable. For example:
 
 ```
-CYPRESS_ONLY_SERVICE=urdu npm run test:e2e
+CYPRESS_ONLY_SERVICE=urdu yarn test:e2e
 ```
 
 To run only a particular spec it is necessary to invoke Cypress directly. First ensure Simorgh is already running in another tab and then run (for example, to only run article tests):
@@ -349,7 +357,7 @@ Cypress .visit() function is locked to visiting a single domain per test. This b
 Here is an example command:
 
 ```
-CYPRESS_APP_ENV=test CYPRESS_UK=true CYPRESS_SMOKE=true npm run cypress
+CYPRESS_APP_ENV=test CYPRESS_UK=true CYPRESS_SMOKE=true yarn cypress
 ```
 
 #### Running e2e outside EU
@@ -361,13 +369,13 @@ Running Cypress tests outside the EU will not show the EU consent banners on AMP
 An example command will be:
 
 ```
-CYPRESS_SKIP_EU=true npm run cypress:interactive
+CYPRESS_SKIP_EU=true yarn cypress:interactive
 ```
 
 The following command runs both simorgh and cypress:
 
 ```
-CYPRESS_APP_ENV=local CYPRESS_UK=true CYPRESS_SMOKE=true npm run test:e2e
+CYPRESS_APP_ENV=local CYPRESS_UK=true CYPRESS_SMOKE=true yarn test:e2e
 ```
 
 CYPRESS_APP_ENV can also be set equal to 'test' and 'live'.