fogielpiotr / CloudDeveloperDesigner

PoC "Infrastructure as a Diagram".

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

πŸš€ Infrastructure as Diagram: POC Application

Welcome to the Infrastructure as Diagram Proof of Concept (POC) application! This repository introduces a unique approach to cloud infrastructure creation and DevOps automation through visual diagrams.

🌐 Diagram-Driven Resource Deployment and Azure DevOps Automation

Diagram Preview

This application is designed to deploy cloud resources, all through a visual diagramming interface. With an Angular frontend and a .NET Core backend, here's what our POC application brings to the table:

πŸ’‘ Key Features

  • Interactive Diagram: The frontend, built on Angular and powered by Fabric.js, provides a seamless diagramming experience. Users can drag and drop resources from a panel and customize properties such as names.

  • ARM Template Deployment: Users can visually design their desired cloud architecture using the diagram and specify parameters. The .NET Core backend, armed with Azure.Management, deploys resources using ARM templates.

  • Azure DevOps Integration: For DevOps automation, the application supports code templates packaged as zip files. Users can drag these templates onto the diagram, prompting automatic deployment to Azure DevOps. Embedded YAML code within the templates automates pipeline creation and builds.

  • Azure AD Connections: Users can define connections between applications using visual arrows on the diagram. The application detects these connections and creates authorized apps in Azure Active Directory, streamlining authentication and authorization.

🌩️ Putting It All Together

When using our application:

  1. Visualize: Design your cloud infrastructure by dragging resources onto the diagram canvas. Customize resource properties and connections.

  2. Deploy with ARM: For Azure deployment, define parameters and let the backend handle the ARM template deployment, transforming your diagram into a functional cloud architecture.

  3. Automate with DevOps: For DevOps automation, add code templates to the diagram. These templates contain YAML-embedded code, resulting in automated Azure DevOps pipelines and builds.

  4. Streamline Azure AD: Define application connections using arrows. The application processes these connections, creating authorized apps in Azure AD.

πŸ› οΈ Getting Started

Ready to experience the future of cloud architecture and DevOps automation? Follow these steps:

  1. Clone this repository to your local machine.
  2. Set up the Angular frontend application in the frontend folder as instructed.
  3. Use the interactive diagram interface to design your infrastructure visually, then export it.
  4. Move to the backend folder and follow the guide to set up the .NET Core API.
  5. Configure your Azure credentials for ARM deployments and Azure DevOps integration.

🀝 Contributions and Feedback

Developers, architects, and DevOps enthusiasts, your contributions are invaluable. Fork the repository, experiment with enhancements, and submit pull requests. Share ideas and feedback through issues – let's shape the landscape of Infrastructure as Code and DevOps Automation together.

πŸ”— Useful Links

About

PoC "Infrastructure as a Diagram".

License:MIT License


Languages

Language:C# 58.0%Language:TypeScript 31.8%Language:HTML 8.4%Language:SCSS 1.3%Language:JavaScript 0.5%