Update integration to new installation methods.

[pszczesniak]

Description

This PR should update integration to new installation methods of CKEditor5.

Steps to reproduce

It's improving CKEditor5 installation methods. See https://github.com/ckeditor/ckeditor5/issues/15502

---

#taskid X (Associated Kanbanize card, if any)

[carla-at-wiris]

To validate our example demos, HTML and Vue, work as expected with the new installation method, build and deploy them as follows:

nx build ckeditor5

once finished run: nx start html-ckeditor5 or nx start vue-ckeditor5

[xjiang-at-wiris]

error cssnano@7.0.2: The engine "node" is incompatible with this module. Expected version "^18.12.0 || ^20.9.0 || >=22.0". Got "21.7.3"

Note that after updating dependency, Node 21 will no longer be usable (I was previously using version 21.7.3).

[xjiang-at-wiris]

To validate our example demos, HTML and Vue, work as expected with the new installation method, build and deploy them as follows:

nx build ckeditor5

once finished run: nx start html-ckeditor5 or nx start vue-ckeditor5

None of this two commands works for me... (after changing node to v20.12.2, having yarn && nx build ckeditor5 executed)

> nx run html-ckeditor5:start

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8002/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.122:8002/
<i> [webpack-dev-server] Content not from webpack is served from '/home/xinyujiangwiriscom/Descargas/html-integrations/demos/html/ckeditor5/' directory

 NX  Web Development Server is listening at http://0.0.0.0:8002/

node:internal/fs/watchers:247
    const error = new UVException({
                  ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/xinyujiangwiriscom/Descargas/html-integrations/demos/html/ckeditor5/'
    at FSWatcher.<computed> (node:internal/fs/watchers:247:19)
    at Object.watch (node:fs:2464:36)
    at createFsWatchInstance (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/lib/nodefs-handler.js:119:15)
    at setFsWatchListener (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/lib/nodefs-handler.js:166:15)
    at NodeFsHandler._watchWithNodeFs (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/lib/nodefs-handler.js:331:14)
    at NodeFsHandler._handleDir (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/lib/nodefs-handler.js:567:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async NodeFsHandler._addToNodeFs (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/lib/nodefs-handler.js:617:16)
    at async /home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/index.js:451:21
    at async Promise.all (index 0)
Emitted 'error' event on FSWatcher instance at:
    at FSWatcher._handleError (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/index.js:647:10)
    at NodeFsHandler._addToNodeFs (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/lib/nodefs-handler.js:645:18)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/index.js:451:21
    at async Promise.all (index 0) {
  errno: -28,
  syscall: 'watch',
  code: 'ENOSPC',
  path: '/home/xinyujiangwiriscom/Descargas/html-integrations/demos/html/ckeditor5/',
  filename: '/home/xinyujiangwiriscom/Descargas/html-integrations/demos/html/ckeditor5/'
}

Node.js v20.12.2

 NX   Running target start for project html-ckeditor5 and 1 task it depends on failed

Failed tasks:

- html-ckeditor5:start

Hint: run the command with --verbose for more details.

[psala-at-wiris]

To validate our example demos, HTML and Vue, work as expected with the new installation method, build and deploy them as follows: nx build ckeditor5 once finished run: nx start html-ckeditor5 or nx start vue-ckeditor5

None of this two commands works for me... (after changing node to v20.12.2, having yarn && nx build ckeditor5 executed)

> nx run html-ckeditor5:start

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8002/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.122:8002/
<i> [webpack-dev-server] Content not from webpack is served from '/home/xinyujiangwiriscom/Descargas/html-integrations/demos/html/ckeditor5/' directory

 NX  Web Development Server is listening at http://0.0.0.0:8002/

node:internal/fs/watchers:247
    const error = new UVException({
                  ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/xinyujiangwiriscom/Descargas/html-integrations/demos/html/ckeditor5/'
    at FSWatcher.<computed> (node:internal/fs/watchers:247:19)
    at Object.watch (node:fs:2464:36)
    at createFsWatchInstance (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/lib/nodefs-handler.js:119:15)
    at setFsWatchListener (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/lib/nodefs-handler.js:166:15)
    at NodeFsHandler._watchWithNodeFs (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/lib/nodefs-handler.js:331:14)
    at NodeFsHandler._handleDir (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/lib/nodefs-handler.js:567:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async NodeFsHandler._addToNodeFs (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/lib/nodefs-handler.js:617:16)
    at async /home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/index.js:451:21
    at async Promise.all (index 0)
Emitted 'error' event on FSWatcher instance at:
    at FSWatcher._handleError (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/index.js:647:10)
    at NodeFsHandler._addToNodeFs (/home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/lib/nodefs-handler.js:645:18)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /home/xinyujiangwiriscom/Descargas/html-integrations/node_modules/chokidar/index.js:451:21
    at async Promise.all (index 0) {
  errno: -28,
  syscall: 'watch',
  code: 'ENOSPC',
  path: '/home/xinyujiangwiriscom/Descargas/html-integrations/demos/html/ckeditor5/',
  filename: '/home/xinyujiangwiriscom/Descargas/html-integrations/demos/html/ckeditor5/'
}

Node.js v20.12.2

 NX   Running target start for project html-ckeditor5 and 1 task it depends on failed

Failed tasks:

- html-ckeditor5:start

Hint: run the command with --verbose for more details.

Hi @xjiang-at-wiris,

This is probably related to your system's inotify limits. On Ubuntu, you can check this limit with the following command:

• sudo cat /etc/sysctl.conf | grep fs.inotify.max_user_watches

If the limit is set or close to 8192 -the defaul value in Ubuntu- it might not be enough for large projects.

Maybe you can try to change it temporarily to check if is that's the case:

• sudo sysctl fs.inotify.max_user_watches=524288

More Info

[xjiang-at-wiris]

nx start html-ckeditor5

It works, thank you!

[carla-at-wiris]

Commits merged to master using cherry-pick