OpenAPI Client Stub Generation And Testing

A comprehensive full-stack MERN application that streamlines the process of generating, testing, and validating OpenAPI client stubs across multiple programming languages. Built for developers who need to quickly create and test API clients from OpenAPI specifications.

Overview

This application provides an intuitive 3-step workflow that transforms OpenAPI specifications into working client libraries with integrated testing capabilities. Whether you're working with REST APIs, need to generate client SDKs, or want to validate your OpenAPI specifications, this tool provides a complete solution.

Features

🚀 Streamlined 3-Step Workflow:

1. Upload & Validate - Drag-and-drop support for JSON/YAML OpenAPI specs with real-time validation
2. Language Selection - Choose from 10+ programming languages with visual language cards
3. Generate & Test - Create client code, test functionality, and download complete projects

✨ Professional User Interface:

• Salesforce Lightning Design System (SLDS) styling with authentic brand colors
• Modern UI with professional gradients and animations
• Fully responsive design optimized for desktop and mobile
• Interactive progress indicator with step-by-step guidance
• Real-time feedback with comprehensive error handling and success notifications

🛠 Enterprise-Grade Backend:

• Express.js REST API with comprehensive endpoint coverage
• OpenAPI Generator CLI JAR integration with automatic management and caching
• Web-based interface for the OpenAPI Generator command-line tool
• Salesforce API integration for real-world testing scenarios

Tech Stack

• Frontend: React 18 + TypeScript, Axios, Lucide Icons
• Backend: Node.js + Express.js, Multer, YAML.js
• Code Generation: OpenAPI Generator CLI (Java-based)
• Styling: Custom CSS with modern design principles

Supported Languages

Client Generation: All languages below

• Java
• JavaScript (Node.js)
• TypeScript (Node.js)
• Python
• C#
• Go
• PHP
• Ruby
• Swift
• Kotlin

**API Testing within the web app supported through JavaScript

Quick Start

Prerequisites

• Node.js (v16 or higher) - Download here
• Java Runtime Environment (JRE) - Required for OpenAPI Generator CLI
• Git - For version control

Installation

1. Clone the repository:

   git clone https://github.com/riyasurisalesforce/openapi-client-generation.git
   cd openapi-client-generation

2. Install all dependencies:

   npm run install-all

   This command automatically installs dependencies for the root project, server, and client applications.

3. Start the development environment:

   npm run dev

   This launches both the backend API server (port 5000) and React frontend (port 3000) concurrently.

4. Access the application: Open your browser and navigate to http://localhost:3000

Setting Up API Testing (Optional)

For full API testing functionality with JavaScript clients:

1. Generate a JavaScript client using the application
2. Download the generated ZIP file
3. Extract the openapi-javascript folder to the project root
4. Build the generated client:

   cd openapi-javascript
   npm install

   This creates the required dist/ folder with compiled JavaScript files.
5. The API testing features will now be fully functional

Important: Generated JavaScript clients must be built before testing. The build step compiles ES6+ source code to Node.js compatible JavaScript and creates the dist/index.js file that the server requires.

Note: The openapi-javascript folder is excluded from version control as it contains generated code specific to your OpenAPI specifications.

How to Use

Step 1: Upload Your OpenAPI Specification

• Drag and Drop: Simply drag your OpenAPI file (JSON or YAML) onto the upload area
• Click to Browse: Use the file browser to select your specification file
• Real-time Validation: The system automatically validates your spec and displays API information
• Supported Formats: OpenAPI 3.0+ in JSON or YAML format

Step 2: Choose Your Target Language

• Visual Selection: Browse through language cards showing popular programming languages
• 10+ Languages Supported: Java, JavaScript, TypeScript, Python, C#, Go, PHP, Ruby, Swift, Kotlin
• Clear Identification: Each card displays the full language name and icon for easy selection

Step 3: Generate and Test

• One-Click Generation: Click "Generate Client Code" to create your client library
• File Explorer: Browse through all generated files in an interactive tree view
• Live Testing: Use "Test Generated Code" to compile and execute your client (where supported)
• Complete Download: Download the entire generated project as a ZIP file for immediate use

Advanced Features

• Salesforce Integration: Test your generated clients against real Salesforce APIs
• Code Execution: Validate your generated clients work correctly before downloading
• Project Management: Organized file structure with all necessary dependencies included

Example OpenAPI Spec

The project includes sample-petstore-api.json - a complete OpenAPI 3.0 specification for testing. This demonstrates:

• Multiple HTTP methods (GET, POST, DELETE)
• Path parameters and request bodies
• Complex schema definitions with references
• Proper error response handling

Project Structure

openapi-client-generation/
├── client/                           # React Frontend Application
│   ├── src/
│   │   ├── App.tsx                  # Main application component with 3-step workflow
│   │   ├── App.css                  # SLDS styling with modern theme
│   │   └── index.tsx                # Application entry point
│   ├── public/
│   │   └── index.html               # HTML template with updated title
│   ├── package.json                 # Frontend dependencies and scripts
│   └── tsconfig.json                # TypeScript configuration
├── server/                           # Express Backend API
│   ├── index.js                     # Main server with all API endpoints
│   ├── TestClient.java              # Java test client for API validation
│   ├── openapi-generator-cli.jar    # OpenAPI Generator CLI tool
│   └── package.json                 # Backend dependencies
├── uploads/                          # Uploaded OpenAPI specifications
├── generated/                        # Generated client projects (organized by timestamp)
├── openapi-javascript/               # Generated JS client for API testing (gitignored)
├── extracted/                        # Temporary extraction directory
├── sample-petstore-api.json          # Sample OpenAPI spec for testing
├── demo.html                         # Demonstration page
├── package.json                      # Root package with development scripts
├── LICENSE                           # MIT license
└── README.md                         # This documentation

Key Directories

• client/: React TypeScript frontend with modern UI/UX
• server/: Node.js Express backend with OpenAPI generation capabilities
• generated/: Time-stamped directories containing generated client projects
• uploads/: Temporary storage for uploaded OpenAPI specification files
• openapi-javascript/: Auto-generated JavaScript client for live API testing

Development Commands

# Start both frontend and backend
npm run dev

# Start only backend (port 5000)
npm run server

# Start only frontend (port 3000)
npm run client

# Build frontend for production
npm run build

# Install all dependencies
npm run install-all

Architecture Highlights

Backend Features

• Multer Integration: Secure file upload with type validation
• OpenAPI Generator Management: Automatic JAR download and caching
• Process Execution: Safe code compilation and execution with timeouts
• Archive Creation: ZIP file generation for project downloads

Frontend Features

• TypeScript: Full type safety with comprehensive interfaces
• Modern React: Functional components with hooks
• Responsive Design: Mobile-first approach with CSS Grid/Flexbox
• Error Handling: Comprehensive user feedback system

Security Considerations

• File type validation for uploads
• Execution timeouts prevent runaway processes
• Input sanitization and validation

Troubleshooting

Port conflicts: Modify ports in server/index.js (backend) or client package.json (frontend)

Generation failures: Ensure the OpenAPI spec is valid JSON/YAML and follows OpenAPI 3.0+ format

API testing setup:

1. Generate a JavaScript client and download the ZIP file
2. Unzip the downloaded file and upload it to your local directory structure
3. Build the client by running cd openapi-javascript && npm install

Salesforce Integration

This application includes specialized Salesforce API integration capabilities:

• Real-world Testing: Test generated clients against actual Salesforce org APIs
• Authentication: Support for Salesforce OAuth and session-based authentication
• Metadata Access: Examples showing how to access Salesforce object metadata

License

MIT License - see LICENSE file for details.

Support

For questions, issues, or contributions, please use the GitHub repository's issue tracker.