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 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,
},
})}
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: coding-magnified.tech
Top comments (1)
Can I create an installer using the electron-packager?