Onion Initialzr for Frontend

Generate an Onion Architecture structure with entities, services, and even a frontend framework — all from a simple CLI. Alternativly you can use the Website

Features

• Onion Architecture folder structure
• Entity and service generators
• Repository interface and implementation scaffolding
• Prettier + ESLint auto-config
• Frontend setup with Lit, React, Angular, Vue, or Vanilla
• Dependency injection via Awilix or Angular for Angular-Frontend
• Scan current project and generate Overview like on the website
• Upload your own project file & validate

Website

Generator Website

Install locally

npm install onion-initializr -g

Usage

Run via CLI prompts:

onion

You’ll be asked for all relevant inputs: entities, services, dependencies, and UI framework.

Or run via JSON config:

onion --config myConfig.json

Run the command in the same directory as your myConfig.json, or provide an absolute path.

Example myConfig.json

When defining services, you must include an empty dependency array if there are no dependencies (e.g., "UserService": []).

{
  "folderPath": "./react-app",
  "entities": ["User", "Order", "Product"],
  "domainServices": [
    "UserService",
    "OrderService",
    "ProductService",
    "PaymentService"
  ],
  "applicationServices": ["UserAppService"],
  "domainServiceConnections": {
    "OrderService": ["Order", "User"],
    "UserService": []
  },
  "applicationServiceDependencies": {
    "UserAppService": {
      "domainServices": ["UserService"],
      "repositories": ["IUserRepository"]
    }
  },
  "uiFramework": "react",
  "_chooseFromThese": ["react", "angular", "vue", "lit", "vanilla"]
}

Note: You can also put the absolute Path (e.g. "/Users/YOURNAME/Desktop/generatedOnions/react-app").

Which frameworks are supported?

Use uiFramework in your config.

• Lit (Vite + TypeScript)
• React (Vite + TypeScript)
• Vue (Vite + TypeScript)
• Angular (Angular CLI)
• vanilla

Which DI-Frameworks are supported?

Use diFramework in your config. If uiFramework is Angular, you can select Angular as your DI-Framework.

• Awilix
• Angular

Which UI-Libraries are supported?

When using uiFramework React, you can set uiLibrary to shadcn in your config.

-ShadCN

Output Structure

The generator creates a layered folder structure like this:

|-- src
|   |-- application
|   |   |-- services/
|   |-- domain
|   |   |-- entities/
|   |   |-- services/
|   |-- infrastructure
|   |   |-- config/
|   |   |   |-- awilix.config.ts
|   |   |-- interfaces/
|   |   |-- presentation/
|   |   |-- repository/
|-- package.json

Scan

You can also add Entities, Domain Services and Application Services in your Code Editor and later generate JSON Config.

onion --scan .\react\ reactConfig.json

The first Parameter ".\react" references the project, the JSON should be generated for. The second Parameter "reactConfig.json" is the Name of the JSON File.

The Scan works well when: The project was generated by this CLI Folder names match: Domain, Application, Infrastructure Entities, services, and repositories are not renamed Frontend is located under Infrastructure/Presentation AppService constructor uses 'private readonly' injection

Development

After making changes and want to work on the CLI, run:

npm run link

When you work with WebApp, run

npm run dev