Activation des téléchargements d'applications dans Bolt.new local

Dans cet article, je modifierai bolt.new pour permettre aux applications créées dans l'outil d'être téléchargées localement. Cette fonctionnalité facilitera le déploiement interne des applications bolt.new, ce qui la rendra particulièrement utile pour les environnements d'entreprise.

Objectif

• Ajoutez une fonctionnalité pour télécharger les fichiers du projet sous forme d'archive ZIP.

Étapes à suivre

1. Intégrer un bouton de téléchargement dans l'interface
   • Ajoutez un bouton de téléchargement dans la barre latérale ou la barre d'outils.
2. Générer une archive ZIP du projet
   • Utilisez une bibliothèque comme JSZip pour regrouper les fichiers de projet dans une archive ZIP.
3. Téléchargez l'archive ZIP
   • Déclenchez la fonctionnalité de téléchargement du navigateur avec le fichier ZIP généré.
4. Tester la fonctionnalité
   • Assurez-vous que le ZIP téléchargé contient les fichiers et la structure de répertoires attendus.

Dans le prochain article, nous expliquerons comment modifier bolt.new pour l'intégrer à Azure OpenAI Service, rationalisant ainsi l'application pour les cas d'utilisation au niveau de l'entreprise. Veuillez le vérifier.

Ajout d'un bouton de téléchargement

Pour activer la fonctionnalité de téléchargement des fichiers de projet au format ZIP, nous modifions le fichier bolt.new/app/components/workbench/EditorPanel.tsx. Les modifications sont marquées entre // Append start et // Append end pour plus de clarté.

...  
// Append start  
import JSZip from 'jszip';  
// Append end  
...  

export const EditorPanel = memo(  
  ({  
    files,  
    unsavedFiles,  
    editorDocument,  
    selectedFile,  
    isStreaming,  
    onFileSelect,  
    onEditorChange,  
    onEditorScroll,  
    onFileSave,  
    onFileReset,  
  }: EditorPanelProps) => {  

    ...  

    // Append start  
    const handleDownloadZip = useCallback(async () => {  
      const zip = new JSZip();  
      const files = workbenchStore.files.get();  

      // Check if there are files to download  
      if (Object.keys(files).length === 0) {  
        toast.error('No files to download');  
        return;  
      }  

      try {  
        // Add files to the ZIP, maintaining relative paths from WORK_DIR  
        Object.entries(files).forEach(([path, content]) => {  
          if (content && content.content) {  
            const relativePath = path.startsWith(WORK_DIR)   
              ? path.slice(WORK_DIR.length + 1)   
              : path;  
            zip.file(relativePath, content.content);  
          }  
        });  

        const zipBlob = await zip.generateAsync({ type: 'blob' });  
        const downloadLink = document.createElement('a');  
        downloadLink.href = URL.createObjectURL(zipBlob);  

        // Use the project name from `package.json` if available  
        const projectName = files[`${WORK_DIR}/package.json`]?.content  
          ? JSON.parse(files[`${WORK_DIR}/package.json`].content).name  
          : 'project';  
        downloadLink.download = `${projectName}.zip`;  

        downloadLink.click();  
        URL.revokeObjectURL(downloadLink.href);  
        toast.success('Files downloaded successfully');  
      } catch (error) {  
        toast.error('Failed to create zip file');  
        console.error(error);  
      }  
    }, []);  
    // Append end  

    return (  
      <PanelGroup direction="vertical">  
        <Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>  
          <PanelGroup direction="horizontal">  
            <Panel defaultSize={20} minSize={10} collapsible>  
              <div className="flex flex-col border-r border-bolt-elements-borderColor h-full">  
                <PanelHeader>  
                  <div className="i-ph:tree-structure-duotone shrink-0" />  
                  Files  
                  {/* Append start */}  
                  <div className="flex-1" />  
                  <button  
                    className="px-2 py-1 rounded-md text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive enabled:hover:bg-bolt-elements-item-backgroundActive"  
                    onClick={handleDownloadZip}  
                    title="Download as ZIP"  
                  >  
                    <div className="i-ph:download-simple text-xl" />  
                  </button>  
                  {/* Append end */}  
                </PanelHeader>  
    ...  

Explication des changements

1. Ajout de l'importation JSZip :
   
   Cette bibliothèque est utilisée pour générer l'archive ZIP.

2. Fonction handleDownloadZip :

   • Récupère les fichiers du workbenchStore.
   • Crée un fichier ZIP avec des chemins relatifs à partir de WORK_DIR.
   • Nomme automatiquement le fichier ZIP en utilisant le nom du projet de package.json, si disponible.

3. Bouton de téléchargement dans l'interface :

   • Un bouton est ajouté à l'en-tête du panneau Fichiers pour déclencher le processus de téléchargement ZIP.
   • Stylisé et comprend une info-bulle pour plus de clarté pour l'utilisateur.

Avec ce changement, les utilisateurs peuvent télécharger les fichiers du projet sous forme d'archive ZIP directement depuis l'interface.

Mise à jour du package.json

Pour utiliser la bibliothèque JSZip pour générer des archives ZIP, ajoutez-la aux dépendances dans package.json.

{  
  ...  
  "dependencies": {  
    "@ai-sdk/anthropic": "^0.0.39",  
    // Append start  
    "jszip": "^3.10.1",  
    // Append end  
  },  
  ...  
}  

Étapes pour appliquer la mise à jour

1. Ouvrez le fichier package.json.
2. Ajoutez "jszip": "^3.10.1" sous la section "dépendances" comme indiqué ci-dessus.
3. Exécutez la commande suivante pour installer la bibliothèque :

pnpm install  

Cela garantit que la bibliothèque requise est disponible dans votre projet pour la fonctionnalité de génération ZIP.

Test de la fonctionnalité de téléchargement

Après avoir terminé les modifications, suivez ces étapes pour vérifier la nouvelle fonctionnalité :

Démarrez l'application

Exécutez les commandes suivantes pour créer et démarrer bolt.new :

...  
// Append start  
import JSZip from 'jszip';  
// Append end  
...  

export const EditorPanel = memo(  
  ({  
    files,  
    unsavedFiles,  
    editorDocument,  
    selectedFile,  
    isStreaming,  
    onFileSelect,  
    onEditorChange,  
    onEditorScroll,  
    onFileSave,  
    onFileReset,  
  }: EditorPanelProps) => {  

    ...  

    // Append start  
    const handleDownloadZip = useCallback(async () => {  
      const zip = new JSZip();  
      const files = workbenchStore.files.get();  

      // Check if there are files to download  
      if (Object.keys(files).length === 0) {  
        toast.error('No files to download');  
        return;  
      }  

      try {  
        // Add files to the ZIP, maintaining relative paths from WORK_DIR  
        Object.entries(files).forEach(([path, content]) => {  
          if (content && content.content) {  
            const relativePath = path.startsWith(WORK_DIR)   
              ? path.slice(WORK_DIR.length + 1)   
              : path;  
            zip.file(relativePath, content.content);  
          }  
        });  

        const zipBlob = await zip.generateAsync({ type: 'blob' });  
        const downloadLink = document.createElement('a');  
        downloadLink.href = URL.createObjectURL(zipBlob);  

        // Use the project name from `package.json` if available  
        const projectName = files[`${WORK_DIR}/package.json`]?.content  
          ? JSON.parse(files[`${WORK_DIR}/package.json`].content).name  
          : 'project';  
        downloadLink.download = `${projectName}.zip`;  

        downloadLink.click();  
        URL.revokeObjectURL(downloadLink.href);  
        toast.success('Files downloaded successfully');  
      } catch (error) {  
        toast.error('Failed to create zip file');  
        console.error(error);  
      }  
    }, []);  
    // Append end  

    return (  
      <PanelGroup direction="vertical">  
        <Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>  
          <PanelGroup direction="horizontal">  
            <Panel defaultSize={20} minSize={10} collapsible>  
              <div className="flex flex-col border-r border-bolt-elements-borderColor h-full">  
                <PanelHeader>  
                  <div className="i-ph:tree-structure-duotone shrink-0" />  
                  Files  
                  {/* Append start */}  
                  <div className="flex-1" />  
                  <button  
                    className="px-2 py-1 rounded-md text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive enabled:hover:bg-bolt-elements-item-backgroundActive"  
                    onClick={handleDownloadZip}  
                    title="Download as ZIP"  
                  >  
                    <div className="i-ph:download-simple text-xl" />  
                  </button>  
                  {/* Append end */}  
                </PanelHeader>  
    ...  

1. Ouvrez l'application dans un navigateur et accédez à l'onglet "Code" de l'interface de l'application.

2. Confirmez qu'un bouton de téléchargement est visible dans la section "Fichiers", comme indiqué ci-dessous :

1. Téléchargez les fichiers du projet : cliquez sur le bouton de téléchargement et téléchargez le fichier ZIP.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!