Skip to content

feat: add ZIP archive import button#2154

Open
FrostyPhoenix2 wants to merge 2 commits intostackblitz-labs:mainfrom
FrostyPhoenix2:feat/zip-import
Open

feat: add ZIP archive import button#2154
FrostyPhoenix2 wants to merge 2 commits intostackblitz-labs:mainfrom
FrostyPhoenix2:feat/zip-import

Conversation

@FrostyPhoenix2
Copy link
Copy Markdown

Summary

  • Adds an Import ZIP button to the home screen alongside Import Chat and Import Folder
  • Uses JSZip (already a project dependency) to read the archive and injects files as a boltArtifact chat message — the same mechanism used by Import Folder
  • After import, the chat textarea is pre-filled with the install prompt so the user hits Enter once to boot the project

How it works

  1. User clicks Import ZIP and selects a .zip file
  2. Files are read client-side via JSZip and injected as a bolt message
  3. The AI writes files into the WebContainer exactly as it does for freshly built projects
  4. If a package.json is detected, the textarea is pre-filled with "Install the dependencies and start the development server."

ZIP format compatibility

  • Flat ZIPs (files at root) ✅
  • macOS Compress (wraps in one top-level folder) ✅ — prefix stripped automatically
  • GitHub Download ZIP (wraps in repo-main/) ✅ — prefix stripped automatically
  • node_modules/, .git/, dist/, build folders — skipped automatically

Files changed

  • app/utils/zipImport.ts (new) — ZIP parsing, prefix stripping, boltArtifact assembly
  • app/components/chat/ImportZipButton.tsx (new) — React button component
  • app/components/chat/chatExportAndImport/ImportButtons.tsx — adds button to home screen
  • app/components/chat/Chat.client.tsx — pre-fills textarea after import navigation

- Add hasExpoConfig detection in zipImport.ts (checks app.json, app.config.js,
  and expo key in package.json dependencies)
- Strip runnable scripts from package.json for Expo imports so bolt cannot
  attempt to boot a native project in WebContainer
- Show code review prompt for Expo imports instead of install+start command
@FrostyPhoenix2
Copy link
Copy Markdown
Author

Update: Expo/React Native support

Detects Expo projects at import time (checks for app.json, app.config.js, or expo in package.json dependencies)
Strips runnable scripts from package.json so WebContainer doesn't attempt to boot a native project
Shows a code review prompt instead of "install and start dev server" for Expo imports — since WebContainer can't run native mobile code, bolt now summarizes the project instead of hanging indefinitely

Web project behavior is unchanged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants