DEV Community

loading...
Cover image for Build/Package your Electron app and use it Locally.

Build/Package your Electron app and use it Locally.

gautham495 profile image Gautham Vijayan ・3 min read

Are you struggling to build your electron app and use it locally?I will solve that issue in this article.

For this purpose you can use either one of them.

  • electron-builder.
  • electron-packager.

But in this post I am going to use electron-packager.

After completing the coding part of your electron app with HTML,CSS and JavaScript(even React.js), npm install electron-packager as dev dependency.


npm install --save-dev electron-packager

Enter fullscreen mode Exit fullscreen mode

Remember always install electron packages as dev dependencies.

Now go to package.json and do the following,

  • In scripts add the following code.
"scripts": {
    "start": "electron .",
    "package-win": "electron-packager . markdownelectron  --icon=icon/language_markdown_outline_icon_139425.ico --overwrite --asar --platform=win32 --arch=ia32  --prune=true --out=buildsep --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"MarkDown\""
  },

Enter fullscreen mode Exit fullscreen mode

This one is for windows because I use a windows machine.

For Mac users:


electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds

Enter fullscreen mode Exit fullscreen mode

For Linux users:

electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds
Enter fullscreen mode Exit fullscreen mode

The explanation of above code:

  • We are packaging everything with electron-packager .
  • Then We are giving your electron app a name. Mine is markdownelectron.
  • Very important stuff here is the image. I got errors several times and I banged my head on the desk until I found out the answer.
    • You have to get a 512x512 image to work as icon or your icon will not show up. Get 256x256 and 1024x1024 images as well.

In your index.js add the below code for image to show up.

function createWindow() {

  const win = new BrowserWindow({
    show:false,
    icon:'./icon/language_markdown_outline_icon_139425.ico',
    webPreferences: {
      nodeIntegration: true,
    },

  })}
Enter fullscreen mode Exit fullscreen mode

Make sure the icon folder is in the main folder directory with the image inside.

  • Override option overrides the existing folder if you have created a build before.

  • Prune removes unnecessary packages which are not required in production.

  • Out means the folder name in which our built electron app will reside.

The rest are platform specific code which you can simply copy and paste in your code from above.

Now in terminal do the following steps.


npm run package-win

Enter fullscreen mode Exit fullscreen mode

The above is for windows users.

You can also do like below, if you want to build for all of them.


"scripts": {
 "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
"package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"",    
"package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"
 }

Enter fullscreen mode Exit fullscreen mode

Here You can create a build command for each one of the platforms easily by changing the code slightly.

Now in terminal you can paste the below code one by one and build your electron app for your all of the Operating Systems.


npm run package-mac
npm run package-win
npm run package-linux

Enter fullscreen mode Exit fullscreen mode

And that's how you build an electron app and use it locally.

My Personal Experience:

When I built my first electron app I used this website called Christianevangel and it was extremely easy for me to build my own electron app.

I referred to this post by him Package electron app to make this one.

I wrote this in my own style but he was the one who helped me make this post.

Thank you for reading!!

Check out my portfolio: Gautham's portfolio

Check out my blog: coding-magnified.tech

My Other Articles:

Discussion (1)

pic
Editor guide
Collapse
ndohjapan profile image
Joel Ndoh

Can I create an installer using the electron-packager?