Hello World Azure DevOps Extension

A simple Azure DevOps extension built with React 18 and Vite that demonstrates basic SDK integration.

Features

• Displays "Hello World!" message
• Shows the current project name using Azure DevOps Extension SDK
• Built with React 18 and Vite for modern development experience

Project Structure

hello-ado-react-js-app/
├── public/
│   └── index.html          # Entry HTML file
├── src/
│   ├── App.jsx            # Root React component
│   ├── HelloWorld.jsx     # Main component with SDK integration
│   └── main.jsx           # React application entry point
├── package.json           # Project dependencies and scripts
├── vite.config.js         # Vite configuration
├── vss-extension.json     # Azure DevOps extension manifest
└── README.md             # This file

Getting Started

1. Install dependencies:

   npm install

2. Start development server:

   npm run dev

3. Build the project:

   npm run build

4. Package the extension:

   npm run package

Extension Details

• Publisher: my-publisher (placeholder)
• Extension ID: hello-world-extension
• Version: 1.0.0
• Target: Pipelines hub group in Azure DevOps

Development Scripts

• npm run dev - Start Vite development server
• npm run build - Build the React application for production
• npm run package - Create .vsix extension package using tfx-cli
• npm run preview - Preview the production build locally

Dependencies

• React: ^18.3.1
• Azure DevOps Extension SDK: ^4.0.0
• Vite: ^6.0.2
• TFX CLI: ^0.17.0 (for packaging)

Installation in Azure DevOps

1. Build and package the extension using npm run build && npm run package
2. Upload the generated .vsix file to the Azure DevOps marketplace or install it directly in your organization
3. The extension will appear as a "Hello World" tab in the Pipelines section