CloudShipX Deployment App 🚀

Check out the CloudShipX Deployment App, a robust and scalable platform designed to automate web application deployments. Inspired by Vercel, this system handles the complexity of cloning, building, and deploying valid React/Node repositories directly to the cloud.

---

🏗️ Architecture

The system is built with a microservices-inspired architecture, separating the concerns of Upload, Build/Deployment, and User Interface. This ensures scalability and reliability.

graph TD
    User[User] -->|Submit Repo URL| GenericFrontend[Frontend UI]
    GenericFrontend -->|POST /deploy| UploadService[Upload Service]
    
    subgraph "Backend Services"
        UploadService -->|1. Clone Repo| LocalStorage[Local Storage]
        UploadService -->|2. Upload Source| S3Source["AWS S3 (Source Bucket)"]
        UploadService -->|3. Push Job ID| RedisQueue["Redis Queue (build-queue)"]
        
        DeploymentService[Deployment Service] -->|4. Poll Job| RedisQueue
        DeploymentService -->|5. Download Source| S3Source
        DeploymentService -->|6. Build Project| BuildEnv[Build Environment]
        BuildEnv -->|npm install && run build| BuildArtifacts[Build Artifacts]
        DeploymentService -->|7. Upload Dist| S3Dist["AWS S3 (Dist Bucket)"]
    end

    DeploymentService -->|Update Status| RedisStatus[Redis Status Store]
    UploadService -->|Set Initial Status| RedisStatus
    GenericFrontend -->|Poll Status| RedisStatus

Loading

System Components

1. Upload Service (The Gateway)

   • acts as the entry point for all deployment requests.
   • Responsibility: Validates the repository URL, clones the code locally, uploads the raw source files to an S3 bucket, and queues a build job in Redis.
   • Tech: Node.js, Express, Simple-Git, AWS SDK.

2. Deployment Service (The Worker)

   • A dedicated background worker that processes build jobs.
   • Responsibility: Listens to the Redis build-queue, downloads the source code, executes the build process (npm install && npm run build), and uploads the final production-ready assets (dist/) to the S3 bucket.
   • Tech: Node.js, Redis, Child Process.

3. Frontend (The Interface)

   • A clean and responsive UI for users to interact with the system.
   • Responsibility: Allows users to input their GitHub repository URLs and track the real-time status of their deployment.
   • Tech: React 19, Vite, TypeScript.

4. Redis (The Glue)

   • Acts as both a Message Queue for decoupling the upload and build processes and a Key-Value Store for tracking real-time deployment status.

---

🛠️ Tech Stack

• Frontend: React 19, TypeScript, Vite, TailwindCSS (assumed/recommended)
• Backend: Node.js, Express.js
• Database/Caching: Redis
• Cloud Storage: AWS S3
• Tools: Simple-Git, Docker (future), AWS SDK

---

🚀 Getting Started

Follow these instructions to set up the project locally.

Prerequisites

• Node.js (v18+)
• Redis (Running locally on port 6379)
• AWS Credentials (Access Key & Secret Key with S3 permissions)

Installation

1. Clone the Repository

   git clone https://github.com/aryansanganti/CloudShipX_Deployment-App.git
   cd CloudShipX_Deployment-App

2. Install Dependencies

   • Root (Backend):

     npm install

   • Deployment Service:

     cd Deployement-Ser
     npm install

   • Frontend:

     cd frontend
     npm install

Configuration

Ensure your AWS credentials are securely configured. You may need to set environment variables or use the aws-cli configuration typically found in ~/.aws/credentials.

Running the Services

You need to run all three components simultaneously (or use a tool like concurrently).

1. Start Redis Server

   redis-server

2. Start Upload Service (Root)

   # From root directory
   npm start # or npx ts-node src/index.ts

3. Start Deployment Service

   # From Deployement-Ser directory
   npx ts-node src/index.ts

4. Start Frontend

   # From frontend directory
   npm run dev

Visit http://localhost:5173 to start deploying!

---

🔮 Future Improvements

• Request Handler: Implement a service to proxy requests to S3, enabling custom subdomains (e.g., project-id.cloudshipx.com).
• Dockerization: Containerize the build environment for better security and consistency.
• Webhooks: Integrate GitHub Webhooks for automatic deployments on push.