ローカルのbolt.newでアプリケーションのダウンロードを有効にする

この記事では、bolt.new を変更して、ツールで作成されたアプリケーションをローカルにダウンロードできるようにします。この機能により、bolt.new アプリケーションの社内展開が容易になり、企業環境で特に役立ちます。

客観的

• プロジェクト ファイルを ZIP アーカイブとしてダウンロードする機能を追加します。

実装手順

1. インターフェースにダウンロード ボタンを統合します
   • サイドバーまたはツールバーにダウンロード ボタンを追加します。
2. プロジェクトの ZIP アーカイブを生成します
   • JSZip などのライブラリを使用して、プロジェクト ファイルを ZIP アーカイブにバンドルします。
3. ZIP アーカイブをダウンロードします
   • 生成された ZIP ファイルを使用してブラウザのダウンロード機能をトリガーします。
4. 機能をテストする
   • ダウンロードした ZIP に予期したファイルとディレクトリ構造が含まれていることを確認してください。

次の記事では、bolt.new を変更して Azure OpenAI Service と統合し、エンタープライズ レベルのユースケースに合わせてアプリケーションを合理化する方法について説明します。ぜひチェックしてみてください。

ダウンロードボタンの追加

プロジェクト ファイルを ZIP 形式でダウンロードする機能を有効にするには、bolt.new/app/components/workbench/EditorPanel.tsx ファイルを変更します。わかりやすくするために、変更は // Append start と // Append end の間にマークされています。

...  
// 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. JSZip インポートを追加しました:
   
   このライブラリは、ZIP アーカイブを生成するために使用されます。

2. HandleDownloadZip 関数:

   • workbenchStore からファイルを取得します。
   • WORK_DIR からの相対パスで ZIP ファイルを作成します。
   • 利用可能な場合は、package.json のプロジェクト名を使用して ZIP ファイルに自動的に名前を付けます。

3. インターフェースのダウンロード ボタン:

   • ZIP ダウンロード プロセスをトリガーするボタンがファイル パネルのヘッ​​ダーに追加されます。
   • ユーザーがわかりやすくするためにスタイルが設定され、ツールチップが含まれています。

この変更により、ユーザーはインターフェイスからプロジェクト ファイルを ZIP アーカイブとして直接ダウンロードできるようになります。

package.jsonの更新

ZIP アーカイブの生成に JSZip ライブラリを使用するには、package.json の依存関係に追加します。

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

アップデートを適用する手順

1. package.json ファイルを開きます。
2. 上記のように、「依存関係」セクションに「jszip」: 「^3.10.1」を追加します。
3. 次のコマンドを実行してライブラリをインストールします。

pnpm install  

これにより、ZIP 生成機能に必要なライブラリがプロジェクトで利用できるようになります。

ダウンロード機能のテスト

変更が完了したら、次の手順に従って新しい機能を確認します。

アプリケーションを開始する

次のコマンドを実行して、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. ブラウザでアプリケーションを開き、アプリケーション インターフェイスの [コード] タブに移動します。

2. 以下に示すように、[ファイル] セクションにダウンロード ボタンが表示されていることを確認します:

1. プロジェクト ファイルをダウンロード: ダウンロード ボタンをクリックして ZIP ファイルをダウンロードします。

以上がローカルのbolt.newでアプリケーションのダウンロードを有効にするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。