From 0bb935941349e3043c3014c0af47be8837aab88c Mon Sep 17 00:00:00 2001 From: Andrey Maslov Date: Tue, 16 May 2023 14:40:38 +0300 Subject: [PATCH 01/10] CC-25660: Created migration guide for Node.js --- _data/sidebars/scos_dev_sidebar.yml | 2 + .../migration-guide-upgrade-nodejs-to-v18.md | 147 ++++++++++++++++++ 2 files changed, 149 insertions(+) create mode 100644 docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md diff --git a/_data/sidebars/scos_dev_sidebar.yml b/_data/sidebars/scos_dev_sidebar.yml index c96db9c486b..69d69ca70f6 100644 --- a/_data/sidebars/scos_dev_sidebar.yml +++ b/_data/sidebars/scos_dev_sidebar.yml @@ -3780,6 +3780,8 @@ entries: url: /docs/scos/dev/front-end-development/migration-guide-upgrade-to-webpack-v5.html - title: Migration guide - Switch from TSLint to ESLint url: /docs/scos/dev/front-end-development/migration-guide-switch-from-tslint-to-eslint.html + - title: Migration guide - Upgrade Node.js to v18 and npm to v9 + url: /docs/scos/dev/front-end-development/migration-guide-upgrade-nodejs-to-v18.html - title: Migration concepts url: /docs/scos/dev/migration-concepts/migration-concepts.html nested: diff --git a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md new file mode 100644 index 00000000000..3b365ccbb75 --- /dev/null +++ b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md @@ -0,0 +1,147 @@ +--- +title: Migration guide - Upgrade Node.js to v18 and npm to v9 +last_updated: May 16, 2023 +description: Use this guide to upgrade Node.js to v18 and npm to v9. +template: concept-topic-template +--- + +This document provides instructions for upgrading Node.js to v18 and npm to v9. + +## Overview + +According to [Node.js schedule](https://github.com/nodejs/release#release-schedule) the 16 version will be maintained till 11.09.2023. So Spryker recommends migrating to 18 LTS version. + +*Estimated migration time: 1h* + +## 1) Update configuration files + +1. Set up new versions of `node/npm` in the main `*.yml` files, like `deploy.yml`, `deploy.dev.yml`, and `deploy.ci.yml`: + +```yaml +image: + ... + node: + version: 18 + npm: 9 +``` + +{% info_block infoBox "Note" %} + +To ensure the CI jobs run successfully, add the same config part to all `deploy.*.yml` files used by the frontend. + +{% endinfo_block %} + +2. In the root directory, create/update `.nvmrc` file with the following content: + +```text +18.16.0 +``` + +3. Update engines and dependencies in the `package.json`: + +```json +{ + ... + "engines": { + "node": ">=18.0.0", + "npm": ">=9.0.0" + }, + ... + "devDependencies": { + ... + "@spryker/oryx-for-zed": "~3.0.0", + "autoprefixer": "~10.4.14", + "postcss": "~8.4.23", + "postcss-loader": "~7.3.0", + "sass-resources-loader": "~2.2.5", + ... + }, + ... +} +``` + +{% info_block infoBox "Note" %} + +Keep in mind *@spryker/sass-resources-loader* must be replaced with *sass-resources-loader* dependency. + +{% endinfo_block %} + +4. Update webpack config in `frontend/configs/development.js`: + +```js +webpack: { + module: { + rules: [ + ..., + { + test: /\.scss/i, + use: [ + ..., + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + require('autoprefixer') + ] + } + } + }, + ..., + { + loader: 'sass-resources-loader', + options: { + resources: [sharedScss, ...styles], + }, + }, + ], + }, + ], + }, + ... +} +``` + +## 2) Build the project + +1. Apply the docker changes: + +```bash +docker/sdk boot deploy.dev.yml +docker/sdk up +``` + +2. Regenerate `package-lock.json`: + +```bash +rm -rf package-lock.json +docker/sdk cli npm install +``` + +3. Build the project using Node.js v18 and npm v9: + +```bash +rm -rf node_modules && docker/sdk cli rm -rf node_modules +docker/sdk up --build --assets --data +``` + +{% info_block infoBox "Note" %} + +If you use `Node.js` and `npm` locally, make sure their versions are correct: + +```bash +node -v +npm -v +``` + +To update the versions, use official documentation: + +- [Node.js](https://nodejs.org/en/download/package-manager) +- [npm](https://docs.npmjs.com/try-the-latest-stable-version-of-npm) + +{% endinfo_block %} + +## 3) Update GitHub Actions +In case using GitHub Actions on the project need to update: + +Comming soon... From 4f48c3bfc23614a40203e4a838b6b1dbeea2b588 Mon Sep 17 00:00:00 2001 From: Andrey Maslov Date: Wed, 17 May 2023 10:16:44 +0300 Subject: [PATCH 02/10] CC-25662: Fix after TL review --- .../migration-guide-upgrade-nodejs-to-v18.md | 58 ++++++++----------- 1 file changed, 24 insertions(+), 34 deletions(-) diff --git a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md index 3b365ccbb75..abc2848c8c6 100644 --- a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md +++ b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md @@ -60,46 +60,36 @@ To ensure the CI jobs run successfully, add the same config part to all `deploy. } ``` -{% info_block infoBox "Note" %} - -Keep in mind *@spryker/sass-resources-loader* must be replaced with *sass-resources-loader* dependency. +4. Remove dependency in the `package.json`: -{% endinfo_block %} +```json + "@spryker/sass-resources-loader": "x.x.x" +``` -4. Update webpack config in `frontend/configs/development.js`: +5. Update webpack config in `frontend/configs/development.js`: + - Replace `options` of `postcss-loader`; + - Replace `@spryker/sass-resources-loader` with `sass-resources-loader`; ```js -webpack: { - module: { - rules: [ - ..., - { - test: /\.scss/i, - use: [ - ..., - { - loader: 'postcss-loader', - options: { - postcssOptions: { - plugins: [ - require('autoprefixer') - ] - } - } - }, - ..., - { - loader: 'sass-resources-loader', - options: { - resources: [sharedScss, ...styles], - }, - }, - ], + ... + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + require('autoprefixer') + ] + } + } + }, + ..., + { + loader: 'sass-resources-loader', + options: { + resources: [sharedScss, ...styles], }, - ], - }, + }, ... -} ``` ## 2) Build the project From 0303b88224b0cf7188a769e51be8efd8e9103f10 Mon Sep 17 00:00:00 2001 From: Andrey Maslov Date: Mon, 29 May 2023 10:27:05 +0300 Subject: [PATCH 03/10] CC-25660: Updated GitHub action section for migration guide. --- .../migration-guide-upgrade-nodejs-to-v18.md | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md index abc2848c8c6..c2af4c0f2cf 100644 --- a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md +++ b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md @@ -132,6 +132,23 @@ To update the versions, use official documentation: {% endinfo_block %} ## 3) Update GitHub Actions -In case using GitHub Actions on the project need to update: +In case using GitHub Actions on the project need to update `.github/workflows/ci.yml` file. +Update Node.js version: -Comming soon... +```yaml +- uses: actions/setup-node@v3 + with: + node-version: '18' +``` + +Remove npm cache: + +```yaml +- name: NPM cache + uses: actions/cache@v3 + with: + path: ~/.npm + key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} + restore-keys: | + ${{ runner.os }}-node- +``` From 2e1981f542d3c6613ef64d717a22075c22282fc6 Mon Sep 17 00:00:00 2001 From: Andrey Maslov Date: Tue, 30 May 2023 09:11:27 +0300 Subject: [PATCH 04/10] CC-25660: Updated dependencies in the migration guide --- .../202304.0/migration-guide-upgrade-nodejs-to-v18.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md index c2af4c0f2cf..837b5cf1d69 100644 --- a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md +++ b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md @@ -48,10 +48,11 @@ To ensure the CI jobs run successfully, add the same config part to all `deploy. }, ... "devDependencies": { - ... + ..., + "@babel/preset-env": "~7.20.2", "@spryker/oryx-for-zed": "~3.0.0", "autoprefixer": "~10.4.14", - "postcss": "~8.4.23", + "postcss": "~8.4.24", "postcss-loader": "~7.3.0", "sass-resources-loader": "~2.2.5", ... From e4741128e5a908e2d0e32a62e2b0dfd6c0523cd7 Mon Sep 17 00:00:00 2001 From: Andrey Maslov Date: Tue, 30 May 2023 15:37:24 +0300 Subject: [PATCH 05/10] CC-25660: Updated migration guide according with Tch Lead review --- .../202304.0/migration-guide-upgrade-nodejs-to-v18.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md index 837b5cf1d69..d965617d2cc 100644 --- a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md +++ b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md @@ -37,7 +37,7 @@ To ensure the CI jobs run successfully, add the same config part to all `deploy. 18.16.0 ``` -3. Update engines and dependencies in the `package.json`: +3. Update or add dependencies and engines in the `package.json`: ```json { @@ -105,7 +105,6 @@ docker/sdk up 2. Regenerate `package-lock.json`: ```bash -rm -rf package-lock.json docker/sdk cli npm install ``` From 88db13f25560ee82f3153338e59099e39f3ec4a4 Mon Sep 17 00:00:00 2001 From: Andrey Maslov Date: Tue, 30 May 2023 16:07:46 +0300 Subject: [PATCH 06/10] CC-25660: Added info block for migration guide --- .../202304.0/migration-guide-upgrade-nodejs-to-v18.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md index d965617d2cc..2e2b123ca19 100644 --- a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md +++ b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md @@ -108,6 +108,17 @@ docker/sdk up docker/sdk cli npm install ``` +{% info_block infoBox "Note" %} + +Ensure that the `package-lock.json` file has `"lockfileVersion": 2` or higher, otherwise need to remove `node_modules` and `package-lock.json`. After that regenerate again. + +```bash +rm -rf node_modules && docker/sdk cli rm -rf node_modules && rm -rf package-lock.json +docker/sdk cli npm install +``` + +{% endinfo_block %} + 3. Build the project using Node.js v18 and npm v9: ```bash From 3b281b8548cb8ea14419b6c57d64026b28593b45 Mon Sep 17 00:00:00 2001 From: Andrey Maslov Date: Tue, 30 May 2023 17:19:37 +0300 Subject: [PATCH 07/10] CC-25660: Fixed according to TW review --- .../migration-guide-upgrade-nodejs-to-v18.md | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md index 2e2b123ca19..16479108d4f 100644 --- a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md +++ b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md @@ -9,13 +9,13 @@ This document provides instructions for upgrading Node.js to v18 and npm to v9. ## Overview -According to [Node.js schedule](https://github.com/nodejs/release#release-schedule) the 16 version will be maintained till 11.09.2023. So Spryker recommends migrating to 18 LTS version. +According to [Node.js schedule](https://github.com/nodejs/release#release-schedule), the maintenance of version 16 stops on September 11, 2023. Therefore, we recommend migrating to the 18 LTS version. *Estimated migration time: 1h* ## 1) Update configuration files -1. Set up new versions of `node/npm` in the main `*.yml` files, like `deploy.yml`, `deploy.dev.yml`, and `deploy.ci.yml`: +1. In the main `*.yml` files, set up new versions of `node/npm`, like `deploy.yml`, `deploy.dev.yml`, and `deploy.ci.yml`: ```yaml image: @@ -31,13 +31,13 @@ To ensure the CI jobs run successfully, add the same config part to all `deploy. {% endinfo_block %} -2. In the root directory, create/update `.nvmrc` file with the following content: +2. In the root directory, create or update the `.nvmrc` file with the following content: ```text 18.16.0 ``` -3. Update or add dependencies and engines in the `package.json`: +3. In the `package.json`, update or add dependencies and engines: ```json { @@ -61,15 +61,15 @@ To ensure the CI jobs run successfully, add the same config part to all `deploy. } ``` -4. Remove dependency in the `package.json`: +4. In the `package.json`, remove the dependency : ```json "@spryker/sass-resources-loader": "x.x.x" ``` -5. Update webpack config in `frontend/configs/development.js`: - - Replace `options` of `postcss-loader`; - - Replace `@spryker/sass-resources-loader` with `sass-resources-loader`; +5. In `frontend/configs/development.js`, update the webpack config: + 1. In `postcss-loader`, replace `options`. + 2. Replace `@spryker/sass-resources-loader` with `sass-resources-loader`; ```js ... @@ -110,7 +110,7 @@ docker/sdk cli npm install {% info_block infoBox "Note" %} -Ensure that the `package-lock.json` file has `"lockfileVersion": 2` or higher, otherwise need to remove `node_modules` and `package-lock.json`. After that regenerate again. +Ensure that the `package-lock.json` file has `"lockfileVersion": 2` or later; otherwise, remove `node_modules` and `package-lock.json` and regenerate the file again. ```bash rm -rf node_modules && docker/sdk cli rm -rf node_modules && rm -rf package-lock.json @@ -143,8 +143,10 @@ To update the versions, use official documentation: {% endinfo_block %} ## 3) Update GitHub Actions + In case using GitHub Actions on the project need to update `.github/workflows/ci.yml` file. -Update Node.js version: + +1. Update Node.js version: ```yaml - uses: actions/setup-node@v3 @@ -152,7 +154,7 @@ Update Node.js version: node-version: '18' ``` -Remove npm cache: +2. Remove npm cache: ```yaml - name: NPM cache From 3353f82eac1d1a0e2b6cd57cf7c5123f7e095552 Mon Sep 17 00:00:00 2001 From: Andrey Maslov Date: Tue, 30 May 2023 17:40:19 +0300 Subject: [PATCH 08/10] CC-25660: Fixed according to TW review --- .../202304.0/migration-guide-upgrade-nodejs-to-v18.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md index 16479108d4f..d901e23dd89 100644 --- a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md +++ b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md @@ -144,7 +144,7 @@ To update the versions, use official documentation: ## 3) Update GitHub Actions -In case using GitHub Actions on the project need to update `.github/workflows/ci.yml` file. +If you are using GitHub Actions on the project, update the `.github/workflows/ci.yml` file: 1. Update Node.js version: From a697ab89b8082d4dbbac260ee996b2ab281c7a76 Mon Sep 17 00:00:00 2001 From: Vadym Sachenko Date: Thu, 1 Jun 2023 12:05:24 +0300 Subject: [PATCH 09/10] review --- _data/sidebars/scos_dev_sidebar.yml | 3 --- ... => migration-guide-upgrade-nodejs-to-v18-and-npm-to-v9.md} | 0 2 files changed, 3 deletions(-) rename docs/scos/dev/front-end-development/202304.0/{migration-guide-upgrade-nodejs-to-v18.md => migration-guide-upgrade-nodejs-to-v18-and-npm-to-v9.md} (100%) diff --git a/_data/sidebars/scos_dev_sidebar.yml b/_data/sidebars/scos_dev_sidebar.yml index fba550df9af..3cff5b1b674 100644 --- a/_data/sidebars/scos_dev_sidebar.yml +++ b/_data/sidebars/scos_dev_sidebar.yml @@ -3884,7 +3884,6 @@ entries: url: /docs/scos/dev/front-end-development/oryx/reactivity/reactive-components.html - title: Integration of backend APIs url: /docs/scos/dev/front-end-development/oryx/reactivity/oryx-integration-of-backend-apis.html - - title: Migration guide - Remove support of IE11 url: /docs/scos/dev/front-end-development/migration-guide-remove-support-of-ie11.html - title: Migration guide - Switch from Yarn to NPM v8 @@ -3893,8 +3892,6 @@ entries: url: /docs/scos/dev/front-end-development/migration-guide-upgrade-to-webpack-v5.html - title: Migration guide - Switch from TSLint to ESLint url: /docs/scos/dev/front-end-development/migration-guide-switch-from-tslint-to-eslint.html - - title: Migration guide - Upgrade Node.js to v18 and npm to v9 - url: /docs/scos/dev/front-end-development/migration-guide-upgrade-nodejs-to-v18.html - title: Migration concepts url: /docs/scos/dev/migration-concepts/migration-concepts.html nested: diff --git a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18-and-npm-to-v9.md similarity index 100% rename from docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18.md rename to docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18-and-npm-to-v9.md From f54d38e50213f74e543912ad12ff133bea5a9b8a Mon Sep 17 00:00:00 2001 From: Vadym Sachenko Date: Thu, 1 Jun 2023 14:18:51 +0300 Subject: [PATCH 10/10] Update docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18-and-npm-to-v9.md --- .../migration-guide-upgrade-nodejs-to-v18-and-npm-to-v9.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18-and-npm-to-v9.md b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18-and-npm-to-v9.md index d901e23dd89..d2ebdc4cbec 100644 --- a/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18-and-npm-to-v9.md +++ b/docs/scos/dev/front-end-development/202304.0/migration-guide-upgrade-nodejs-to-v18-and-npm-to-v9.md @@ -144,7 +144,7 @@ To update the versions, use official documentation: ## 3) Update GitHub Actions -If you are using GitHub Actions on the project, update the `.github/workflows/ci.yml` file: +If the project uses CI, adjust `.github/workflows/ci.yml`: 1. Update Node.js version: