feat: simplified Netlify Deployment with Inline Connection #1929
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implements comprehensive project import functionality with the following capabilities: - **Drag & Drop Support**: Intuitive drag-and-drop interface for uploading project files - **Multiple Import Methods**: - Individual file selection - Directory/folder upload (maintains structure) - ZIP archive extraction with automatic unpacking - **Smart File Filtering**: Automatically excludes common build artifacts and dependencies (node_modules, .git, dist, build folders) - **Large Project Support**: Handles projects up to 200MB with per-file limit of 50MB - **Binary File Detection**: Properly handles binary files (images, fonts, etc.) with base64 encoding - **Progress Tracking**: Real-time progress indicators during file processing - **Beautiful UI**: Smooth animations with Framer Motion and responsive design - **Keyboard Shortcuts**: Quick access with Ctrl+Shift+I (Cmd+Shift+I on Mac) - **File Preview**: Shows file listing before import with file type icons - **Import Statistics**: Displays total files, size, and directory count The implementation uses JSZip for ZIP file extraction and integrates seamlessly with the existing workbench file system. Files are automatically added to the editor and the first file is opened for immediate editing. Technical highlights: - React hooks for state management - Async/await for file processing - WebKit directory API for folder uploads - DataTransfer API for drag-and-drop - Comprehensive error handling with user feedback via toast notifications This feature significantly improves the developer experience by allowing users to quickly import their existing projects into bolt.diy without manual file creation. 🤖 Generated with Claude Code Co-Authored-By: Claude <[email protected]>
This update dramatically improves the Netlify deployment experience by allowing users to connect their Netlify account directly from the deploy dialog without leaving their project. Key improvements: - **Unified Deploy Dialog**: New centralized deployment interface for all providers - **Inline Connection**: Connect to Netlify without leaving your project context - **Quick Connect Component**: Reusable connection flow with clear instructions - **Improved UX**: Step-by-step guide for obtaining Netlify API tokens - **Visual Feedback**: Provider status indicators and connection state - **Seamless Workflow**: One-click deployment once connected The new DeployDialog component provides: - Provider selection with feature highlights - Connection status for each provider - In-context account connection - Deployment confirmation and progress tracking - Error handling with user-friendly messages Technical highlights: - TypeScript implementation for type safety - Radix UI for accessible dialog components - Framer Motion for smooth animations - Toast notifications for user feedback - Secure token handling and validation This significantly reduces friction in the deployment process, making it easier for users to deploy their projects to Netlify and other platforms. 🤖 Generated with Claude Code Co-Authored-By: Claude <[email protected]>
- Add @iconify-json/simple-icons for brand icons - Replace external image URLs with UnoCSS icon classes - Use proper brand colors for Netlify and Cloudflare icons - Ensure icons display correctly without external dependencies This fixes the 'no image' error in the deployment dialog by using reliable icon fonts instead of external CDN images. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
embire2
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🚀 Simplified Netlify Deployment with Inline Connection
This PR dramatically improves the Netlify deployment experience by allowing users to connect their Netlify account directly from the deployment dialog, eliminating the need to navigate to Settings first.
🎯 Problem Solved
Previously, users had to:
Now they can connect and deploy in one seamless flow!
✨ Features
1. Unified Deployment Dialog (
DeployDialog.tsx)2. Inline Netlify Connection
3. Reusable Quick Connect Component (
NetlifyQuickConnect.tsx)4. Fixed Provider Icons
@iconify-json/simple-iconsfor brand icons📝 Implementation Details
New Components:
app/components/deploy/DeployDialog.tsx- Central deployment interfaceapp/components/@settings/tabs/connections/NetlifyQuickConnect.tsx- Reusable connection flowModified Components:
app/components/deploy/DeployButton.tsx- Updated to use dialog instead of dropdownapp/components/@settings/tabs/connections/NetlifyConnection.tsx- Integrated quick connectKey Features:
🖼️ User Experience
🔐 Security
🧪 Testing
🎨 Visual Improvements
Developer: Keoma Wright
Impact: Significantly reduces friction in the deployment process, making it more intuitive for new users while maintaining power-user efficiency.
This enhancement aligns with bolt.diy's mission to make web development more accessible and enjoyable for everyone! 🎉