Use Yarn instead of NPM (#5541)

Author: kravets-levko

.circleci/Dockerfile.cypress

@@ -1,11 +1,11 @@
-FROM cypress/browsers:node14.0.0-chrome84
+FROM cypress/browsers:node14.17.0-chrome91-ff89
 
 ENV APP /usr/src/app
 WORKDIR $APP
 
-COPY package.json package-lock.json $APP/
+COPY package.json yarn.lock .yarnrc $APP/
 COPY viz-lib $APP/viz-lib
-RUN npm ci > /dev/null
+RUN npm install yarn@1.22.10 -g && yarn --frozen-lockfile --network-concurrency 1 > /dev/null
 
 COPY . $APP
 

.circleci/config.yml

@@ -2,15 +2,17 @@ version: 2.0
 
 build-docker-image-job: &build-docker-image-job
   docker:
-    - image: circleci/node:12
+    - image: circleci/node:14.17
   steps:
-    - setup_remote_docker
+    - setup_remote_docker:
+        version: 19.03.13
     - checkout
     - run: sudo apt update
     - run: sudo apt install python3-pip
     - run: sudo pip3 install -r requirements_bundles.txt
     - run: .circleci/update_version
-    - run: npm run bundle
+    - run: sudo npm install --global --force yarn@1.22.10
+    - run: yarn bundle
     - run: .circleci/docker_build
 jobs:
   backend-lint:
@@ -27,7 +29,8 @@ jobs:
     docker:
       - image: circleci/buildpack-deps:xenial
     steps:
-      - setup_remote_docker
+      - setup_remote_docker:
+          version: 19.03.13
       - checkout
       - run:
           name: Build Docker Images
@@ -61,34 +64,36 @@ jobs:
       CYPRESS_INSTALL_BINARY: 0
       PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
     docker:
-      - image: circleci/node:12
+      - image: circleci/node:14.17
     steps:
       - checkout
       - run: mkdir -p /tmp/test-results/eslint
-      - run: npm ci
-      - run: npm run lint:ci
+      - run: sudo npm install --global --force yarn@1.22.10
+      - run: yarn cache clean && yarn --frozen-lockfile --network-concurrency 1
+      - run: yarn lint:ci
       - store_test_results:
           path: /tmp/test-results
   frontend-unit-tests:
     environment:
       CYPRESS_INSTALL_BINARY: 0
       PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
     docker:
-      - image: circleci/node:12
+      - image: circleci/node:14.17
     steps:
       - checkout
       - run: sudo apt update
       - run: sudo apt install python3-pip
       - run: sudo pip3 install -r requirements_bundles.txt
-      - run: npm ci
-      - run: npm run bundle
+      - run: sudo npm install --global --force yarn@1.22.10
+      - run: yarn cache clean && yarn --frozen-lockfile --network-concurrency 1
+      - run: yarn bundle
       - run:
           name: Run App Tests
-          command: npm test
+          command: yarn test
       - run:
           name: Run Visualizations Tests
-          command: (cd viz-lib && npm test)
-      - run: npm run lint
+          command: (cd viz-lib && yarn test)
+      - run: yarn lint
   frontend-e2e-tests:
     environment:
       COMPOSE_FILE: .circleci/docker-compose.cypress.yml
@@ -99,9 +104,10 @@ jobs:
       CYPRESS_INSTALL_BINARY: 0
       PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
     docker:
-      - image: circleci/node:12
+      - image: circleci/node:14.17
     steps:
-      - setup_remote_docker
+      - setup_remote_docker:
+          version: 19.03.13
       - checkout
       - run:
           name: Enable Code Coverage report for master branch
@@ -110,19 +116,19 @@ jobs:
               echo 'export CODE_COVERAGE=true' >> $BASH_ENV
               source $BASH_ENV
             fi
+      - run: sudo npm install --global --force yarn@1.22.10
       - run:
-          name: Install npm dependencies
-          command: |
-            npm ci
+          name: Install frontend dependencies
+          command: yarn cache clean && yarn --frozen-lockfile --network-concurrency 1
       - run:
           name: Setup Redash server
           command: |
-            npm run cypress build
-            npm run cypress start -- --skip-db-seed
-            docker-compose run cypress npm run cypress db-seed
+            yarn cypress build
+            yarn cypress start -- --skip-db-seed
+            docker-compose run cypress yarn cypress db-seed
       - run:
           name: Execute Cypress tests
-          command: npm run cypress run-ci
+          command: yarn cypress run-ci
       - run:
           name: "Failure: output container logs to console"
           command: |

.nvmrc

@@ -0,0 +1 @@
+v14.16.1

.yarn/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

.yarnrc

@@ -1,4 +1,6 @@
-FROM node:12 as frontend-builder
+FROM node:14.17 as frontend-builder
+
+RUN npm install --global --force yarn@1.22.10
 
 # Controls whether to build the frontend assets
 ARG skip_frontend_build
@@ -10,18 +12,19 @@ RUN useradd -m -d /frontend redash
 USER redash
 
 WORKDIR /frontend
-COPY --chown=redash package.json package-lock.json /frontend/
+COPY --chown=redash package.json yarn.lock .yarnrc /frontend/
 COPY --chown=redash viz-lib /frontend/viz-lib
 
 # Controls whether to instrument code for coverage information
 ARG code_coverage
 ENV BABEL_ENV=${code_coverage:+test}
 
-RUN if [ "x$skip_frontend_build" = "x" ] ; then npm ci --unsafe-perm; fi
+RUN if [ "x$skip_frontend_build" = "x" ] ; then yarn --frozen-lockfile --network-concurrency 1; fi
 
 COPY --chown=redash client /frontend/client
 COPY --chown=redash webpack.config.js /frontend/
-RUN if [ "x$skip_frontend_build" = "x" ] ; then npm run build; else mkdir -p /frontend/client/dist && touch /frontend/client/dist/multi_org.html && touch /frontend/client/dist/index.html; fi
+RUN if [ "x$skip_frontend_build" = "x" ] ; then yarn build; else mkdir -p /frontend/client/dist && touch /frontend/client/dist/multi_org.html && touch /frontend/client/dist/index.html; fi
+
 FROM python:3.7-slim
 
 EXPOSE 5000
@@ -57,7 +60,7 @@ RUN apt-get update && \
     libsasl2-dev \
     unzip \
     libsasl2-modules-gssapi-mit && \
-  # MSSQL ODBC Driver:  
+  # MSSQL ODBC Driver:
   curl https://packages.microsoft.com/keys/microsoft.asc | apt-key add - && \
   curl https://packages.microsoft.com/config/debian/10/prod.list > /etc/apt/sources.list.d/mssql-release.list && \
   apt-get update && \

Dockerfile

@@ -35,20 +35,20 @@ backend-unit-tests: up test_db
 	docker-compose run --rm --name tests server tests
 
 frontend-unit-tests: bundle
-	CYPRESS_INSTALL_BINARY=0 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 npm ci
-	npm run bundle
-	npm test
+	CYPRESS_INSTALL_BINARY=0 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 yarn --frozen-lockfile
+	yarn bundle
+	yarn test
 
 test: lint backend-unit-tests frontend-unit-tests
 
 build: bundle
-	npm run build
+	yarn build
 
 watch: bundle
-	npm run watch
+	yarn watch
 
 start: bundle
-	npm run start
+	yarn start
 
 redis-cli:
 	docker-compose run --rm redis redis-cli -h redis

Makefile

@@ -118,6 +118,6 @@ switch (command) {
     stopServer();
     break;
   default:
-    console.log("Usage: npm run cypress [build|start|db-seed|open|run|stop]");
+    console.log("Usage: yarn cypress [build|start|db-seed|open|run|stop]");
     break;
 }

client/cypress/cypress.js

@@ -1,10 +1,14 @@
 [build]
   base    = "client"
   publish = "client/dist"
-  command = "npm ci && npm run build"
+  # Netlify doesn't seem to install Yarn even though NETLIFY_USE_YARN is set below
+  # command = "cd ../ && npm i -g yarn@1.22.10 && yarn --frozen-lockfile --force && cd viz-lib && yarn build:babel && cd .. && rm -r ./node_modules/@redash/viz && cp -r ./viz-lib/. ./node_modules/@redash/viz && yarn build && cd ./client"
+  command = "cd ../ && npm i -g yarn@1.22.10 && yarn cache clean && yarn --frozen-lockfile --network-concurrency 1 && yarn build && cd ./client"
 
 [build.environment]
-  NODE_VERSION = "12.18.4"
+  NODE_VERSION = "14.16.1"
+  NETLIFY_USE_YARN = "true"
+  YARN_VERSION = "1.22.10"
   CYPRESS_INSTALL_BINARY = "0"
   PUPPETEER_SKIP_CHROMIUM_DOWNLOAD = "1"
 

netlify.toml

@@ -7,35 +7,36 @@
     "start": "npm-run-all --parallel watch:viz webpack-dev-server",
     "bundle": "bin/bundle-extensions",
     "clean": "rm -rf ./client/dist/",
-    "build:viz": "(cd viz-lib && npm run build:babel)",
-    "build": "npm run clean && npm run build:viz && NODE_ENV=production webpack",
-    "build:old-node-version": "npm run clean && NODE_ENV=production node --max-old-space-size=4096 node_modules/.bin/webpack",
+    "build:viz": "(cd viz-lib && yarn build:babel)",
+    "build": "yarn clean && yarn build:viz && NODE_ENV=production webpack",
+    "build:old-node-version": "yarn clean && NODE_ENV=production node --max-old-space-size=4096 node_modules/.bin/webpack",
     "watch:app": "webpack --watch --progress --colors -d",
-    "watch:viz": "(cd viz-lib && npm run watch:babel)",
+    "watch:viz": "(cd viz-lib && yarn watch:babel)",
     "watch": "npm-run-all --parallel watch:*",
     "webpack-dev-server": "webpack-dev-server",
-    "analyze": "npm run clean && BUNDLE_ANALYZER=on webpack",
-    "analyze:build": "npm run clean && NODE_ENV=production BUNDLE_ANALYZER=on webpack",
-    "lint": "npm run lint:base -- --ext .js --ext .jsx --ext .ts --ext .tsx ./client",
-    "lint:fix": "npm run lint:base  -- --fix --ext .js --ext .jsx --ext .ts --ext .tsx ./client",
+    "analyze": "yarn clean && BUNDLE_ANALYZER=on webpack",
+    "analyze:build": "yarn clean && NODE_ENV=production BUNDLE_ANALYZER=on webpack",
+    "lint": "yarn lint:base --ext .js --ext .jsx --ext .ts --ext .tsx ./client",
+    "lint:fix": "yarn lint:base  --fix --ext .js --ext .jsx --ext .ts --ext .tsx ./client",
     "lint:base": "eslint --config ./client/.eslintrc.js --ignore-path ./client/.eslintignore",
-    "lint:ci": "npm run lint -- --max-warnings 0 --format junit --output-file /tmp/test-results/eslint/results.xml",
+    "lint:ci": "yarn lint --max-warnings 0 --format junit --output-file /tmp/test-results/eslint/results.xml",
     "prettier": "prettier --write 'client/app/**/*.{js,jsx,ts,tsx}' 'client/cypress/**/*.{js,jsx,ts,tsx}'",
     "type-check": "tsc --noEmit --project client/tsconfig.json",
-    "type-check:watch": "npm run type-check -- --watch",
+    "type-check:watch": "yarn type-check --watch",
     "jest": "TZ=Africa/Khartoum jest",
     "test": "run-s type-check jest",
     "test:watch": "jest --watch",
     "cypress": "node client/cypress/cypress.js",
-    "postinstall": "(cd viz-lib && npm ci && npm run build:babel)"
+    "preinstall": "cd viz-lib && yarn link --link-folder ../.yarn",
+    "postinstall": "(cd viz-lib && yarn --frozen-lockfile && yarn build:babel) && yarn link --link-folder ./.yarn @redash/viz"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/getredash/redash.git"
   },
   "engines": {
-    "node": "^12.0.0",
-    "npm": "^6.0.0"
+    "node": "^14.16.1",
+    "yarn": "^1.22.10"
   },
   "author": "Redash Contributors",
   "license": "BSD-2-Clause",
@@ -154,7 +155,7 @@
     "webpack-manifest-plugin": "^2.0.4"
   },
   "optionalDependencies": {
-    "fsevents": "^1.2.9"
+    "fsevents": "^2.3.2"
   },
   "jest": {
     "rootDir": "./client",

package-lock.json

@@ -8,13 +8,13 @@
     "type-check": "tsc --noEmit",
     "type-gen": "tsc --emitDeclarationOnly",
     "build:babel:base": "babel src --out-dir lib --source-maps --ignore 'src/**/*.test.js' --copy-files --no-copy-ignored --extensions .ts,.tsx,.js,.jsx",
-    "build:babel": "npm run type-gen && npm run build:babel:base",
+    "build:babel": "yarn type-gen && yarn build:babel:base",
     "build:webpack": "webpack",
     "build": " NODE_ENV=production npm-run-all clean build:babel build:webpack",
-    "watch:babel": "npm run build:babel:base -- --watch",
+    "watch:babel": "yarn build:babel:base --watch",
     "watch:webpack": "webpack --watch",
     "watch": "npm-run-all --parallel watch:*",
-    "version": "npm run build",
+    "version": "yarn build",
     "prettier": "prettier --write 'src/**/*.{ts,tsx}'",
     "test": "jest",
     "test:watch": "jest --watch"