DeployFlow

Deploy your code. Directly from VS Code.

Instant, one-click deployments to Netlify directly from your editor.
Automatic framework detection, local build engine, live logs, environment variables manager, and interactive history.

---

🌟 Why DeployFlow?

Gone are the days of switching back and forth between terminal commands, Git pushes, and web dashboards just to publish your code. DeployFlow brings seamless cloud deployments directly into your VS Code sidebar.

Open Project in VS Code  ──►  Select Target Site  ──►  Click [ 🚀 Deploy Project ]  ──►  Site is Live!

---

✨ Key Features

⚡ 1-Click Instant Deployments

Deploy any static web application, Single Page App (SPA), or frontend project directly to Netlify's high-speed global CDN with a single click.

🧠 Smart Universal Framework Detection

Zero manual configuration needed. DeployFlow automatically detects your project stack and sets up the correct build commands and output directories:

• React & Vite (npm run build ➔ dist)
• Next.js (npm run build ➔ out)
• Vue.js & Nuxt.js (npm run build ➔ dist / .output/public)
• Astro (npm run build ➔ dist)
• Svelte & SvelteKit (npm run build ➔ build)
• Angular (npm run build ➔ dist)
• Remix, SolidJS, Qwik, Gatsby, Docusaurus, Hugo, Jekyll
• Static HTML/CSS/JS and Python/Flask/Django web assets with zero-config routing.

🔒 Enterprise-Grade Zero-Leak Security

• Native SecretStorage: Your Netlify Personal Access Token is encrypted securely using VS Code's native keyring.
• Smart Exclusions: Strictly blocks .env, .env.*, .git, node_modules, id_rsa, .pem, .key, and secret keys from ever being uploaded.

🔄 Production vs Preview (Draft) Deployments

Easily switch between:

• ● Production: Direct deployment to your live custom domain / main site.
• ○ Preview (Draft): Creates an isolated preview deployment on Netlify with its own unique URL to test before going live.

🔐 Netlify Environment Variables Manager

Manage your Netlify site's environment variables without opening a browser:

• Fetch, create, update, and delete environment variables directly in the sidebar.
• Secret values are masked (••••••••••••) by default with a quick reveal toggle (👁️ / 🙈).

📜 Interactive Deployment History & Details

• Browse past deployments with live status badges (✓ Published, ✕ Failed), timestamps, and duration.
• Click any deployment to view a comprehensive details modal with file counts, live URL, logs, and a 1-click Redeploy button.

📊 Real-Time Delta Upload Engine & Streaming Logs

• SHA-1 Delta Hashing: Only uploads changed files, making redeployments lightning fast.
• Live Output Stream: Watch local build progress and CDN publication status in real time.

---

🚀 Quick Start (3 Steps)

Step 1: Install DeployFlow

Search for DeployFlow in the VS Code Extensions tab (Ctrl+Shift+X or Cmd+Shift+X) and click Install.

Step 2: Connect Netlify

1. Click the DeployFlow Rocket Icon (🚀) in the VS Code Activity Bar on the left.
2. Click 🔑 Connect Netlify.
3. Generate a Personal Access Token from Netlify Applications and paste it into the prompt.

Step 3: Deploy!

1. Select your target Netlify site from the dropdown (or click + to create a new site instantly).
2. Click 🚀 Deploy Project.
3. Your live URL is generated in seconds!

---

🛠️ Command Palette Shortcuts

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type DeployFlow:

Command	Identifier	Description
DeployFlow: Deploy Project	deployflow.deploy	Builds and deploys the active workspace project.
DeployFlow: Open Deploy Panel	deployflow.openPanel	Focuses the DeployFlow sidebar panel.
DeployFlow: Connect Netlify	deployflow.connectNetlify	Connects your Netlify account via secure token.
DeployFlow: Disconnect Netlify	deployflow.disconnectNetlify	Clears stored credentials from VS Code SecretStorage.
DeployFlow: Redeploy	deployflow.redeploy	Triggers a redeployment of the current workspace.
DeployFlow: Configure Project	deployflow.configure	Interactive wizard to configure build & output paths.
DeployFlow: Reset Project Configuration	deployflow.resetConfig	Resets .deployflow.json to clean defaults.
DeployFlow: View Deployment Logs	deployflow.showLogs	Opens the dedicated DeployFlow output channel.

---

⚙️ Configuration & Project Settings

DeployFlow saves non-sensitive workspace configuration in .deployflow.json at the root of your project:

{
  "provider": "netlify",
  "framework": "React (Vite)",
  "packageManager": "npm",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "environment": "production",
  "siteId": "your-netlify-site-id",
  "siteName": "my-awesome-app",
  "siteUrl": "https://my-awesome-app.netlify.app"
}

Note: Secrets, tokens, and sensitive keys are NEVER stored in .deployflow.json.

---

🧩 Architecture

┌─────────────────────────────────────────────────────────┐
│                    VS Code Workspace                    │
└────────────────────────────┬────────────────────────────┘
                             │
                  [ Project & Framework Detector ]
                             │
                  [ Local Build Engine ]
                             │
                  [ FileCollector & Security Filter ]
                             │
                  [ SHA-1 Digest Hasher ]
                             │
                  [ Delta Upload Service (5x Concurrency) ]
                             │
┌────────────────────────────▼────────────────────────────┐
│                    Netlify Cloud CDN                    │
└─────────────────────────────────────────────────────────┘

---

💬 Community & Support

 

---

📜 License

Distributed under the MIT License. See LICENSE for details.

DeployFlow • Crafted with ❤️ by Gurpreet Singh Dev
_{© 2026 DeployFlow. All rights reserved.}