⚡ Vite Spark - VS Code Extension

Create full-stack projects in seconds with a beautiful visual interface!

The official VS Code extension for Vite Spark - a lightning-fast React and Node.js project generator.

✨ Features

🎨 Beautiful Visual Interface - Card-based UI that opens in your editor
🚀 One-Click Project Creation - No more CLI commands to remember
🌐 Full-Stack Support - Create frontend, backend, or both together
⚙️ Customizable Settings - Save your preferences for one-click setups
🎯 Multiple Templates - Basic, Auth-ready, and more
💻 TypeScript & JavaScript - Full support for both
🎨 Tailwind CSS - Optional integration
📦 Monorepo Setup - Automatic configuration for full-stack projects
🔐 Production-Ready Auth - JWT, bcrypt, HttpOnly cookies
⚡ Lightning Fast - Powered by Vite and Node.js

🚀 Quick Start

1. Install the Extension

Method 1: VS Code Marketplace

Open VS Code
Press Ctrl+Shift+X (or Cmd+Shift+X on Mac)
Search for "Vite Spark"
Click "Install"

Method 2: Command Line

code --install-extension patelkrish0.vite-spark-extension

2. Create Your First Project

Option A: Using Activity Bar (Recommended)

Click the 🚀 Rocket icon in the Activity Bar (left sidebar)
Click "Create Project" button
Fill in the form in the editor
Click "Create Project"

Option B: Using Command Palette

Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
Type "Vite Spark: Create New Project"
Fill in the form
Click "Create Project"

Option C: Using Keyboard Shortcut

Press Ctrl+Alt+V (or Cmd+Alt+V on Mac)

Option D: Right-Click in Explorer

Right-click on a folder in Explorer
Select "Vite Spark: Create New Project"

3. Configure Settings (Optional)

Press Ctrl+Alt+S or use Command Palette → "Vite Spark: Open Settings"

📋 What You Can Create

🎨 Frontend Projects

Create React applications with:

Basic Template - Minimal starter with Vite + React
Auth Template - Pre-configured authentication with:
- Login/Signup/Logout pages
- Protected routes
- Context-based auth (useAuth hook)
- HttpOnly cookies (XSS protection)
- Theme switcher (dark/light)
- Form validation
- Error handling

Options:

JavaScript or TypeScript
With or without Tailwind CSS
Automatic Git initialization
Auto-install dependencies
Auto-start dev server

🔧 Backend Projects

Create Node.js APIs with:

Express.js + MongoDB with full authentication system
- JWT authentication with HttpOnly cookies
- Role-Based Access Control (Admin/User)
- Soft-delete functionality (users can be restored)
- Factory pattern CRUD operations
- Email service (Nodemailer)
- File upload (Multer)
- Security middleware (Helmet, Rate limiting, CORS)
- Error handling middleware
- Input validation
- Password hashing (bcrypt)

🌐 Full-Stack Projects

Create both together with:

Monorepo setup - Run both servers with one command
Coordinated Git - Initialize in root or separate folders
Integrated workflow - Frontend ↔ Backend communication ready
CORS pre-configured - No setup needed
Shared authentication - Frontend and backend work together

🎯 Interface Overview

Main Project Creator

Opens in your editor as a tab with sections:

1. Project Information

Project name - Enter your project name
Location - Choose where to create (workspace or custom)

2. Project Type Selection (Beautiful Cards)

🎨 Frontend - React application with Vite
🔧 Backend - Node.js API with Express
🌐 Full-Stack - Both together

3. Frontend Configuration (if applicable)

Language: JavaScript or TypeScript
Template: Basic or Auth
Tailwind CSS: Toggle on/off

4. Backend Configuration (if applicable)

Template: Node.js (more coming soon)

5. Full-Stack Options (if applicable)

Monorepo setup - Create root package.json
Git location - Root folder or separate

6. Features

☑️ Tailwind CSS
☑️ Initialize Git
☑️ Install dependencies
☑️ Start dev server

Settings Page

Customize all your defaults:

🏗️ Project Defaults - Type, language, templates
🎨 Default Features - Tailwind, Git, Install, Start
📦 Full-Stack Options - Monorepo, Git location
🔧 Behavior - Location, overwrite, open behavior
🎨 UI Customization - Card layout, theme, compact mode
⚡ Advanced - NPX, timeout, terminal, custom flags

⌨️ Keyboard Shortcuts

Shortcut	Action
`Ctrl+Alt+V` `Cmd+Alt+V` (Mac)	Create New Project
`Ctrl+Alt+S` `Cmd+Alt+S` (Mac)	Open Settings
`Ctrl+Shift+Alt+V` `Cmd+Shift+Alt+V` (Mac)	Quick Create with Defaults

🎨 Available Commands

Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and search:

Command	Description
`Vite Spark: Create New Project`	Full interactive interface
`Vite Spark: Quick Create Frontend`	Fast frontend creation
`Vite Spark: Quick Create Backend`	Fast backend creation
`Vite Spark: Quick Create Full-Stack`	Fast full-stack creation
`Vite Spark: Open Settings`	Configure defaults
`Vite Spark: Quick Create (Use Defaults)`	One-click with saved settings
`Vite Spark: Check Vite Spark Installation`	Verify CLI installation

⚙️ Settings Reference

Project Defaults

Setting	Description	Default
`viteSpark.projectType`	Default project type	`frontend`
`viteSpark.frontendLanguage`	Default frontend language	`js`
`viteSpark.frontendTemplate`	Default frontend template	`Auth`
`viteSpark.backendTemplate`	Default backend template	`node`

Features

Setting	Description	Default
`viteSpark.includeTailwind`	Include Tailwind CSS by default	`false`
`viteSpark.initGit`	Initialize Git repository	`false`
`viteSpark.gitLocation`	Git location for full-stack	`root`
`viteSpark.autoInstall`	Auto install dependencies	`false`
`viteSpark.autoStart`	Auto start dev server	`false`
`viteSpark.monorepo`	Create monorepo for full-stack	`true`

Behavior

Setting	Description	Default
`viteSpark.defaultLocation`	Default project location	`workspace`
`viteSpark.confirmOverwrite`	Confirm before overwriting	`true`
`viteSpark.openAfterCreate`	How to open after creation	`ask`

UI Customization

Setting	Description	Default
`viteSpark.ui.cardLayout`	Card layout style	`grid`
`viteSpark.ui.theme`	Extension theme	`auto`
`viteSpark.ui.compactMode`	Use compact spacing	`false`

Advanced

Setting	Description	Default
`viteSpark.advanced.useNpx`	Use npx instead of global install	`true`
`viteSpark.advanced.timeout`	Command timeout (ms)	`300000`
`viteSpark.advanced.showTerminal`	Show terminal during creation	`false`
`viteSpark.advanced.customFlags`	Custom CLI flags	`""`

🛠️ Requirements

VS Code

Version 1.85.0 or higher

System Requirements

Node.js: Version 16.x or higher
npm or yarn
Git (optional, for Git initialization)
MongoDB (optional, for backend projects)

Vite Spark CLI

The extension uses npx by default (no installation required).

For global installation:

npm install -g vite-spark

📦 What Gets Created

Frontend Only Structure

my-app/
├── public/
│   └── vite.svg
├── src/
│   ├── context/         # Auth & Theme contexts (Auth template)
│   │   ├── AuthContext.jsx
│   │   └── ThemeContext.jsx
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── .gitignore
├── package.json
├── vite.config.js
├── index.html
└── README.md

Backend Only Structure

my-api/
├── Controllers/
│   ├── AdminControllers.js
│   ├── AuthControllers.js
│   ├── ErrorControllers.js
│   ├── FactoryControllers.js
│   └── UserControllers.js
├── Models/
│   └── userModel.js
├── Routes/
│   ├── AdminRoutes.js
│   └── AuthRoutes.js
├── Utils/
│   ├── APIFeatures.js
│   ├── AppError.js
│   ├── CatchAsync.js
│   ├── checkEmail.js
│   ├── FileUpload.js
│   └── sendMail.js
├── plugins/
│   └── softDelete.js
├── .env.example
├── .gitignore
├── App.js
├── config.js
├── package.json
└── README.md

Full-Stack Structure (Monorepo)

my-project/
├── frontend/           # React application
│   ├── src/
│   ├── package.json
│   └── vite.config.js
├── backend/            # Node.js API
│   ├── Controllers/
│   ├── Models/
│   ├── Routes/
│   ├── Utils/
│   ├── App.js
│   └── package.json
├── package.json        # Root (run both servers)
├── .gitignore
└── README.md           # Setup instructions

🔐 Authentication Features (Auth Template)

Frontend Features

✅ Context-based authentication (useAuth hook)
✅ Login/Signup/Logout pages
✅ Protected routes pattern
✅ User profile management
✅ Theme switcher (dark/light)
✅ Form validation
✅ Error handling
✅ HttpOnly cookies (no localStorage)

Backend Features

✅ JWT authentication
✅ Password hashing with bcrypt
✅ Role-Based Access Control (Admin/User)
✅ User registration and login
✅ Password reset functionality
✅ Profile updates
✅ Soft-delete (users can be restored)
✅ Token refresh patterns

Security Features

✅ HttpOnly cookies (XSS protection)
✅ CSRF protection (SameSite cookies)
✅ Rate limiting (prevent brute force)
✅ Input validation
✅ SQL/NoSQL injection prevention
✅ Security headers (Helmet)
✅ CORS configuration

🎓 Usage Examples

Example 1: Create a SaaS Application

Click 🚀 in Activity Bar
Click "Create Project"
Enter name: my-saas-app
Select Full-Stack
Select TypeScript
Select Auth template
Enable Tailwind CSS
Enable Monorepo
Enable Git
Enable Install
Click "Create Project"

Result: Full-stack TypeScript SaaS boilerplate in ~30 seconds!

Example 2: Quick Frontend Prototype

Method 1: Quick Command

Press Ctrl+Shift+P
Type "Vite Spark: Quick Create Frontend"
Enter name: landing-page

Method 2: With Settings

Press Ctrl+Alt+S to open settings
Set your defaults (JS, Basic template, Tailwind ON)
Save settings
Press Ctrl+Shift+Alt+V for instant creation

Result: React app created instantly with your preferences!

Example 3: Backend API

Right-click folder in Explorer
Select "Vite Spark: Create New Project"
Enter name: my-api
Select Backend
Click "Create Project"

Result: Production-ready Node.js API with authentication!

🐛 Troubleshooting

Extension Not Appearing

Problem: Can't find Vite Spark in VS Code

Solution:

Restart VS Code
Go to Extensions (Ctrl+Shift+X)
Search "Vite Spark"
Check if enabled
Reinstall if needed

"Vite Spark CLI not found" Warning

Problem: Yellow warning banner in extension

Solution 1: Use NPX (Recommended)

Open Settings → Search "Vite Spark"
Enable Use NPX
Restart extension

Solution 2: Install Globally

npm install -g vite-spark

Verify installation:

vite-spark --version

Project Creation Fails

Problem: Error during project creation

Check:

✅ Node.js installed: node --version (16+)
✅ npm accessible: npm --version
✅ Write permissions in target folder
✅ Valid project name (lowercase, letters, numbers, hyphens)
✅ No special characters in path

View Error Details:

Click "View Output" when error appears
Or: View → Output → Select "Vite Spark"

MongoDB Connection Error (Backend)

Problem: Backend can't connect to database

Solution:

Install MongoDB:
- Local: Download MongoDB
- Cloud: MongoDB Atlas
Update .env in backend folder:

MONGODB_URI=mongodb://localhost:27017/myapp
# Or Atlas:
# MONGODB_URI=mongodb+srv://user:pass@cluster.mongodb.net/dbname

Start MongoDB (if local):

mongod

CORS Errors (Full-Stack)

Problem: Frontend can't reach backend

Check Backend .env:

CLIENT_URL=http://localhost:5173

Check Frontend Fetch:

fetch(url, {
  credentials: 'include'  // Must include this
})

Check Backend CORS:

app.use(cors({
  origin: 'http://localhost:5173',
  credentials: true  // Must be true
}));

Extension Slow or Unresponsive

Solutions:

Increase timeout:
- Settings → Vite Spark: Advanced: Timeout
- Set to 600000 (10 minutes)
Disable other extensions temporarily
Close unused files/tabs
Clear VS Code cache:
- Close VS Code
- Delete: ~/.vscode/extensions cache
- Restart
Use terminal mode:
- Settings → Enable Show Terminal
- See progress in terminal

Port Already in Use

Problem: "Port 5173 already in use"

Solution:

# Kill the port
npx kill-port 5173

# Or find and kill process
# Windows:
netstat -ano | findstr :5173
taskkill /PID <PID> /F

# Mac/Linux:
lsof -ti:5173 | xargs kill -9

Git Initialization Fails

Problem: "Git initialization failed"

Solution:

Install Git: Download
Configure Git:

git config --global user.name "Your Name"
git config --global user.email "your@email.com"

Verify:

git --version

🔄 Updates & Changelog

Version 1.0.0 (Current Release)

🎉 Initial Release

Features:

✅ Visual project creator in editor
✅ Settings page with full customization
✅ Activity Bar integration with quick actions
✅ Full-stack support (frontend + backend)
✅ Backend templates (Node.js with authentication)
✅ Monorepo setup for full-stack projects
✅ Keyboard shortcuts
✅ Context menu integration
✅ Multiple quick create options
✅ Real-time validation
✅ Progress feedback
✅ Error handling with output channel

Templates:

React Frontend (Basic & Auth)
Node.js Backend (Express + MongoDB)
Full-Stack (React + Node.js)

Supported:

JavaScript & TypeScript
Tailwind CSS integration
Git initialization
Auto-install dependencies
Auto-start dev server

Coming Soon

Version 1.1.0 (Planned)

🔜 PHP backend templates (Laravel/Slim)
🔜 Python FastAPI templates
🔜 Node.js Basic template (minimal)
🔜 More frontend frameworks (Vue, Svelte)
🔜 Database options (PostgreSQL, MySQL)
🔜 Docker support
🔜 CI/CD templates (GitHub Actions, GitLab CI)
🔜 Environment file generator
🔜 Project templates gallery
🔜 Custom template support

Future Plans:

Project migration tools
Live preview in VS Code
AI-powered code generation
Multi-language support
Video tutorials integration

🤝 Contributing

We welcome contributions! Here's how you can help:

Report Issues

Go to Issues
Click "New Issue"
Choose template:
- 🐛 Bug Report
- ✨ Feature Request
- 📖 Documentation
- ❓ Question
Fill in details:
- Clear title
- Steps to reproduce (bugs)
- Expected behavior
- Actual behavior
- Screenshots/videos
- VS Code version
- Extension version
- Operating system

Suggest Features

Go to Discussions
Click "New Discussion"
Choose "Ideas" category
Describe:
- What problem it solves
- How it should work
- Why it's useful
- Any examples

Submit Pull Requests

# 1. Fork the repository on GitHub

# 2. Clone your fork
git clone https://github.com/YOUR-USERNAME/vite-spark-vscode.git
cd vite-spark-vscode

# 3. Create a branch
git checkout -b feature/my-awesome-feature

# 4. Install dependencies
npm install

# 5. Make your changes

# 6. Test thoroughly
# Press F5 in VS Code to run Extension Development Host

# 7. Commit your changes
git add .
git commit -m "feat: add my awesome feature"

# 8. Push to your fork
git push origin feature/my-awesome-feature

# 9. Open Pull Request on GitHub

Commit Message Convention:

feat: New feature
fix: Bug fix
docs: Documentation
style: Code style
refactor: Code refactoring
test: Tests
chore: Maintenance

Development Setup

Requirements:

Node.js 16+
VS Code 1.85.0+
Git

Setup:

# Clone
git clone https://github.com/Patel-Krish-00/vite-spark-vscode.git
cd vite-spark-vscode

# Install
npm install

# Open in VS Code
code .

# Run (Press F5)
# This opens Extension Development Host

# Package
npm run package
# Creates: vite-spark-extension-1.0.0.vsix

# Install locally for testing
code --install-extension vite-spark-extension-1.0.0.vsix

Project Structure:

vite-spark-vscode/
├── extension.js          # Main extension logic
├── webview/
│   ├── index.html       # Main UI
│   └── settings.html    # Settings UI
├── media/
│   ├── styles.css       # Main styles
│   ├── settings.css     # Settings styles
│   └── icon.png         # Extension icon
├── package.json         # Extension manifest
├── README.md           # This file
└── .vscodeignore       # Package exclusions

Vite Spark Ecosystem

🔗 Vite Spark CLI - npm package
🔗 CLI Repository - Source code
🔗 Extension Repository - Extension source
🔗 Documentation - Full docs

Resources

📄 License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

💡 Support

Documentation

📖 README - This file
📖 Wiki - Detailed guides
📖 FAQ - Common questions
📖 Troubleshooting - Solutions

Community

💬 GitHub Discussions - Ask questions
🐛 Report Bug - File issues
💡 Request Feature - Suggest ideas

Contact

📧 Email: patelkrish7433@gmail.com
💼 LinkedIn: Krish Patel

⭐ Show Your Support

If this extension helps you, please:

⭐ Star the repository
📝 Rate on VS Code Marketplace
🐦 Share on social media
💬 Tell your friends and team
🤝 Contribute to the project

🙏 Acknowledgments

Built with love using:

Special thanks to:

The VS Code team for amazing extension APIs
The Vite team for blazing-fast build tool
The React team for incredible framework
The open-source community for inspiration
All contributors and users! 💙

Made with ⚡ and 💙 by Krish Patel

Happy Coding! 🚀

📊 Stats & Badges

VS Code Installs License GitHub Issues GitHub Pull Requests

Keywords: vite, react, typescript, generator, boilerplate, nodejs, express, mongodb, fullstack, backend, frontend, scaffold, template, project-generator, vscode-extension, developer-tools

Vite Spark

krish

⚡ Vite Spark - VS Code Extension

✨ Features

🚀 Quick Start

1. Install the Extension

2. Create Your First Project

3. Configure Settings (Optional)

📋 What You Can Create

🎨 Frontend Projects

🔧 Backend Projects

🌐 Full-Stack Projects

🎯 Interface Overview

Main Project Creator

1. Project Information

2. Project Type Selection (Beautiful Cards)

3. Frontend Configuration (if applicable)

4. Backend Configuration (if applicable)

5. Full-Stack Options (if applicable)

6. Features

Settings Page

⌨️ Keyboard Shortcuts

🎨 Available Commands

⚙️ Settings Reference

Project Defaults

Features

Behavior

UI Customization

Advanced

🛠️ Requirements

VS Code

System Requirements

Vite Spark CLI

📦 What Gets Created

Frontend Only Structure

Backend Only Structure

Full-Stack Structure (Monorepo)

🔐 Authentication Features (Auth Template)

Frontend Features

Backend Features

Security Features

🎓 Usage Examples

Example 1: Create a SaaS Application

Example 2: Quick Frontend Prototype

Example 3: Backend API

🐛 Troubleshooting

Extension Not Appearing

"Vite Spark CLI not found" Warning

Project Creation Fails

MongoDB Connection Error (Backend)

CORS Errors (Full-Stack)

Extension Slow or Unresponsive

Port Already in Use

Git Initialization Fails

🔄 Updates & Changelog

Version 1.0.0 (Current Release)

Coming Soon

🤝 Contributing

Report Issues

Suggest Features

Submit Pull Requests

Development Setup

📚 Related Links

Vite Spark Ecosystem

Resources

📄 License

💡 Support

Documentation

Community

Contact

⭐ Show Your Support

🙏 Acknowledgments

📊 Stats & Badges