Разработка приложений на Typescript с использованием Nx

[wendel]

Хороший инструмент, удобный, развивается, пользуюсь уже не первую версию.

Не подскажите название темы для терминала? (zsh если не ошибаюсь)

[fafnur]

Это zsh + oh my zsh, тема dracula (https://draculatheme.com/).

Если manjaro, то нужно тему именно для gnome-terminal еще поставить
https://github.com/dracula/gnome-terminal/tree/65fb7e8df668524f8b9c771429c76f675016a71a

[wendel]

спасибо за ответ

[SiSya]

Не совсем в итоге понял, какие проблемы решаются в сравнении с уже существующими сборщиками. Допустим, тот же vite. Можете уточнить?

[fafnur]

Он ничем не лучше. Тут скорее про то, во что эволюционировал Nx. И что его можно использовать для широкого спектра задач.

[jesaiah4]

в 2022 использовать вбпак а не нативный HMR и при этом писать "современные приложения"... мда.

Все кто дошел до комментариев. Советую вас начать с VITE , тогда по настоящему вы будете писать современные приложения

[fafnur]

Vite тоже не панацея. В Vite нет Angular, и вряд ли будет.

В Nx есть SWC, а также если совсем противен webpack, вы можете использовать bazel.

[wendel]

esbuild кстати то же есть...

[yroman]

Как система сборки влияет на "современность" приложения?

[kalaev-viktor]

Сделал как тут всё описано, в scss не получается подключить svg файл
.selector {
background: url(./my.svg);
}
Но jpg норм обрабатываются

[fafnur]

Как и написано в статье Nx создавался для Angular и использует некоторые концепты от туда.

Все ассеты имеют путь /assets и должны располагаться в соответствующей папке.
Обновил репо, добавил пример:

//https://github.com/Fafnur/boobs/blob/main/packages/web-store/src/app/app.element.ts
import './app.element.scss';

export class AppElement extends HTMLElement {
  public static observedAttributes = [];

  connectedCallback() {
    const title = 'web-store';
    this.innerHTML = `
    <div class="wrapper">
      <div class="container">
        <!--  WELCOME  -->
        <div id="welcome">
          <h1>
            <span> Hello there, </span>
            Welcome ${title} ?
          </h1>
        </div>

        <!--  HERO  -->
        <div id="hero" class="rounded">
          <div class="text-container">
            <h2>
               <img src="/assets/images/angular-material-logo.svg" alt="">
              <span>You&apos;re up and running</span>
            </h2>
            <a href="#commands"> What&apos;s next? </a>
          </div>
          

24 строчка - пример отрисовки приложения

А для создания кастомного расположения нужно руками добавлять в конфигурацию в project.json в раздел assets:

// https://github.com/Fafnur/boobs/blob/main/packages/web-store/project.json
{
  "projectType": "application",
  "root": "packages/web-store",
  "sourceRoot": "packages/web-store/src",
  "tags": [],
  "targets": {
    "build": {
      "executor": "@А",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        ...
        "assets": [
          "packages/web-store/src/favicon.ico",
          "packages/web-store/src/assets"
        ],

В реакте на nx будет все аналогично