로컬 bolt.new에서 애플리케이션 다운로드 활성화

이 기사에서는 도구에서 생성된 애플리케이션을 로컬로 다운로드할 수 있도록 bolt.new를 수정하겠습니다. 이 기능은 bolt.new 애플리케이션의 내부 배포를 용이하게 하여 기업 환경에 특히 유용합니다.

목적

• 프로젝트 파일을 ZIP 아카이브로 다운로드하는 기능을 추가합니다.

구현 단계

1. 인터페이스에 다운로드 버튼 통합
   • 사이드바 또는 툴바에 다운로드 버튼을 추가하세요.
2. 프로젝트의 ZIP 아카이브 생성
   • JSZip과 같은 라이브러리를 사용하여 프로젝트 파일을 ZIP 아카이브로 묶습니다.
3. ZIP 아카이브 다운로드
   • 생성된 ZIP 파일로 브라우저의 다운로드 기능을 실행하세요.
4. 기능 테스트
   • 다운로드한 ZIP에 예상 파일과 디렉터리 구조가 포함되어 있는지 확인하세요.

다음 기사에서는 bolt.new를 수정하여 Azure OpenAI 서비스와 통합하여 엔터프라이즈 수준 사용 사례에 맞게 애플리케이션을 간소화하는 방법을 다룹니다. 확인해주세요.

다운로드 버튼 추가

프로젝트 파일을 ZIP으로 다운로드하는 기능을 활성화하기 위해 bolt.new/app/comComponents/workbench/EditorPanel.tsx 파일을 수정합니다. 명확성을 위해 변경 사항은 // 시작 추가와 // 끝 추가 사이에 표시됩니다.

...  
// 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!