Создание с React

Этот процесс создания можно применять в других контекстах, например для создания любого типа проекта React; в этом случае нужно внести соответствующие адаптации названия и папки, где выполняются команды.

Основное понимание таково: будет создан веб-слой, то есть фронтенд нашего приложения Netuno.

Поэтому предполагается, что внутри приложения Netuno будет создан сайт — стандартное имя для слоя фронтенда, но оно может быть любым другим желаемым именем.

Предварительные требования

Должен быть установлен Netuno:

Установка Netuno.

Из-за лучшей производительности, среди прочих преимуществ, должен быть установлен Bun:

Установка Bun.

Создание

Для создания приложения React внутри приложения Netuno мы обычно называем его сайт.

Итак, с терминалом в корне вашего приложения Netuno, которое обычно находится в папке:

netuno/apps/МОЕ_ПРИЛОЖЕНИЕ

Где МОЕ_ПРИЛОЖЕНИЕ — имя приложения Netuno.

Выполните команду:

bun create vite

Затем на вопрос: Project name:

Введите сайт и нажмите клавишу ENTER.

Далее появится вопрос: Select a framework:

Используйте стрелки клавиатуры и нажимайте стрелку вниз до выбора опции React, затем нажмите клавишу ENTER.

Для завершения появится следующий вопрос: Select a variant:

Используйте стрелки клавиатуры и нажимайте стрелку вниз до выбора опции JavaScript, затем нажмите клавишу ENTER.

Эта команда создаст новый каталог с именем 📂 сайт, в котором будет находиться фронтенд на React.

После создания фронтенда на React выполните следующее, чтобы установить зависимости:

cd сайт
bun install

Откройте папку вашего приложения Netuno в предпочитаемом редакторе (например, VSCode, WebStorm и других) и перейдите в созданную папку сайт.

Запуск

Теперь можно запустить сервер фронтенда на React с помощью команды:

bun run dev

Это сделает фронтенд доступным по адресу http://localhost:5173/; обычно в терминале может появиться другой адрес с другим номером порта, в любом случае просто откройте в браузере адрес, показанный в терминале.

Чтобы завершить выполнение в терминале, одновременно нажмите клавиши CTRL и C.

Установка зависимостей

Если вы запускаете сервер фронтенда в терминале, то есть bun run dev, рекомендуется остановить его: одновременно нажмите клавиши CTRL и C.

Настоятельно рекомендуем установить следующие пакеты NPM, так как они очень полезны для разработки приложений React с Netuno (нажмите на каждую ссылку, чтобы получить больше информации о каждом):

Чтобы установить перечисленные выше пакеты, достаточно выполнить следующий набор команд в терминале:

bun add react-router
bun add antd
bun add @ant-design/icons
bun add less
bun add @netuno/service-client

В качестве альтернативы можно установить все пакеты сразу:

bun add react-router antd @ant-design/icons less @netuno/service-client

Настройки

После выполнения команд выше можно задать стандартный адрес порта: перейдите в 📂 сайт/vite.config.js и добавьте конфигурацию server следующим образом:

сайт/vite.config.js
export default defineConfig({
  server: {
    port: 3000,
    strictPort: true
  },
  plugins: [
    react()
  ]
})

Теперь при запуске командой bun run dev всегда будет использоваться порт 3000.

Less

Измените расширение всех файлов .css, находящихся в сайт/src, на .less.

Не забудьте внести это изменение в JSX-коде в строках, где выполняется import файлов .css, изменив их на .less.

LESS позволяет разрабатывать CSS более структурированно и современно.

Настройка темы Ant.Design

Чтобы настроить цвета Ant.Design, используйте компонент ConfigProvider в App.jsx.

Например:

сайт/src/App.jsx
import { ConfigProvider, Button } from 'antd';
...
function App() {
    ...
    return (
        <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
            ...
            <Button type="primary">Моя кнопка с кастомным цветом</Button>
            ...
        </ConfigProvider>
    );
}
...

Так можно настроить любую конфигурацию стилизации Ant.Design.

Тёмная тема

Также можно использовать тёмную тему Ant.Design: для этого достаточно импортировать theme, который содержит тёмный режим, и применить его в ConfigProvider:

import { ConfigProvider, Button, theme } from 'antd';
...
    <ConfigProvider theme={{
        token: {
            colorPrimary: '#FF6500'
        },
        algorithm: theme.darkAlgorithm,
    }}>
        ...
        <Button type="primary">Моя кнопка с кастомным цветом</Button>
        ...
    </ConfigProvider>
...

Переопределение стилей

Обратите внимание, что в параметрах ConfigProvider выше можно легко изменить стиль Ant.Design; подробнее о настройке Ant.Design:

Настройка темы

В каждом компоненте Ant.Design есть возможные настройки Design Token, например у кнопок:

Button - Design Token

<ConfigProvider theme={{
    token: {
        colorPrimary: '#00b96b',
        fontSize: 18,
    },
    components: {
        Button: {
            defaultBg: '#D6BD98',
            defaultColor: '#1D1616',
            primaryColor: '#000B58',
            textTextColor: '#181C14',
        }
    }
}}>
    ...
    <Button type="primary">Моя кнопка с кастомным цветом</Button>
    ...
</ConfigProvider>

Автоматический запуск фронтенда вместе с Netuno

Netuno позволяет запускать приложение React вместе с серверным процессом приложения Netuno.

Все сообщения компиляции приложения React будут интегрированы в тот же терминал, что и приложение Netuno.

Для этого достаточно добавить в конфигурацию commands приложения Netuno в 📂 config/_development.json следующее:

config/_development.json
{
    ...
    "commands": [
        ...
        {
            "path": "сайт",
            "command": "bun run dev",
            "install": "bun install",
            "enabled": true
        }
    ],
    ...
}

При каждом редактировании файлов конфигурации приложения Netuno необходимо перезапустить сервер, чтобы он принял новые изменения.

Наконец, запустите/перезапустите сервер с вашим приложением Netuno, чтобы убедиться в его работе.

И теперь всё будет интегрировано в один централизованный терминал, что позволит избежать нескольких разрозненных терминалов; подробнее:

Централизованный терминал

Чтобы настроить CORS и избежать возможных ошибок при взаимодействии фронтенда с сервисами приложения Netuno, отредактируйте конфигурацию приложения в:

📂 config/_development.json

Проверьте, существует ли уже конфигурация cors, и если в origins указан *, то это вполне подходит для разработки и можно оставить так.

Если конфигурации cors нет, добавьте её на основе этого примера, при этом адрес должен совпадать с адресом фронтенда:

config/_development.json
{
    ...
    "cors": [
        {
            "enabled": true,
            "origins": [ "http://localhost:3000" ]
        }
    ],
    ...
}

Если origins содержит *, это означает, что будет поддерживаться любой адрес фронтенда, например:

"origins": [ "*" ] Обычно мы используем * в разработке.

После реализации конфигурации вы можете интегрировать с фронтендом нужные вам API-сервисы без проблем с безопасностью CORS.

Подробнее о CORS

Переменные окружения

Конфигурацию переменных окружения можно задать, создав файл сайт/.env с определениями переменных, например:

NODE_ENV=development

Или через конфигурацию приложения Netuno, например в:

📂 config/_development.json

И определив переменные окружения в конфигурации команды в параметре env, например:

config/_development.json
{
    ...
    "commands": [
        ...,
        {
            "env": ["NODE_ENV=development"],
            "path": "сайт",
            "command": "bun run start",
            "install": "bun install",
            "enabled": true
        }
    ],
    ...
}

Предварительные требования​

Создание​

Запуск​

Установка зависимостей​

Настройки​

Less​

Настройка темы Ant.Design​

Тёмная тема​

Переопределение стилей​

Автоматический запуск фронтенда вместе с Netuno​

Настройка CORS (Cross-Origin Resource Sharing)​

Переменные окружения​