Use NPM instead of Yarn (#174)

* Use npm instead of Yarn

* Fix working directory

* Fix backend action

* Avoid using yarn

* Fix to use npm run on scripts

* Fix npm run on jest tests

* Fix prettier styles

* Adjust jest config

* Adjust coverage

* Fix dockerfile

* Fix production environment

.github/workflows/backend-lint.yaml

@@ -42,9 +42,9 @@ jobs:
                   tools: cs2pr, composer
 
             - name: Install all Composer dependencies
-              uses: ramsey/composer-install@v1
+              uses: ramsey/composer-install@v2
               with:
-                  composer-options: --working-dir=backend --prefer-dist --no-scripts
+                  working-directory: backend
 
             - name: Execute PHP CS Fixer to ensure coding standards
               run: composer php-cs-fixer -- --dry-run --format=checkstyle | cs2pr

.github/workflows/backend-qa.yaml

@@ -42,9 +42,9 @@ jobs:
                   tools: cs2pr, composer
 
             - name: Install all Composer dependencies
-              uses: ramsey/composer-install@v1
+              uses: ramsey/composer-install@v2
               with:
-                  composer-options: --working-dir=backend --prefer-dist --no-scripts
+                  working-directory: backend
 
             - name: Run PHPUnit to generate a compiled container for PHPStan
               run: vendor/bin/phpunit

.github/workflows/backend-test.yaml

@@ -45,9 +45,9 @@ jobs:
               run: echo "::add-matcher::${{ runner.tool_cache }}/phpunit.json"
 
             - name: Installs Composer
-              uses: ramsey/composer-install@v1
+              uses: ramsey/composer-install@v2
               with:
-                  composer-options: --working-dir=backend --prefer-dist --no-scripts
+                  working-directory: backend
 
             - name: Execute PHPUnit
               run: vendor/bin/phpunit --coverage-clover build/logs/clover.xml

.github/workflows/frontend-build.yaml

@@ -28,7 +28,7 @@ jobs:
 
         strategy:
             matrix:
-                node: ['14.15']
+                node: ['17.4']
 
         steps:
             - name: Checkout the repository to Github workspace
@@ -39,19 +39,10 @@ jobs:
               with:
                   node-version: ${{ matrix.node }}
 
-            - name: Find Yarn cache directory
-              id: yarn-cache
-              run: echo "::set-output name=dir::$(yarn cache dir)"
-
-            - name: Recover Yarn cache to speed up builds
-              uses: actions/cache@v2
-              with:
-                  path: ${{ steps.yarn-cache.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: ${{ runner.os }}-yarn-
-
             - name: Install all NPM dependencies
-              run: yarn install --frozen-lockfile
+              uses: bahmutov/npm-install@v1
+              with:
+                  working-directory: frontend
 
             - name: Build Next.js application
-              run: yarn build
+              run: npm run build

.github/workflows/frontend-lint.yaml

@@ -28,7 +28,7 @@ jobs:
 
         strategy:
             matrix:
-                node: ['14.15']
+                node: ['17.4']
 
         steps:
             - name: Checkout the repository to Github workspace
@@ -39,22 +39,13 @@ jobs:
               with:
                   node-version: ${{ matrix.node }}
 
-            - name: Find Yarn cache directory
-              id: yarn-cache
-              run: echo "::set-output name=dir::$(yarn cache dir)"
-
-            - name: Recover Yarn cache to speed up builds
-              uses: actions/cache@v2
-              with:
-                  path: ${{ steps.yarn-cache.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: ${{ runner.os }}-yarn-
-
             - name: Install all NPM dependencies
-              run: yarn install --frozen-lockfile
+              uses: bahmutov/npm-install@v1
+              with:
+                  working-directory: frontend
 
             - name: Run ESLint to ensure Javascript coding standards
-              run: yarn run eslint components contexts types hooks layouts lib pages ui tests
+              run: npx eslint components contexts types hooks layouts lib pages ui tests
 
             - name: Run Prettier to ensure Javascript styling
-              run: yarn run prettier --check **/*.{js,ts,tsx}
+              run: npx prettier --check **/*.{js,ts,tsx}

.github/workflows/frontend-test.yaml

@@ -28,7 +28,7 @@ jobs:
 
         strategy:
             matrix:
-                node: ['14.15']
+                node: ['17.4']
 
         steps:
             - name: Checkout the repository to Github workspace
@@ -39,22 +39,13 @@ jobs:
               with:
                   node-version: ${{ matrix.node }}
 
-            - name: Find Yarn cache directory
-              id: yarn-cache
-              run: echo "::set-output name=dir::$(yarn cache dir)"
-
-            - name: Recover Yarn cache to speed up builds
-              uses: actions/cache@v2
-              with:
-                  path: ${{ steps.yarn-cache.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: ${{ runner.os }}-yarn-
-
             - name: Install all NPM dependencies
-              run: yarn install --frozen-lockfile
+              uses: bahmutov/npm-install@v1
+              with:
+                  working-directory: frontend
 
             - name: Execute Jest Unit tests
-              run: yarn run test --coverage
+              run: npm run test -- --coverage
 
             - name: Send coverage to Codecov
               uses: codecov/codecov-action@v2
@@ -70,7 +61,7 @@ jobs:
 
         strategy:
             matrix:
-                node: ['14.15']
+                node: ['17.4']
 
         steps:
             - name: Checkout the repository to Github workspace
@@ -81,26 +72,17 @@ jobs:
               with:
                   node-version: ${{ matrix.node }}
 
-            - name: Find Yarn cache directory
-              id: yarn-cache
-              run: echo "::set-output name=dir::$(yarn cache dir)"
-
-            - name: Recover Yarn cache to speed up builds
-              uses: actions/cache@v2
-              with:
-                  path: ${{ steps.yarn-cache.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: ${{ runner.os }}-yarn-
-
             - name: Install all NPM dependencies
-              run: yarn install --frozen-lockfile
+              uses: bahmutov/npm-install@v1
+              with:
+                  working-directory: frontend
 
             - name: Execute Cypress E2E tests
               uses: cypress-io/github-action@v2
               with:
                 install: false
-                build: yarn run build-e2e
-                start: yarn run start-e2e
+                build: npm run build-e2e
+                start: npm run start-e2e
                 wait-on: 'http://localhost:3000'
                 parallel: true
                 record: true

frontend/.gitignore

@@ -29,8 +29,6 @@ designtokens.config.json
 
 # debug
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 # local env files
 .env.local

frontend/.nvmrc

@@ -1 +1 @@
-v14.15.0
+17.4

frontend/Dockerfile

@@ -6,7 +6,7 @@
 # file that was distributed with this source code.
 
 # BASE
-FROM node:14.15-buster as base
+FROM node:17.4 as base
 
 RUN apt-get update \
     && apt-get install -y --no-install-recommends \
@@ -17,25 +17,25 @@ RUN apt-get update \
 WORKDIR /usr/app
 
 COPY package.json /usr/app/package.json
-COPY yarn.lock /usr/app/yarn.lock
+COPY package-lock.json /usr/app/package-lock.json
 
-RUN yarn install --frozen-lockfile
+RUN npm clean-install
 
 
 # NEXT PROD
 FROM base as next
 
-RUN yarn global add pm2
+RUN npm install --global pm2
 
 COPY . /usr/app
 
-CMD ["pm2-runtime", "start", "yarn", "--interpreter", "bash", "--", "build-start"]
+CMD ["pm2-runtime", "npm", "--", "run", "build-start"]
 
 
 # NEXT DEV
 FROM base as next-dev
 
-CMD ["yarn", "dev"]
+CMD ["npm", "run", "dev"]
 
 
 # NGINX

frontend/contexts/AuthContext.tsx

@@ -170,7 +170,8 @@ const AuthProvider = ({ children }) => {
         updateUser,
         updateLogingStatus,
         updateCreateFishbowl
-      }}>
+      }}
+    >
       {children}
     </AuthContext.Provider>
   );

frontend/contexts/DevicesContext.tsx

@@ -143,7 +143,8 @@ const DevicesProvider = ({ children }) => {
         audioInputDevice,
         videoDevice,
         devices
-      }}>
+      }}
+    >
       {children}
     </DevicesContext.Provider>
   );

frontend/contexts/StooaManager.tsx

@@ -201,7 +201,8 @@ const StooaProvider = ({ data, isModerator, children }) => {
         isModerator,
         onIntroduction,
         timeStatus
-      }}>
+      }}
+    >
       {children}
     </StooaContext.Provider>
   );

frontend/jest.config.js

@@ -15,13 +15,15 @@ module.exports = {
   // The directory where Jest should output its coverage files
   coverageDirectory: '.coverage',
   collectCoverageFrom: [
-    "**/*.{js,jsx,ts,tsx}",
-    "!**/node_modules/**",
-    "!**/.coverage/**",
-    "!**/__setups__/**",
-    "!**/public/vendor/**",
-    "!**/tests/**",
-    "!**/{jest,next,prettier}.config.js"
+    '**/*.{js,jsx,ts,tsx}',
+    '!**/__setups__/**',
+    '!**/.coverage/**',
+    '!**/.next/**',
+    '!**/coverage/**',
+    '!**/node_modules/**',
+    '!**/public/vendor/**',
+    '!**/tests/**',
+    '!**/{jest,next,prettier}.config.js'
   ],
   moduleNameMapper: {
     '\\.(css|less|scss|sss|styl)$': '<rootDir>/node_modules/jest-css-modules',
@@ -36,14 +38,14 @@ module.exports = {
     '^@/pages/(.*)': '<rootDir>/pages/$1',
     '^@/ui/(.*)': '<rootDir>/ui/$1',
     '^@/app.config': '<rootDir>/app.config.ts',
-    '^@/i18n': '<rootDir>/i18n.js',
+    '^@/i18n': '<rootDir>/i18n.js'
   },
   transform: {
     '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest'],
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/__setups__/fileTransformer.js',
+      '<rootDir>/__setups__/fileTransformer.js'
   },
   testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  setupFilesAfterEnv: ['./__setups__/jest.setup.js', './__setups__/canvas.js'],
+  setupFilesAfterEnv: ['./__setups__/jest.setup.js', './__setups__/canvas.js']
 };