demf-custom-operator-details 3.0.0

package/README.md

@@ -0,0 +1,343 @@
+# 🎨 Vue 3 + Vite Microfrontend Template
+
+![REPO-TYPE](https://img.shields.io/badge/repo--type-template-blue?style=for-the-badge&logo=github)
+
+Professional template for creating Vue 3 + Vite microfrontends with Single-SPA architecture.
+
+---
+
+## 📦 Repository Contents
+
+This repository provides:
+
+### 🎨 **Microfrontend Template** (`/app`)
+Base Vue 3 + Vite + Vuetify 3 template for Single-SPA
+
+### 🛠️ **MF Generator** (`/generator`)
+Automated tool to create new microfrontends from template
+
+### 🔄 **Migration Tool** (`/migration-tools`)
+Automated tool to migrate Vue CLI → Vite projects
+
+---
+
+## 🚀 Quick Start
+
+### Option 1: Create New Microfrontend
+
+```bash
+# 1. Navigate to generator folder
+cd generator
+
+# 2. Run the script
+# Windows
+create-mf.bat
+
+# Linux/macOS
+./create-mf.sh
+
+# Cross-platform (Node.js)
+node create-mf.js
+```
+
+📚 **Complete Documentation:**
+- [`generator/README.md`](./generator/README.md) - Complete guide
+- [`generator/QUICKSTART.md`](./generator/QUICKSTART.md) - Quick reference
+
+---
+
+### Option 2: Migrate Existing Vue CLI Project
+
+```bash
+# 1. Navigate to migration-tools folder
+cd migration-tools
+
+# 2. Run the script
+# Windows
+migrate-to-vite.bat
+
+# Linux/macOS
+node migrate-to-vite.js
+```
+
+⚡ **Automated migration in 5-10 minutes!**
+
+📚 **Migration Documentation:**
+- [`migration-tools/README.md`](./migration-tools/README.md) - Complete guide
+- [`migration-tools/QUICKSTART.md`](./migration-tools/QUICKSTART.md) - Quick guide
+- [`migration-tools/CHANGELOG.md`](./migration-tools/CHANGELOG.md) - Version changelog
+
+---
+
+## 📋 Prerequisites
+
+- **Node.js** >= 22.0.0 < 23 || >= 24.8.0 < 25
+- **npm** (included with Node.js)
+- **Git** (to clone the repository)
+
+---
+
+## 🎯 Template Features
+
+### Frontend Stack
+- ✅ **Vue 3** + Composition API
+- ✅ **Vuetify 3** - Material Design UI
+- ✅ **Vite** - Fast build + HMR
+- ✅ **Vue Router 4** - Routing
+- ✅ **Vuex 4** - State management
+- ✅ **Vue I18n 9** - Internationalization
+
+### Architecture
+- ✅ **Single-SPA** - Microfrontend orchestration
+- ✅ **SystemJS** - Module loading
+- ✅ **Dynamic Props** - Runtime configuration
+- ✅ **Dynamic Theme** - Customizable palette
+
+### Developer Experience
+- ✅ **ESLint** - Linting
+- ✅ **Prettier** - Formatting
+- ✅ **Hot Module Replacement** - Fast development
+- ✅ **TypeScript Support** - Optional
+
+---
+
+## 📁 Repository Structure
+
+```
+vuejs3-microfrontend-vite-template/
+├── app/                        # 🎨 Microfrontend Template
+│   ├── public/
+│   ├── src/
+│   │   ├── App.vue
+│   │   ├── main.js
+│   │   ├── components/
+│   │   ├── locales/
+│   │   ├── plugins/
+│   │   ├── router/
+│   │   └── store/
+│   ├── package.json
+│   ├── vite.config.js
+│   └── ...
+│
+├── generator/                  # 🛠️ MF Creation Tool
+│   ├── create-mf.js           # Main script
+│   ├── create-mf.bat          # Windows wrapper
+│   ├── create-mf.ps1          # PowerShell
+│   ├── create-mf.sh           # Bash
+│   ├── README.md              # Complete documentation
+│   ├── QUICKSTART.md          # Quick guide
+│   └── CLEANUP-INSTRUCTIONS.md
+│
+├── migration-tools/            # 🔄 Migration Tool
+│   ├── migrate-to-vite.js     # Migration script
+│   ├── migrate-to-vite.bat    # Windows wrapper
+│   ├── migrate-to-vite.ps1    # PowerShell
+│   ├── README.md              # Complete guide
+│   ├── CHANGELOG.md           # Versions
+│   ├── QUICKSTART.md          # Quick guide
+│   └── CLEANUP-INSTRUCTIONS.md
+│
+├── .circleci/                  # CI/CD configuration
+├── .gitignore
+├── CHANGELOG.md                # Template changelog
+├── package.json                # Root package
+└── README.md                   # 📖 This file
+```
+
+---
+
+## ⚠️ Naming Conventions
+
+### Digital Enabler Standard
+
+New microfrontends follow the convention:
+
+```
+demf-[functional-name]
+```
+
+**Valid examples:**
+- ✅ `demf-auth` - Authentication
+- ✅ `demf-sidebar` - Sidebar
+- ✅ `demf-dashboard` - Dashboard
+- ✅ `demf-mashups-list` - Mashup list
+
+**Rules:**
+- Only lowercase letters (a-z)
+- Numbers (0-9)
+- Hyphens (`-`) and underscores (`_`)
+- ❌ NO spaces
+- ❌ NO special characters
+- ❌ NO uppercase letters
+
+---
+
+## 🔗 Root-Config Integration
+
+After creating a microfrontend:
+
+### 1. Update Import Map
+
+```json
+{
+  "imports": {
+    "demf-my-app": "http://localhost:9901/mf-app.js"
+  }
+}
+```
+
+### 2. Add to Layout
+
+```html
+<application name="demf-my-app" props="realm, palette, mfConfig"></application>
+```
+
+### 3. Configure Props
+
+Standard props are:
+- **`realm`** - Application context
+- **`palette`** - Color theme
+- **`mfConfig`** - MF-specific configuration
+
+---
+
+## 🛠️ Development Commands
+
+```bash
+# Install dependencies
+npm install
+
+# Development (watch + preview)
+npm run dev
+
+# Production build
+npm run build
+
+# Preview build
+npm run preview
+
+# Lint
+npm run lint
+
+# Format
+npm run format
+```
+
+---
+
+## 📚 Detailed Documentation
+
+### MF Generator
+- [`generator/README.md`](./generator/README.md) - Complete generator guide
+- [`generator/QUICKSTART.md`](./generator/QUICKSTART.md) - Quick start
+- [`generator/CLEANUP-INSTRUCTIONS.md`](./generator/CLEANUP-INSTRUCTIONS.md) - Cleanup instructions
+
+### Migration Tool
+- [`migration-tools/README.md`](./migration-tools/README.md) - Complete migration guide
+- [`migration-tools/QUICKSTART.md`](./migration-tools/QUICKSTART.md) - Quick migration
+- [`migration-tools/CHANGELOG.md`](./migration-tools/CHANGELOG.md) - Version changelog
+- [`migration-tools/CLEANUP-INSTRUCTIONS.md`](./migration-tools/CLEANUP-INSTRUCTIONS.md) - Cleanup instructions
+
+---
+
+## 🔄 Versions
+
+### Template
+- **Current Version**: 3.0.0
+- **Vue**: 3.5.13
+- **Vuetify**: 3.10.5
+- **Vite**: 6.0.11
+
+### Tools
+- **Generator**: v1.0.0
+- **Migration Tool**: v1.0.0
+
+---
+
+## 🐛 Troubleshooting
+
+### MF Generator
+
+| Problem | Solution |
+|---------|----------|
+| Invalid MF name | Use only lowercase, numbers, `-` and `_` |
+| Directory already exists | Choose different name or delete directory |
+| Port in use | Use different port (1024-65535) |
+
+### Migration Tool
+
+| Problem | Solution |
+|---------|----------|
+| Not a Vue CLI project | Check for `vue.config.js` file |
+| Build failed | Read `MIGRATION-REPORT.md` |
+| Broken i18n imports | Check relative paths in `src/` |
+
+---
+
+## 🤝 Contributing
+
+To contribute to this template:
+
+1. Fork the repository
+2. Create a branch for your feature (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+---
+
+## 📝 License
+
+Questo progetto è proprietà di **Engineering Ingegneria Informatica S.p.A.**
+
+---
+
+## 🔗 Risorse Utili
+
+- [Single-SPA Documentation](https://single-spa.js.org/)
+- [Vue 3 Documentation](https://vuejs.org/)
+- [Vite Documentation](https://vitejs.dev/)
+- [Vuetify 3 Documentation](https://vuetifyjs.com/)
+- [Vue Router Documentation](https://router.vuejs.org/)
+- [Vuex Documentation](https://vuex.vuejs.org/)
+- [Vue I18n Documentation](https://vue-i18n.intlify.dev/)
+
+---
+
+## 📧 Support
+
+For issues or questions:
+
+1. Check documentation in `generator/` and `migration-tools/` folders
+2. Review Troubleshooting sections
+3. Contact the **Digital Enabler Team**
+
+---
+
+**Digital Enabler Team**  
+*Engineering Ingegneria Informatica S.p.A.*
+
+---
+
+## 🎯 Next Steps
+
+### Want to create a new MF?
+```bash
+cd generator
+create-mf.bat  # Windows
+./create-mf.sh # Linux/macOS
+```
+
+### Want to migrate a Vue CLI project?
+```bash
+cd migration-tools
+migrate-to-vite.bat  # Windows
+node migrate-to-vite.js  # Linux/macOS
+```
+
+### Want to use the template manually?
+Copy the `app/` folder and customize files manually.
+
+---
+
+*Last updated: January 2025*