VisualCron to Logic App Converter

A full-stack web application that converts VisualCron XML configurations to Azure Logic App workflow definitions.

🏗️ Project Structure

visualcron-converter/
├── backend/                 # NestJS Backend
│   ├── src/
│   │   ├── main.ts
│   │   ├── app.module.ts
│   │   ├── conversion.controller.ts
│   │   └── conversion.service.ts
│   ├── uploads/            # Uploaded files (auto-created)
│   ├── outputs/            # Generated JSON files (auto-created)
│   ├── package.json
│   └── tsconfig.json
├── frontend/               # Frontend Application
│   └── index.html
└── README.md

🚀 Quick Start

Backend Setup (NestJS)

1. Create the backend directory and navigate to it:

mkdir -p visualcron-converter/backend/src
cd visualcron-converter/backend

2. Initialize the NestJS project:

npm init -y
npm install @nestjs/common @nestjs/core @nestjs/platform-express @nestjs/serve-static multer uuid xml2js reflect-metadata rxjs
npm install -D @nestjs/cli @nestjs/schematics @nestjs/testing @types/express @types/multer @types/node @types/uuid @types/xml2js typescript

3. Create the TypeScript configuration:

// tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2020",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false
  }
}

4. Copy the backend TypeScript files from the artifacts above into the src/ directory

5. Start the backend server:

npm run start:dev

The backend will run on http://localhost:3000

Frontend Setup

1. Create the frontend directory:

mkdir -p visualcron-converter/frontend
cd visualcron-converter/frontend

2. Copy the HTML file from the artifact above and save it as index.html

3. Serve the frontend (using any static server):

Option A: Using Python (if installed):

python -m http.server 3001

Option B: Using Node.js serve:

npm install -g serve
serve -p 3001

Option C: Using VS Code Live Server extension

The frontend will run on http://localhost:3001

📋 Usage Instructions

1. Start both servers:

   • Backend: http://localhost:3000
   • Frontend: http://localhost:3001

2. Upload your VisualCron XML file:

   • Drag and drop the XML file onto the upload area, or
   • Click "Select File" to browse for your XML file

3. View the conversion results:

   • See summary statistics (triggers, actions, parameters)
   • Preview the generated Logic App JSON
   • Copy the code to clipboard
   • Download the JSON file

🔧 Features

Backend Features

• File Upload: Secure XML file upload with validation
• XML Parsing: Robust XML to JavaScript object conversion
• Logic App Generation: Converts VisualCron tasks to Logic App actions
• Download Service: Generates downloadable JSON files
• Error Handling: Comprehensive error handling and validation

Frontend Features

• Modern UI: Beautiful Tailwind CSS interface with animations
• Drag & Drop: Intuitive file upload experience
• Real-time Preview: Live JSON code preview with syntax highlighting
• Summary Dashboard: Visual statistics of conversion results
• Download & Copy: Easy export options for the generated code
• Responsive Design: Works on desktop and mobile devices

🎯 Supported VisualCron Task Types

The converter handles these VisualCron task types:

• Execute Tasks → HTTP Actions / Azure VM Commands
• Email Tasks → Office 365 Connectors
• File Tasks → File System Connectors
• FTP Tasks → FTP Connectors
• SQL Tasks → SQL Connectors
• PowerShell Tasks → Azure Functions
• Generic Tasks → Compose Actions (with original config preserved)

🔄 Supported Trigger Types

• Time Triggers → Recurrence Triggers
• File Triggers → File System Triggers
• Process Triggers → Manual HTTP Triggers (fallback)

🛠️ Development

Adding New Task Types

To add support for additional VisualCron task types:

1. Update the backend service (conversion.service.ts):

private convertSingleTask(task: any, index: number): any {
  switch (task.TaskType || task.Type) {
    case 'YourNewTaskType':
      return this.convertYourNewTask(task, index);
    // ... existing cases
  }
}

private convertYourNewTask(task: any, index: number): any {
  return {
    type: "YourLogicAppActionType",
    inputs: {
      // Your conversion logic here
    },
    runAfter: index > 0 ? { [`action_${index - 1}`]: ["Succeeded"] } : {}
  };
}

Environment Configuration

For production deployment, consider adding environment variables:

# Backend (.env)
PORT=3000
CORS_ORIGIN=https://your-frontend-domain.com
UPLOAD_MAX_SIZE=10485760
CLEANUP_INTERVAL=3600000

# Frontend
BACKEND_URL=https://your-backend-domain.com

🚀 Deployment

Backend Deployment (Heroku/Azure/AWS)

1. Build the application: npm run build
2. Set environment variables
3. Deploy the dist/ folder

Frontend Deployment (Netlify/Vercel/GitHub Pages)

1. Update the backend URL in the frontend JavaScript
2. Deploy the frontend/ folder

📝 API Documentation

POST /api/conversion/upload

• Description: Upload and convert VisualCron XML file
• Content-Type: multipart/form-data
• Body: XML file in file field
• Response: Conversion result with download ID

GET /api/conversion/download/:id

• Description: Download converted Logic App JSON
• Parameters: id - Download ID from upload response
• Response: JSON file download

🔧 Troubleshooting

Common Issues

1. CORS Errors: Ensure backend CORS is configured for frontend URL
2. File Upload Fails: Check file size limits and XML validation
3. Conversion Errors: Verify VisualCron XML structure matches expected format
4. Download Issues: Ensure download ID is valid and file exists

Debug Mode

Enable debug logging in the backend:

npm run start:debug

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Add your improvements
4. Submit a pull request

📄 License

MIT License - feel free to use and modify as needed.