React App Generator Example

This example demonstrates how to use Masonry's multi-file template generation to create a complete React application with components, pages, and API integration.

What This Example Does

This template generator creates:

React Pages - One file per page definition (public and admin layouts)
React Components - Individual component files for each component/section
API Client - Generated API functions for each entity
Type Definitions - TypeScript interfaces for entities
Routing - React Router setup based on page definitions

Files Generated

The manifest defines outputs that generate:

src/pages/ - Page components based on layout type
src/components/ - Individual component files
src/api/ - API client functions per entity
src/types/ - TypeScript interfaces per entity
src/router.tsx - React Router configuration
package.json - Project dependencies

How to Use

Create a Masonry file (see blog-app.masonry example)

Run the generator:

../../masonry.exe generate-multi \
  --input blog-app.masonry \
  --template-dir templates \
  --manifest manifest.yaml \
  --output-dir ./generated-app

Install dependencies and run:
```
cd generated-app
npm install
npm start
```

Template Features Demonstrated

Per-item iteration - Generate one file per page, entity, component
Conditional generation - Different templates for admin vs public layouts
Dynamic paths - File paths based on item properties
Nested template composition - Components using other templates
Template functions - String manipulation, type conversion

Extending This Example

You can extend this template by:

Adding more layout types (mobile, desktop, etc.)
Creating specialized component templates (forms, tables, etc.)
Adding test file generation
Including CSS module generation
Adding Docker/deployment configurations

2.0 KiB Raw Blame History