1"use strict";(self.webpackChunkelectronjs=self.webpackChunkelectronjs||[]).push([["28426"],{32082(e,n,i){i.r(n),i.d(n,{metadata:()=>t,default:()=>p,frontMatter:()=>a,contentTitle:()=>l,toc:()=>c,assets:()=>s});var t=JSON.parse('{"id":"latest/tutorial/application-distribution","title":"Application Packaging","description":"To distribute your app with Electron, you need to package and rebrand it. To do this, you can either use specialized tooling or manual approaches.","source":"@site/docs/latest/tutorial/application-distribution.md","sourceDirName":"latest/tutorial","slug":"/latest/tutorial/application-distribution","permalink":"/docs/latest/tutorial/application-distribution","draft":false,"unlisted":false,"editUrl":"https://github.com/electron/electron/edit/main/docs/tutorial/application-distribution.md","tags":[],"version":"current","frontMatter":{"title":"Application Packaging","description":"To distribute your app with Electron, you need to package and rebrand it. To do this, you can either use specialized tooling or manual approaches.","slug":"application-distribution","hide_title":false},"sidebar":"docs","previous":{"title":"Distribution Overview","permalink":"/docs/latest/tutorial/distribution-overview"},"next":{"title":"Code Signing","permalink":"/docs/latest/tutorial/code-signing"}}'),r=i(74848),o=i(28453);
1let a={title:"Application Packaging",description:"To distribute your app with Electron, you need to package and rebrand it. To do this, you can either use specialized tooling or manual approaches.",slug:"application-distribution",hide_title:!1},l,s={},c=[{value:"With tooling",id:"with-tooling",level:2},{value:"Manual packaging",id:"manual-packaging",level:2},{value:"With prebuilt binaries",id:"with-prebuilt-binaries",level:3},{value:"With an app source code archive (asar)",id:"with-an-app-source-code-archive-asar",level:3},{value:"Rebranding with downloaded binaries",id:"rebranding-with-downloaded-binaries",level:3}];function d(e){let n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.p,{children:"To distribute your app with Electron, you need to package and rebrand it. To do this, you\ncan either use specialized tooling or manual approaches."}),"\n",(0,r.jsx)(n.h2,{id:"with-tooling",children:"With tooling"}),"\n",(0,r.jsxs)(n.p,{children:["There are a couple tools out there that exist to package and distribute your Electron app.\nWe recommend using ",(0,r.jsx)(n.a,{href:"/docs/latest/tutorial/forge-overview",children:"Electron Forge"}),". You can check out\nits ",(0,r.jsx)(n.a,{href:"https://www.electronforge.io",children:"documentation"})," directly, or refer to the ",(0,r.jsx)(n.a,{href:"/docs/latest/tutorial/tutorial-packaging",children:"Packaging and Distribution"}),"\npart of the Electron tutorial."]}),"\n",(0,r.jsx)(n.h2,{id:"manual-packaging",children:"Manual packaging"}),"\n",(0,r.jsx)(n.p,{children:"If you prefer the manual approach, there are 2 ways to distribute your application:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"With prebuilt binaries"}),"\n",(0,r.jsx)(n.li,{children:"With an app source code archive"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"with-prebuilt-binaries",children:"With prebuilt binaries"}),"\n",(0,r.jsxs)(n.p,{children:["To distribute your app manually, you need to download Electron's\n",(0,r.jsx)(n.a,{href:"https://github.com/electron/electron/releases",children:"prebuilt binaries"}),". Next, the folder\ncontaining your app should be named ",(0,r.jsx)(n.code,{children:"app"})," and placed in Electron's resources\ndirectory as shown in the following examples."]}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.p,{children:["The location of Electron's prebuilt binaries is indicated\nwith ",(0,r.jsx)(n.code,{children:"electron/"})," in the examples below."]})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-plain",metastring:"title='macOS'",children:"electron/Electron.app/Contents/Resources/app/\n\u251C\u2500\u2500 package.json\n\u251C\u2500\u2500 main.js\n\u2514\u2500\u2500 index.html\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-plain",metastring:"title='Windows and Linux'",children:"electron/resources/app\n\u251C\u2500\u2500 package.json\n\u251C\u2500\u2500 main.js\n\u2514\u2500\u2500 index.html\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Then execute ",(0,r.jsx)(n.code,{children:"Electron.app"})," on macOS, ",(0,r.jsx)(n.code,{children:"electron"})," on Linux, or ",(0,r.jsx)(n.code,{children:"electron.exe"}),"\non Windows, and Electron will start as your app. The ",(0,r.jsx)(n.code,{children:"electron"})," directory\nwill then be your distribution to deliver to users."]}),"\n",(0,r.jsx)(n.h3,{id:"with-an-app-source-code-archive-asar",children:"With an app source code archive (asar)"}),"\n",(0,r.jsxs)(n.p,{children:["Instead of shipping your app by copying all of its source files, you can\npackage your app into an ",(0,r.jsx)(n.a,{href:"https://github.com/electron/asar",children:"asar"})," archive to improve the performance of reading\nfiles on platforms like Windows, if you are not already using a bundler such\nas Parcel or Webpack."]}),"\n",(0,r.jsxs)(n.p,{children:["To use an ",(0,r.jsx)(n.code,{children:"asar"})," archive to replace the ",(0,r.jsx)(n.code,{children:"app"})," folder, you need to rename the\narchive to ",(0,r.jsx)(n.code,{children:"app.asar"}),", and put it under Electron's resources directory like\nbelow, and Electron will then try to read the archive and start from it."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-plain",metastring:"title='macOS'",children:"electron/Electron.app/Contents/Resources/\n\u2514\u2500\u2500 app.asar\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-plain",metastring:"title='Windows'",children:"electron/resources/\n\u2514\u2500\u2500 app.asar\n"})}),"\n",(0,r.jsxs)(n.p,{children:["You can find more details on how to use ",(0,r.jsx)(n.code,{children:"asar"})," in the\n",(0,r.jsxs)(n.a,{href:"https://github.com/electron/asar",children:[(0,r.jsx)(n.code,{children:"electron/asar"})," repository"]}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"rebranding-with-downloaded-binaries",children:"Rebranding with downloaded binaries"}),"\n",(0,r.jsx)(n.p,{children:"After bundling your app into Electron, you will want to rebrand Electron\nbefore distributing it to users."}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Windows:"})," You can rename ",(0,r.jsx)(n.code,{children:"electron.exe"}
1)," to any name you like, and edit\nits icon and other information with tools like ",(0,r.jsx)(n.a,{href:"https://github.com/electron/rcedit",children:"rcedit"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Linux:"})," You can rename the ",(0,r.jsx)(n.code,{children:"electron"})," executable to any name you like."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"macOS:"})," You can rename ",(0,r.jsx)(n.code,{children:"Electron.app"})," to any name you want, and you also have to rename\nthe ",(0,r.jsx)(n.code,{children:"CFBundleDisplayName"}),", ",(0,r.jsx)(n.code,{children:"CFBundleIdentifier"})," and ",(0,r.jsx)(n.code,{children:"CFBundleName"})," fields in the\nfollowing files:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:"Electron.app/Contents/Info.plist"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:"Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist"})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["You can also rename the helper app to avoid showing ",(0,r.jsx)(n.code,{children:"Electron Helper"})," in the\nActivity Monitor, but make sure you have renamed the helper app's executable\nfile's name."]}),"\n",(0,r.jsx)(n.p,{children:"The structure of a renamed app would be like:"}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-plain",children:"MyApp.app/Contents\n\u251C\u2500\u2500 Info.plist\n\u251C\u2500\u2500 MacOS/\n\u2502 \u2514\u2500\u2500 MyApp\n\u2514\u2500\u2500 Frameworks/\n \u2514\u2500\u2500 MyApp Helper.app\n \u251C\u2500\u2500 Info.plist\n \u2514\u2500\u2500 MacOS/\n \u2514\u2500\u2500 MyApp Helper\n"})}),"\n",(0,r.jsxs)(n.admonition,{type:"note",children:[(0,r.jsxs)(n.p,{children:["it is also possible to rebrand Electron by changing the product name and\nbuilding it from source. To do this you need to set the build argument\ncorresponding to the product name (",(0,r.jsx)(n.code,{children:'electron_product_name = "YourProductName"'}),")\nin the ",(0,r.jsx)(n.code,{children:"args.gn"})," file and rebuild."]}),(0,r.jsx)(n.p,{children:"Keep in mind this is not recommended as setting up the environment to compile\nfrom source is not trivial and takes significant time."})]})]})}function p(e={}){let{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},28453(e,n,i){i.d(n,{R:()=>a,x:()=>l});var t=i(96540);let r={},o=t.createContext(r);function a(e){let n=t.useContext(o);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.