Нравится видеть визуальное представление после того, как я разработал схемы в виде кода - для этого я использую prisma-dbml-generator.

Генерирует файл .dbml из схемы Prisma, а затем я использую любой инструмент, например dbDiagram, для их просмотра.

Опять же, лично мне гораздо проще написать prisma-схемы вручную, но презентация выглядит довольно красиво - Prisma Editor.

Пара ссылок на бесплатные инструменты для визаулизации и проектирования баз данных:

Что такое диаграмма взаимосвязи объектов ERD


На официальном сайте Nx я не смог найти готовых примеров конфигурации Nx для развертывания workspace - Angular + Nest.js. После некоторых поисков нашел такой пример на StackOverflow - NX Monorepo (NestJS/Angular).

Ниже привел более подробный вариант описания этого способа.

Первоначальное решение

Устанавливаем Nx глобально в системе - для более удобной последующей работы:

1
nx globally npm i -g nx

Переходим к процессу развертывания - инициализируем новый workspace командой Installation:

1
2
3
4
5
npx create-nx-workspace

Need to install the following packages:
create-nx-workspace@19.2.3
Ok to proceed? (y)

… задаем имя для нового проекта:

1
Where would you like to create your workspace? ‣ awesome-project 

… на вопрос о выборе предпочтительного стека отвечаем - None - сами наполним workspace нужными стеками чуть позднее:

1
2
3
4
5
6
7
? Which stack do you want to use? …

None:          Configures a TypeScript/JavaScript project with minimal structure.
React:         Configures a React application with your framework of choice.
Vue:           Configures a Vue application with your framework of choice.
Angular:       Configures a Angular application with modern tooling.
Node:          Configures a Node API application with your framework of choice.

… на вопрос о выборе типа репозитория - выбираем - Integrated Monorepo:

1
2
3
4
5
? Package-based monorepo, integrated monorepo, or standalone project? …

Package-based Monorepo:     Nx makes it fast, but lets you run things your way.
Integrated Monorepo:        Nx creates a monorepo that contains multiple projects.
Standalone:                 Nx creates a single project and makes it fast.

… на предложение воспользоваться Nx Cloud отвечаем, что не хотим - Skip for now:

1
2
3
4
5
6
7
? Do you want Nx Cloud to make your CI fast? …

(it's free and can be disabled any time)
Yes, enable Nx Cloud
Yes, configure Nx Cloud for GitHub Actions
Yes, configure Nx Cloud for Circle CI
Skip for now

… процесс инициализации занимает некоторое время, после чего получаем готовый пустой workspace:

1
2
3
4
 NX   Creating your v19.2.3 workspace.

✔ Installing dependencies with npm
✔ Successfully created the workspace: awesome-project.

… переходим во вновь созданный проект:

1
cd awesome-project

… добавляем необходимые Nx-зависимости:

1
npm i -D @nx/angular @nx/nest @nx/js

… затем генерируем в workspace фронтенд на angular - @nx/angular:

1
nx g @nx/angular:app frontend-part

… затем генерируем бекенд на nestjs - @nx/nest:

1
nx g @nx/nest:app backend-part

… генерируем shared library @nx/js:library:

1
nx g @nx/js:lib shared-lib

С этого момента у нас есть базовая настройка. Мы можете импортировать общую библиотеку следующим образом::

1
import { sharedLib } from "@my-project/shared-lib";

Если в дальнейшем в проекте планируется использовать Prisma и PostgreSQL, то по дальнейшим шагам можно ознакомиться здесь - Prisma - установка в Nest-проекте.

Дополнительные источники

В процессе общения по текущей теме в Discord (Nx-форум) c пользователем @rujorgensen последний любезно предложил свой вариант готового решения - nx-workspace.

Можно сделать fork репозитория - и попробовать использовать его, как вариант.

Проверка первоначального решения

Как проверка работоспособности первоначального решения - привожу ссылку на учебный проект Task Manager.

На момент написания статьи - проект находится в стадии разработки.


В Ubuntu Gnome имеется утилита gnome-keyring, при помощи которой очень удобно работать с ключами ssh-key под GitHub или GitLab. Удобство работы с gnome-keyring заключается в том, что ssh-ключи подгружаются только один раз и потом в каждой сессии терминальной или в любом редакторе - VSC или WS - подтягиваются и используются под капотом.

В KDE, будь-то Manjaro или Kubuntu - нет пакета gnome-keyring и поэтому в каждой новой терминальной сессии или открытом редакторе при работе с Git - нужно будет авторизоваться и подгружать ssh-ключи при помощи команд:

1
2
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/awesome_ssh_key

Делать это каждый раз утомительно - отвлекает внимание и занимает лишнее время. Можно немного автоматизировать процесс при помощи конфигурационного файла config.

Делается это таким образом.

В папке .ssh создаем файл конфигурации config:

1
2
cd ~/.ssh
touch config

Открываем файл конфигурации config:

1
nano ~/.ssh/config

Добавляем в него такое содержимое:

1
2
3
IdentityFile ~/.ssh/github_key
IdentityFile ~/.ssh/gitlab_key
IdentityFile ~/.ssh/id_rsa_buhlServer

Как видим, первые две строки - это путь в ssh-ключам, в моем случае под GitHub и GitLab. Третья строка - если често, не знаю что делает. Но - благодаря этим трем строкам оба ssh-ключа теперь автоматически подгружаются и используются в любой терминальной сессии или редакторе кода.

Единственный момент - для подобного случая я генерировал ssh-ключи без пароля, чтобы система или редактор не спрашивали его каждый раз. В принципе, получилась почти полноценная замена gnome-keyring.


Довольно часто в своей практике сталкиваюсь с такой ошибкой, когда запускаю локально сторонний проект:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$ npm run start

> dom-moving-item@1.0.0 start
> webpack serve --config webpack.dev.js

node:internal/crypto/hash:69
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/home/verda/Netology/Homeworks/Javascript/dom/playground/task/node_modules/webpack/lib/util/createHash.js:155:18)
    at BulkUpdateDecorator.digest (/home/verda/Netology/Homeworks/Javascript/dom/playground/task/node_modules/webpack/lib/util/createHash.js:80:21)
    at /home/verda/Netology/Homeworks/Javascript/dom/playground/task/node_modules/webpack/lib/DefinePlugin.js:595:38
    at _next28 (eval at create (/home/verda/Netology/Homeworks/Javascript/dom/playground/task/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:38:1)
    at _next6 (eval at create (/home/verda/Netology/Homeworks/Javascript/dom/playground/task/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:97:1)
    at Hook.eval [as call] (eval at create (/home/verda/Netology/Homeworks/Javascript/dom/playground/task/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:113:1)
    at Hook.CALL_DELEGATE [as _call] (/home/verda/Netology/Homeworks/Javascript/dom/playground/task/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/verda/Netology/Homeworks/Javascript/dom/playground/task/node_modules/webpack/lib/Compiler.js:1053:26) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

… если посмотреть на package.json проекта - там будет webpack:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
"devDependencies": {
    "@babel/cli": "^7.15.7",
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "babel-jest": "^27.2.4",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^5.2.7",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.24.2",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.2",
    "jest": "^27.2.4",
    "live-server": "^1.2.1",
    "mini-css-extract-plugin": "^1.6.2",
    "optimize-css-assets-webpack-plugin": "^5.0.8",
    "terser-webpack-plugin": "^5.2.4",
    "webpack": "^5.57.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.8.0"
},
"dependencies": {
    "core-js": "^3.18.2",
    "push-dir": "^0.4.1"
}

… причина ошибки - разные версии Node.js на локальной машине и на машине, на которой велась разработка проекта (хотя в деталях не совсем понимаю, в чем именно заключается разница - в самом прокте); если на локальной машине установлен nvm, можно сначала проверить текущую версию Node:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$ nvm list
       v14.21.3
       v16.20.2
       v18.19.1
->     v20.10.0
default -> node (-> v20.10.0)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v20.10.0) (default)
stable -> 20.10 (-> v20.10.0) (default)
lts/* -> lts/iron (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.21.3
lts/gallium -> v16.20.2
lts/hydrogen -> v18.19.1
lts/iron -> v20.11.1 (-> N/A)

… а затем переключаться между версиями Node.js - пока не попадем пальцем в небо:

1
2
$ nvm use 16.20.2
Now using node v16.20.2 (npm v8.19.4)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$ npm run start

> dom-moving-item@1.0.0 start
> webpack serve --config webpack.dev.js

ℹ 「wds」: Project is running at http://localhost:8888/
ℹ 「wds」: webpack output is served from 
ℹ 「wds」: Content not from webpack is served from /dist
ℹ 「wds」: 404s will fallback to /index.html
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
ℹ 「wdm」: wait until bundle finished: /
(node:15343) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
ℹ 「wdm」: assets by chunk 1.18 MiB (name: main)
  asset main.js 1.18 MiB [emitted] (name: main)
  asset main.css 2.46 KiB [emitted] (name: main)
asset assets/goblin2dbd01ce16c0fa83cb67.png 9.93 KiB [emitted] [immutable] [from: src/img/goblin.png] (auxiliary name: main)
asset ./index.html 391 bytes [emitted]
Entrypoint main 1.18 MiB (9.93 KiB) = main.css 2.46 KiB main.js 1.18 MiB 1 auxiliary asset
runtime modules 29.2 KiB 15 modules
modules by path ./node_modules/core-js/ 52.7 KiB 86 modules
modules by path ./node_modules/webpack-dev-server/ 21.2 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
  modules by path ./node_modules/webpack-dev-server/node_modules/ 296 bytes 2 modules
modules by path ./src/ 3.74 KiB (javascript) 706 bytes (css/mini-extract) 9.93 KiB (asset) 6 modules
modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
modules by path ./node_modules/mini-css-extract-plugin/dist/hmr/*.js 5.14 KiB
  ./node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js 4.35 KiB [built] [code generated]
  ./node_modules/mini-css-extract-plugin/dist/hmr/normalize-url.js 811 bytes [built] [code generated]
4 modules
webpack 5.57.1 compiled successfully in 1880 ms
ℹ 「wdm」: Compiled successfully.

… значит, у пользователя на машине стояла версия 16 Node.js, когда он разрабатывал свой проект; возможная ошибка кроется в логах и конткретно в этом файле - webpack/lib/DefinePlugin.js.

Angular Builder поддерживает параметры среды:

  • NG_BUILD_MANGLE
  • NG_BUILD_MINIFY
  • NG_BUILD_BEAUTIFY

Можно установить их при запуске скрипта npm следующим образом:

env NG_BUILD_MANGLE=false ng build --prod
NG_BUILD_MINIFY=false ng build --prod
NG_BUILD_BEAUTIFY=true ng build --prod
NG_BUILD_MANGLE=false NG_BUILD_MINIFY=false NG_BUILD_BEAUTIFY=true ng build --prod

Это приведет к неминимизированному выводу кода в косноли браузера, однако tree shaking и другие оптимизации все равно будут применяться (по сравнению с простым отключением оптимизации).

Видосик, наглядно демонстрирующий использование переменной среды NG_BUILD_MANGLE - How to simplify debugging of production code in angular