Onion Initializr for Frontend

Generate an Onion Architecture structure with entities, services, and even a frontend framework — all from a simple Website. In alternative you can use the CLI locally using prompts or more direct using a config file instead of 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 online

---

Website

https://viadee.github.io/onion-initializr

Alternativly install locally

1. Clone the repository

git clone https://github.com/viadee/onion-initializr
cd onion-initializr

2. Install Dependencies

npm install

3. Build and link the project to the commandline

npm run link

4. Run the website locally

npm run dev

---

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").

---

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

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