ProjectSpark
Smart development server with automatic framework detection
Launch the perfect development server for your project with a single click. ProjectSpark automatically detects your framework (Flutter, Angular, Next.js, SvelteKit, Vite, React, and more) and starts the right dev server - no configuration needed.
📸 Screenshots
Status Bar Integration
One-click server control directly in your status bar
Framework Detection
Automatic framework detection with instant server startup
Terminal Integration
Seamless terminal integration with framework-specific commands
✨ Features
🎯 Automatic Framework Detection
- Detects Flutter, Angular, Next.js, Nuxt, Vite, React, SvelteKit, Vue, and static HTML
- No manual configuration required
- Intelligent priority system ensures the right framework is detected
⚡ One-Click Server Management
- Start/stop servers with a single click from the status bar
- Automatic port conflict handling
- Shows running port in status bar when active
🔄 Hot Reload Support
- Flutter hot reload (
r) and hot restart (R)
- Automatic file watching for
.dart files
- Built-in HMR support for modern web frameworks
🌐 Smart Browser Opening
- Automatically opens your browser when server starts
- Configurable browser selection
- Respects your "don't open browser" preferences
📁 Static HTML Server
- Full Live Server functionality for plain HTML/CSS/JS projects
- File watching with automatic browser refresh
- Perfect fallback when no framework is detected
🛠️ Multi-Root Workspace Support
- Works seamlessly with VS Code multi-root workspaces
- Select which workspace to serve
- Independent server management per workspace
🎨 Beautiful Status Bar
⚡ Spark Run - Click to start your dev server🚫 Port : XXXX - Click to stop the server- Clean, intuitive interface
📦 Installation
From VS Code Marketplace:
- Open VS Code
- Press
Ctrl+Shift+X (or Cmd+Shift+X on Mac)
- Search for "ProjectSpark"
- Click Install
Manual Installation:
- Download the
.vsix file
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X)
- Click
... menu → "Install from VSIX..."
- Select the downloaded
.vsix file
🚀 Quick Start
Open Your Project
- Open any folder or workspace in VS Code
- ProjectSpark will automatically detect your framework
Start Your Server
- Look for the
⚡ Spark Run button in the status bar (bottom right)
- Click it to start your development server
- That's it! Your server starts automatically
Stop Your Server
- Click the
🚫 Port : XXXX button when the server is running
- Or use Command Palette:
ProjectSpark: Stop Server
📚 Usage
Core Commands
Start Server - ProjectSpark: Start Server
- Detects your framework automatically
- Starts the appropriate dev server
- Opens browser (if enabled)
Stop Server - ProjectSpark: Stop Server
- Stops the running development server
- Cleans up resources
Hot Reload - ProjectSpark: Hot Reload (Flutter only)
- Sends
r command to Flutter terminal
- Reloads app without losing state
Hot Restart - ProjectSpark: Hot Restart (Flutter only)
- Sends
R command to Flutter terminal
- Restarts app completely
Change Workspace - ProjectSpark: Change workspace
- Select which workspace to use in multi-root setups
Framework-Specific Behavior
Flutter
- Runs
flutter run (you choose device)
- Automatic hot reload on
.dart file changes
- Manual hot reload/restart commands available
Next.js / Nuxt / Vite / SvelteKit
- Runs
npm run dev
- Built-in HMR (Hot Module Replacement) works automatically
- No additional configuration needed
Angular
- Runs
ng serve
- Built-in HMR support
React (Create React App)
- Runs
npm start
- Fast Refresh enabled automatically
Vue CLI
- Runs
npm run serve
- Hot reload built-in
Static HTML / CSS / JavaScript
- Uses Live Server with file watching
- Automatic browser refresh on file changes
- Perfect for simple websites and prototypes
🔧 Configuration
Open VS Code Settings (Ctrl+,) and search for "ProjectSpark" to configure:
Port Settings
projectspark.settings.port - Default port for static server (default: 16670)- Automatically increments if port is in use
Browser Settings
projectspark.settings.CustomBrowser - Choose browser (chrome, firefox, microsoft-edge)projectspark.settings.NoBrowser - Disable auto-open browserprojectspark.settings.AdvanceCustomBrowserCmdLine - Custom browser command line
Host Settings
projectspark.settings.host - Server host (default: 127.0.0.1)projectspark.settings.useLocalIp - Use local IP for network access
File Watching
projectspark.settings.ignoreFiles - Patterns to ignore for file watching- Default ignores:
.vscode/**, **/*.scss, **/*.sass, **/*.ts
Status Bar
projectspark.settings.showOnStatusbar - Show/hide status bar button (default: true)
Workspace
projectspark.settings.root - Custom root directory for static serverprojectspark.settings.multiRootWorkspaceName - Selected workspace in multi-root
🐛 Troubleshooting
Server won't start?
- Check the Output panel (
View → Output) and select "ProjectSpark"
- Verify you have a valid project (package.json, pubspec.yaml, etc.)
- Ensure your framework's dev command exists in package.json scripts
Wrong framework detected?
- ProjectSpark uses priority: Flutter > Angular > Node frameworks > Static
- Check your project structure matches expected framework patterns
- For Node.js projects, ensure dependencies are in package.json
Port conflicts?
- ProjectSpark automatically increments the port if the default is taken
- You'll see a notification: "Port X is taken, using port X+1"
- Change default port in settings if needed
Browser won't open?
- Check
projectspark.settings.NoBrowser setting
- Try manually opening
http://localhost:PORT shown in status bar
- Check Output panel for browser opening errors
Terminal not showing?
- Terminal should appear automatically when server starts
- Check Terminal panel if hidden
- Look for terminal named "ProjectSpark: [Framework Name]"
Not detecting my framework?
- Verify framework-specific files exist (e.g.,
pubspec.yaml for Flutter, angular.json for Angular)
- Check package.json includes framework dependencies
- Fallback to static HTML server if no framework detected
🎯 Supported Frameworks
| Framework |
Detection |
Command |
Hot Reload |
| Flutter |
pubspec.yaml |
flutter run |
✅ Automatic |
| Angular |
angular.json |
ng serve |
✅ Built-in |
| Next.js |
package.json + next |
npm run dev |
✅ Built-in |
| Nuxt |
package.json + nuxt |
npm run dev |
✅ Built-in |
| Vite |
package.json + vite |
npm run dev |
✅ Built-in |
| React CRA |
package.json + react-scripts |
npm start |
✅ Built-in |
| SvelteKit |
package.json + @sveltejs/kit |
npm run dev |
✅ Built-in |
| Vue CLI |
package.json + @vue/cli-service |
npm run serve |
✅ Built-in |
| Static HTML |
Fallback |
Live Server |
✅ File watching |
📝 Release Notes
See CHANGELOG.md for detailed version history.
Latest Version: 1.1.1
- Initial release
- Framework detection for 9+ frameworks
- Hot reload for Flutter
- Static HTML server support
- Multi-root workspace support
🤝 Contributing
Found a bug? Have a feature request?
📄 License
MIT License - See LICENSE for details
🔗 Links
🆚 How is ProjectSpark Different from Live Server?
ProjectSpark is like Live Server, but smarter:
- Auto-detects your framework - No need to manually run
npm run dev or flutter run
- Framework-aware - Runs the correct command for your project type
- One button - Same simple status bar button, but works for all frameworks
- Hot reload - Automatic Flutter hot reload support
- Multi-framework - Supports 9+ frameworks out of the box
Use Live Server if: You only work with static HTML/CSS/JS
Use ProjectSpark if: You work with modern frameworks and want one tool that "just works"
Made with ❤️ by DaddooDev
Enjoying ProjectSpark? Leave a review ⭐
