SolidX

Project Structure

Describes the standard SolidX workspace layout across `solid-api`, `solid-ui`, and shared project files.

Workspace Layout

This workspace is organized into a backend application (solid-api), a frontend application (solid-ui), and supporting scripts and configuration.

Mental Model

SolidX is designed as a coordinated full-stack application workspace rather than a loose pairing of an API repository and a frontend repository.

  • solid-api owns metadata, persistence, APIs, domain logic, and backend execution.
  • solid-ui owns the browser application, project-specific UI modules, routes, and user-facing workflows.
  • Shared SolidX packages connect both layers through metadata, generated structure, shared runtime primitives, and framework conventions.

The project structure reflects a coordinated workspace in which backend and frontend evolve against the same metadata-defined application model.

Top-Level View

NestJS backend application
Vite + React frontend application
upgrade.sh

Runtime Areas

Use the tabs below to inspect the two main application runtimes in a standard SolidX workspace.

Backend (NestJS & TypeORM)

This folder contains backend services, business logic, metadata, persistence wiring, and the generated or custom API surface.

Mental Model

solid-api is the system-of-record side of a SolidX application.

  • It owns your domain models and metadata.
  • It exposes both the generated and custom API surface.
  • It contains the backend extension points for business logic, security, workflows, and integrations.

The backend folder structure is the composition of metadata, generated runtime structure, and custom backend code.

solid-api/
├── .env, .gitignore, etc.       # Config and ignore files
├── logs/                        # Application / Error logs
├── media-files-storage/         # Uploaded or generated files
├── media-uploads/               # Temporary upload folder
├── module-metadata/             # Module metadata (JSON)
├── src/                         # Source code for the backend
├── test/                        # E2E tests
├── rebuild*.sh / refresh.bat    # Rebuild and refresh scripts

Key Files and Folders

  • src/
    • Contains main.ts as the backend entry point and all SolidX modules, such as fees-portal/.
    • main-cli.ts is the entry point for SolidX CLI-driven backend commands.
    • app.module.ts contains the application module configuration.
    • app-default-database.module.ts contains the default database configuration.

SolidX Backend Packages

  • @solidxai/core provides the core SolidX backend runtime and shared services.
  • @solidxai/code-builder provides the backend code-generation functionality used by SolidX.

Module Layout

  • A SolidX module is a logical container that groups related models and functionality under a unified domain or feature area, such as fees-portal.
  • For the generated structure of a SolidX module, see Generated Code.

Frontend (Vite & React)

The generated frontend is intentionally thin: it bootstraps routing, theming, and Redux wiring, then layers project-specific UI modules on top of the shared @solidxai/core-ui package.

Mental Model

solid-ui is the application shell and user-experience layer of the project.

  • The shared SolidX UI package provides the common runtime, layouts, and extension points.
  • The consuming project contributes module-specific routes, dashboards, widgets, Redux integrations, and custom pages on top of that shell.
  • The frontend is convention-driven: most project-specific behavior is registered through module folders and *.ui-module.ts manifests.

The frontend structure is a thin runtime shell with project-specific modules layered on top.

solid-ui/
├── .env, .gitignore          # Environment config and ignore files
├── dist/                     # Production build output
├── index.html                # Vite HTML entry
├── public/                   # Static assets copied as-is
├── src/                      # Application bootstrap and project-specific UI modules
├── local_packages/           # Optional locally linked SolidX packages
├── package.json              # Scripts and dependencies
├── tsconfig*.json            # TypeScript configuration
├── vite.config.ts            # Vite configuration
├── eslint.config.js          # Lint configuration
├── deploy.sh                 # Project deployment helper (if present)

Key Files and Folders

  • src/
    • Contains the application bootstrap and all project-specific SolidX UI extensions.
    • Common entry files include:
      • main.tsx, which mounts the React app.
      • App.tsx, which wraps the app with the router, store, layout, theme, and other required SolidX providers.
      • AppRoutes.tsx, which creates the route tree by calling getSolidRoutes(...) from @solidxai/core-ui.
      • solid-ui-modules.ts, which auto-discovers *.ui-module.ts files, registers their extensions, and builds the combined runtime for routes, reducers, and middleware.
    • App-specific features usually live under a module folder such as src/venue/ or src/fees-portal/.
    • A typical module folder contains:
      • *.ui-module.ts, the module registration file that contributes custom routes, extension components, extension functions, reducers, and middleware.
      • admin-layout/, which overrides or extends generated admin layouts with custom widgets, actions, and form/list behavior.
      • custom-layout/, which contains fully custom pages such as dashboards, login pages, and home screens.
      • redux/, which holds RTK Query APIs or other Redux slices owned by the module.
      • utils/, which contains module-specific helpers such as export utilities or formatting logic.
  • public/
    • Contains static files such as logos, icons, uploaded brand assets, and theme resources.
    • Theme files from @solidxai/core-ui are often copied here during postinstall.
  • local_packages/
    • Used when developing against local builds of shared SolidX packages instead of published npm versions.

SolidX Frontend Package

  • @solidxai/core-ui
    • Contains the shared SolidX UI framework used by project apps.
    • Provides:
      • Route generation via getSolidRoutes(...)
      • Application providers such as StoreProvider, LayoutProvider, and SolidThemeProvider
      • Reusable admin pages, auth flows, layouts, widgets, and extension points
      • Shared Redux helpers, hooks, adapters, resources, and themes

Key @solidxai/core-ui Folders

solid-core-ui/src/
├── adapters/                 # Auth and integration adapters
├── components/               # Shared UI components
├── hooks/                    # Reusable React hooks
├── layouts/                  # Layout primitives and admin layout building blocks
├── modules/                  # Shared module-level UI behavior
├── redux/                    # Store helpers, APIs, hooks, and features
├── resources/                # Themes, fonts, images, and stylesheets
├── routes/                   # Shared route definitions and guards
├── types/                    # Shared TypeScript types
└── ui/                       # Higher-level UI exports and composition helpers

Debugging - VS Code

Contains editor-specific configurations like launch.json for debugging and IDE behavior.

Upgrade Scripts

upgrade.sh: Used for upgrading the core SolidX backend/frontend dependencies.

Tips

All environment variables are stored in .env files within each app folder.