A JDL-to-Angular code generator
npm install hipster-wind
A powerful command-line tool to generate modern, standalone Angular components from a JHipster JDL file.
!hipster-wind.png)
---
JHipster is an incredible platform for generating full-stack applications. However, the generated Angular frontends can sometimes be complex, tied to an older module-based architecture, and may require significant effort to customize.
hipster-wind is the solution.
It takes the best part of JHipster—the powerful JDL for defining your data model—and generates a clean, modern, and highly maintainable Angular frontend structure. It's designed to be lightweight, standalone, and easy to integrate into any Angular project that uses Material Design.
For each entity defined in your JDL, hipster-wind creates a complete set of files following modern Angular best practices:
* Standalone Components: A list component with a data table, sorting, pagination, and a side-drawer for creating and editing records. No ngModule required.
* Typed Reactive Forms: A dedicated form service (entity-form.service.ts) that creates a strongly-typed FormGroup for your entity.
* Data Services: A clean service (entity.service.ts) for handling all HTTP operations (CRUD), with date handling and request options built-in.
* TypeScript Models: Interfaces for your entities (entity.model.ts) and TypeScript enums (enum.model.ts).
* Routing: A pre-configured routes file (entity.routes.ts) for easy integration into your application's router.
---
Install the tool globally using npm.
``bash`
npm install -g hipster-wind
---
Run the tool from your terminal, providing the path to your JDL file, the desired output folder, and the name of the backend microservice.
`bash`
hipster-wind
- : (Required) The path to your JHipster JDL file (e.g., ./my-app.jh).
- : (Required) The directory where the generated files will be placed (e.g., ./generated-app).--microservice
- : (Required) The name of the microservice the API belongs to (e.g., analytics-module).--apiHost
- : (Optional) The full base URL of your API (e.g., https://api.yourdomain.com). If not provided, you will be prompted to enter it.
`bash`
hipster-wind ./naqda.jh ./generated-app --microservice analytics-and-iot-module
---
After running the tool, you will have a new folder (e.g., generated-app) containing entities and enums directories.
1. Copy Folders: Copy the generated entities and enums folders into your Angular project's src/app/ directory.app.routes.ts
2. Configure Routes: Open your main and import the generated routes for each entity.`
typescript`
// src/app/app.routes.ts
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: 'officers',
loadChildren: () => import('./entities/officer/officer.routes').then(m => m.officerRoutes)
},
// ... other routes
];
3. Install Dependencies: Ensure your project has the required dependencies, such as Angular Material and Day.js.
---
To contribute to hipster-wind or run it locally:
1. Clone & Install:
`bash`
git clone
cd hipster-wind-cli
npm install
2. Link for Local Use:
`bash`
npm link
This will allow you to run the
---
This project is licensed under the MIT License.