Scaffold UI5 Project

{{#if type}} Creating {{type}} project{{#if lang}} in {{lang}}{{/if}}{{#if backend}} with {{backend}} backend{{/if}}... {{else}} Starting interactive project scaffolding... {{/if}}

Project Scaffolding

I'll invoke the ui5-app-scaffolder agent to create your UI5 project.

The agent will:

1. Read your preferences from sapui5.local.md (if available)
2. Ask clarifying questions (if parameters not provided):
   • Project type (Freestyle, Fiori Elements, Integration Card)
   • Language (JavaScript or TypeScript)
   • Backend integration (Standalone, OData v2/v4, CAP)
   • Additional options (templates, features)
3. Generate project structure using:
   • MCP server (@ui5/mcp-server) if available
   • Reference templates as fallback
4. Customize configuration:
   • manifest.json with your settings
   • ui5.yaml for UI5 tooling
   • package.json with scripts and dependencies
5. Validate project:
   • Check file structure
   • Verify configuration
   • Test compilation
6. Provide next steps:
   • Installation instructions
   • Development server command
   • Testing and deployment guidance

---

{{#if type}} Parameters provided:

• Type: {{type}} {{#if lang}}- Language: {{lang}}{{/if}} {{#if backend}}- Backend: {{backend}}{{/if}} {{#if name}}- Name: {{name}}{{/if}}

The agent will use these as defaults and may ask for additional details. {{else}} No parameters provided - The agent will guide you through an interactive setup. {{/if}}

---

Invoking ui5-app-scaffolder agent...

Agent will scaffold your project and provide complete setup instructions.

---

Manual Scaffolding (If Agent Unavailable)

If the agent cannot be invoked, you can use these manual commands:

Using @ui5/mcp-server (Recommended)

# Install MCP server globally
npm install -g @ui5/mcp-server

# Create freestyle JavaScript app
npx @ui5/mcp-server create_ui5_app \
  --template="freestyle-js" \
  --projectName="my-ui5-app" \
  --namespace="com.mycompany.myapp"

# Create Fiori Elements TypeScript app
npx @ui5/mcp-server create_ui5_app \
  --template="fiori-elements-list-report-ts" \
  --projectName="my-fiori-app" \
  --namespace="com.mycompany.fiori" \
  --enableCAP=true

Using Yeoman (Alternative)

# Install Yeoman and Easy-UI5 generator
npm install -g yo generator-easy-ui5

# Interactive scaffolding
yo easy-ui5

Using Fiori Tools (SAP Business Application Studio)

# Install Fiori Tools globally
npm install -g @sap/generator-fiori

# Create project
yo @sap/fiori

Template Options

Freestyle Applications:

• freestyle-js - JavaScript freestyle app
• freestyle-ts - TypeScript freestyle app

Fiori Elements:

• fiori-elements-list-report - List Report (most common)
• fiori-elements-object-page - Object Page
• fiori-elements-analytical-list-page - Analytical List Page
• fiori-elements-overview-page - Overview Page
• fiori-elements-worklist - Worklist

Integration Cards:

• integration-card-list - List Card
• integration-card-table - Table Card
• integration-card-object - Object Card
• integration-card-timeline - Timeline Card
• integration-card-analytical - Analytical Card

CAP Full-Stack:

• cap-full-stack-js - CAP backend + UI5 frontend (JavaScript)
• cap-full-stack-ts - CAP backend + UI5 frontend (TypeScript)

---

Quick Start Examples

Example 1: Freestyle TypeScript App

/ui5-scaffold --type=freestyle --lang=typescript --name=product-catalog

Creates:

product-catalog/
├── webapp/
│   ├── controller/
│   │   └── App.controller.ts
│   ├── view/
│   │   └── App.view.xml
│   ├── Component.ts
│   ├── manifest.json
│   └── index.html
├── ui5.yaml
├── package.json
└── tsconfig.json

Example 2: Fiori Elements with CAP

/ui5-scaffold --type=fiori-elements --backend=cap --name=orders-app

Creates full-stack application with:

• Frontend: Fiori Elements List Report
• Backend: CAP service with sample data

Example 3: Integration Card

/ui5-scaffold --type=integration-card --name=sales-dashboard

Creates standalone Integration Card for Work Zone or launchpad.

---

After Scaffolding

Once your project is created, follow these steps:

1. Install Dependencies

cd {{name}}
npm install

2. Start Development Server

npm start
# or
ui5 serve --port 8080

3. Open in Browser

http://localhost:8080

4. Start Developing

• Add views: webapp/view/
• Add controllers: webapp/controller/
• Add translations: webapp/i18n/i18n.properties
• Add styles: webapp/css/style.css

5. Build for Production

npm run build
# Output in dist/

---

Need Help?

After scaffolding, use these commands:

• API Reference: /ui5-api sap.m.Table
• Code Quality: Invoke code quality advisor
• Migration: If upgrading later, use migration specialist

Happy coding! 🚀