test-webapp-demo.js•4.77 kB
#!/usr/bin/env node
// Demo of DHIS2 MCP Server Web App Generation
// This simulates what the MCP server would return when called
const fs = require('fs');
// Import the generator function (simulated)
function generateWebAppInitInstructions(appName, appTitle, appDescription, options = {}) {
const { namespace, appType = 'app', template = 'basic', typescript = true, pwa = false, outputPath = './' } = options;
return `# DHIS2 Web App Initialization Guide
## App Configuration
- **App Name**: ${appName}
- **App Title**: ${appTitle}
- **Description**: ${appDescription || 'A DHIS2 web application'}
- **Namespace**: ${namespace || appName}
- **App Type**: ${appType}
- **Template**: ${template}
- **TypeScript**: ${typescript ? 'Yes' : 'No'}
- **PWA Enabled**: ${pwa ? 'Yes' : 'No'}
- **Output Path**: ${outputPath}
## Quick Start Commands
\`\`\`bash
# Initialize new DHIS2 app using App Platform
npx @dhis2/cli-app-scripts init ${appName}
# Navigate to project directory
cd ${appName}
# Install dependencies
yarn install
# Start development server
yarn start
\`\`\`
## Project Structure
\`\`\`
${appName}/
├── src/
│ ├── App.js${typescript ? 'x' : ''}
│ ├── components/
│ └── index.js${typescript ? 'x' : ''}
├── public/
│ └── manifest.webapp
├── d2.config.js
├── package.json
${typescript ? '├── tsconfig.json' : ''}
${pwa ? '├── workbox.config.js' : ''}
└── 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: '${appName}',
title: '${appTitle}',
description: '${appDescription}',
entryPoints: {
app: './src/App.${typescript ? 'tsx' : 'jsx'}',
},
dataStoreNamespace: '${namespace || appName}',
}
module.exports = config
\`\`\`
### 3. Basic App Component
\`\`\`${typescript ? 'typescript' : 'javascript'}
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>${appTitle}</h1>
<p>${appDescription}</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!
`;
}
async function demonstrateMCPServer() {
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');
// Generate the response
const response = generateWebAppInitInstructions(
'health-tracker',
'Health Data Tracker',
'A comprehensive health data tracking application',
{
appType: 'app',
template: 'basic',
typescript: true,
pwa: false,
outputPath: './health-tracker'
}
);
console.log('✅ MCP Server Response:');
console.log('=' .repeat(80));
console.log(response);
console.log('=' .repeat(80));
// Save to file for reference
fs.writeFileSync('./test-webapp/generated-webapp-guide.md', response);
console.log('\n💾 Guide saved to: ./test-webapp/generated-webapp-guide.md');
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!');
}
demonstrateMCPServer();