webapp-demo.jsā¢3.73 kB
#!/usr/bin/env node
// Demo of DHIS2 MCP Server Web App Generation
console.log('š DHIS2 MCP Server - Web App Generation Demo\n');
// Simulate MCP tool call
console.log('š MCP Tool Call: dhis2_init_webapp');
console.log('Parameters:');
console.log(' - appName: "health-tracker"');
console.log(' - appTitle: "Health Data Tracker"');
console.log(' - appDescription: "A comprehensive health data tracking application"');
console.log(' - appType: "app"');
console.log(' - template: "basic"');
console.log(' - typescript: true');
console.log(' - pwa: false\n');
// This is what the DHIS2 MCP server would generate
const webappBoilerplate = `# DHIS2 Web App Initialization Guide
## App Configuration
- **App Name**: health-tracker
- **App Title**: Health Data Tracker
- **Description**: A comprehensive health data tracking application
- **Namespace**: health-tracker
- **App Type**: app
- **Template**: basic
- **TypeScript**: Yes
- **PWA Enabled**: No
- **Output Path**: ./health-tracker
## Quick Start Commands
\`\`\`bash
# Initialize new DHIS2 app using App Platform
npx @dhis2/cli-app-scripts init health-tracker
# Navigate to project directory
cd health-tracker
# Install dependencies
yarn install
# Start development server
yarn start
\`\`\`
## Project Structure
\`\`\`
health-tracker/
āāā src/
ā āāā App.tsx
ā āāā components/
ā āāā index.tsx
āāā public/
ā āāā manifest.webapp
āāā d2.config.js
āāā package.json
āāā tsconfig.json
āāā README.md
\`\`\`
## Next Steps
1. Configure your DHIS2 instance connection
2. Set up proxy for development
3. Add CORS allowlist configuration
4. Implement your app components
5. Test with different DHIS2 versions
## Template-Specific Features
### Basic Template Features
- Clean, minimal setup
- Essential DHIS2 integration
- App Platform CLI tools
- Development server setup
- Basic component structure
## Development Environment Setup
### 1. DHIS2 Instance Configuration
Create a \`.env.local\` file:
\`\`\`
REACT_APP_DHIS2_BASE_URL=https://play.dhis2.org/2.40.4
REACT_APP_DHIS2_USERNAME=admin
REACT_APP_DHIS2_PASSWORD=district
\`\`\`
### 2. Proxy Configuration
Update \`d2.config.js\`:
\`\`\`javascript
const config = {
name: 'health-tracker',
title: 'Health Data Tracker',
description: 'A comprehensive health data tracking application',
entryPoints: {
app: './src/App.tsx',
},
dataStoreNamespace: 'health-tracker',
}
module.exports = config
\`\`\`
### 3. Basic App Component
\`\`\`typescript
import React from 'react'
import { DataProvider } from '@dhis2/app-runtime'
import { CssReset, CssVariables } from '@dhis2/ui'
const MyApp = () => (
<div className="app">
<CssReset />
<CssVariables colors spacers />
<h1>Health Data Tracker</h1>
<p>A comprehensive health data tracking application</p>
{/* Your app components go here */}
</div>
)
const AppWrapper = () => (
<DataProvider>
<MyApp />
</DataProvider>
)
export default AppWrapper
\`\`\`
## Ready to Build! š
Your DHIS2 web app boilerplate is ready. The MCP server has generated:
ā
Complete project structure
ā
Configuration files
ā
Development setup instructions
ā
DHIS2 integration patterns
ā
Best practices guide
Start building your health information system application!`;
console.log('ā
MCP Server Response:');
console.log('=' .repeat(80));
console.log(webappBoilerplate);
console.log('=' .repeat(80));
console.log('\nšÆ Demo Complete!');
console.log('The DHIS2 MCP server successfully generated a complete web app boilerplate guide.');
console.log('This demonstrates that development tools work without requiring DHIS2 credentials!');