ng-serve-runner

A simple VS Code extension that adds a status bar button to quickly run ng serve for Angular projects.

Features

• Smart Project Detection: Automatically detects Angular projects and only shows the button when appropriate
• Intelligent Activation: Button appears only in workspaces containing Angular projects
• Real-time Monitoring: Monitors workspace changes and updates button visibility accordingly
• One-Click Execution: Adds a status bar button with play icon to quickly run ng serve
• Dedicated Terminal: Creates a dedicated "Angular Server" terminal for clean execution
• Visual Feedback: Clear status messages and tooltips for user guidance

Detection Criteria

The extension automatically identifies Angular projects by checking for:

• angular.json configuration file
• Angular dependencies in package.json
• Typical Angular project structure (src/app/, src/main.ts)

Logo

The extension includes a custom logo featuring:

• Angular-inspired red gradient background
• White "A" shape representing Angular
• Play button triangle indicating execution
• "ng serve" text label

To customize the logo:

1. Create a 128x128 PNG file named icon.png
2. Use the design specifications in LOGO_DESIGN.md
3. Repackage and republish the extension

Usage

1. Open an Angular Project: Open any folder containing an Angular project in VS Code
2. Automatic Detection: The extension will automatically detect if it's an Angular project
3. Button Visibility: The ▶ Run ng serve button will appear in the status bar (bottom left) only for Angular projects
4. Start Development Server: Click the button to launch ng serve in a dedicated terminal

Smart Behavior

• ✅ Angular Projects: Button is visible and functional
• ❌ Non-Angular Projects: Button is hidden to avoid confusion
• 🔄 Real-time Updates: Button visibility updates when you switch workspaces or modify project files

Requirements

• Node.js and npm installed
• Angular CLI installed globally (npm install -g @angular/cli)

Development

To test the extension:

1. Open this project in VS Code
2. Press F5 or go to Run > Start Debugging
3. This opens the Extension Development Host window
4. Open an Angular project in the new window
5. The status bar button should appear

Installation

Package the extension and install it:

1. Run vsce package (install vsce globally first: npm install -g vsce)
2. Install the .vsix file via VS Code's Extensions > Install from VSIX...