sample-webapp-output.md•6.43 kB
# DHIS2 Web App Initialization Guide
*Generated by DHIS2 MCP Server - dhis2_init_webapp tool*
## 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/
│ │ ├── Header.tsx
│ │ ├── Navigation.tsx
│ │ └── Dashboard.tsx
│ ├── hooks/
│ │ ├── useDataQuery.ts
│ │ └── useAppConfig.ts
│ ├── utils/
│ │ └── dhis2-helpers.ts
│ └── index.tsx
├── public/
│ ├── manifest.webapp
│ └── icon.png
├── d2.config.js
├── package.json
├── tsconfig.json
├── .env.example
└── README.md
```
## Development Environment Setup
### 1. DHIS2 Instance Configuration
Create a `.env.local` file:
```env
REACT_APP_DHIS2_BASE_URL=https://play.dhis2.org/2.40.4
REACT_APP_DHIS2_USERNAME=admin
REACT_APP_DHIS2_PASSWORD=district
```
### 2. App Configuration (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',
minDHIS2Version: '2.39',
}
module.exports = config
```
### 3. Basic App Component (src/App.tsx)
```typescript
import React from 'react'
import { DataProvider } from '@dhis2/app-runtime'
import { CssReset, CssVariables } from '@dhis2/ui'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { Header } from './components/Header'
import { Navigation } from './components/Navigation'
import { Dashboard } from './components/Dashboard'
const MyApp = () => (
<div className="app">
<CssReset />
<CssVariables colors spacers />
<Header title="Health Data Tracker" />
<div className="app-content">
<Navigation />
<main className="main-content">
<Router>
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/tracker" element={<div>Tracker Module</div>} />
<Route path="/reports" element={<div>Reports Module</div>} />
</Routes>
</Router>
</main>
</div>
</div>
)
const AppWrapper = () => (
<DataProvider>
<MyApp />
</DataProvider>
)
export default AppWrapper
```
### 4. Sample Dashboard Component (src/components/Dashboard.tsx)
```typescript
import React from 'react'
import { Card, Button, DataTable, TableHead, TableRowHead, TableCellHead, TableBody, TableRow, TableCell } from '@dhis2/ui'
import { useDataQuery } from '@dhis2/app-runtime'
const query = {
dataElements: {
resource: 'dataElements',
params: {
fields: 'id,displayName,valueType',
paging: false,
pageSize: 10
}
}
}
export const Dashboard: React.FC = () => {
const { loading, error, data } = useDataQuery(query)
if (loading) return <div>Loading...</div>
if (error) return <div>Error: {error.message}</div>
return (
<div className="dashboard">
<h1>Health Data Tracker Dashboard</h1>
<Card>
<h2>Recent Data Elements</h2>
<DataTable>
<TableHead>
<TableRowHead>
<TableCellHead>Name</TableCellHead>
<TableCellHead>Type</TableCellHead>
<TableCellHead>Actions</TableCellHead>
</TableRowHead>
</TableHead>
<TableBody>
{data?.dataElements?.dataElements?.map((element: any) => (
<TableRow key={element.id}>
<TableCell>{element.displayName}</TableCell>
<TableCell>{element.valueType}</TableCell>
<TableCell>
<Button small>View</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</DataTable>
</Card>
</div>
)
}
```
## Additional Development Tools Available
### UI Component Generation
Use the MCP server to generate more components:
```
dhis2_create_ui_components: Generate forms, tables, charts
dhis2_generate_ui_form_patterns: Create complex form patterns
dhis2_generate_ui_data_display: Build data visualization components
```
### Build & Testing Setup
```
dhis2_configure_build_system: Configure webpack/Vite
dhis2_generate_test_setup: Setup Jest/Cypress testing
dhis2_setup_dev_environment: Complete dev environment
```
### DHIS2 Integration Helpers
```
dhis2_setup_authentication_patterns: Auth integration
dhis2_generate_app_runtime_config: App Runtime setup
dhis2_configure_cors_allowlist: CORS configuration
```
## Package.json Dependencies
```json
{
"name": "health-tracker",
"version": "1.0.0",
"description": "A comprehensive health data tracking application",
"dependencies": {
"@dhis2/app-runtime": "^3.9.0",
"@dhis2/ui": "^8.13.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.0"
},
"devDependencies": {
"@dhis2/cli-app-scripts": "^10.3.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"typescript": "^4.9.0"
},
"scripts": {
"build": "d2-app-scripts build",
"start": "d2-app-scripts start",
"test": "d2-app-scripts test"
}
}
```
## Ready to Build! 🚀
Your DHIS2 web app boilerplate is ready. The MCP server has generated:
✅ Complete TypeScript project structure
✅ DHIS2 App Platform integration
✅ UI component examples with @dhis2/ui
✅ Data querying patterns
✅ Routing setup
✅ Development environment configuration
✅ Build and deployment scripts
## Next Steps
1. Run the initialization commands above
2. Customize components for your health tracking needs
3. Add data capture forms
4. Implement analytics and reporting
5. Test with your DHIS2 instance
6. Deploy to DHIS2 App Hub
Start building your health information system application!