Remix

Remix.js пропонує як автоматичне, так і ручне розгортання проєкту. Візьмемо автоматичне розгортання для спрощеного влаштування проєкту:

Команда запуску

Необхідно ввести слідуючу команду запуска в командному рядку:

npx create-remix@latest

В результаті розгортання проєкту Remix.js створить слідуючу файлову структуру:

my-remix-app
├── app
│   ├── routes
│   │   ├── _index.tsx
│   ├── entry.client.tsx
│   ├── entry.server.tsx
│   ├── root.tsx
├── node_modules
├── public
│   ├── favicon.ico
├── eslintrc.cjs
├── .gitignore
├── package.json
├── package-lock.json
├── README.md
├── tsconfig.json
├── vite.config.ts

Встановлення пакета @x-fiber/display для приєднання ядра відображення:

npm install --save x-fiber/dispay@latest

Додати опис бізнес-схеми

import { setPointer, setService, setView } from "business-logic";

export const WorldService = setService('World', [
    setPointer('Country', {
        views: [
            setView(hello, (agents, context, props) => {
                    return <div>Hello world!</div>
            })
        ]
    })
])

Зареєструвати бізнес-схему та здійснити запуск ядра відображення:

// ** root.tsx */
import { Meta, Outlet } from "@remix-run/react";

export function Layout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
        <head>
            <meta charSet="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <Meta />
            <Links />
        </head>
        <body>
            {children}
        </body>
        </html>
    );
}

export default function App() {
    return <Outlet />;
}