Build/Package your Electron app and use it Locally.

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

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\""

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

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

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 512×512 image to work as icon or your icon will not show up. Get 256×256 and 1024×1024 images as well.

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

function createWindow() {

  const win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,


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

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"

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

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:

My Other Articles:

Create your Web Presence with Namecheap

1 thought on “Build/Package your Electron app and use it Locally.”

Leave a Comment

Your email address will not be published. Required fields are marked *