CUSTOM Installer w/ Electron

Today I am going to show you how to make a custom installer for windows using electron-builder. This installer can have a license and allow the user to select the install directory. Furthermore, the user can uninstall the app now using a nsis uninstaller.
This tutorial covers how to create a installer and how to package the app with a valid icon.

[@frostingly3687]

Tyler making videos on everything an actual developer needs

[@tylerlaceby]

haha. I try. Still pretty garbage at it. Any other ideas for videos are much appreciated mate xD

[@frostingly3687]

@@tylerlaceby Creating small projects that use several technologies, like making a task manager with TypeScript + Electron + React + some backend database to store the tasks

[@Fiziys]

Some month ago I started to use Electron ('cause it's really funny to use) and I've seen a lot of tutorial. None of them are so CLEAR and EASY TO FOLLOW. Great job, I hope you will continue to make videos like this.

[@stuvius]

Great video, straight to the point!

[@focusiam2027]

Thank you so much Tyler, you're the best!

[@guilhermezago9815]

Hey bro, nice vid!! Just a suggestion for your next ones, make a gist or maybe just put the code you've written in the description. Its better for us!! Thank you!

[@isaacvr]

Genial. Excelente contenido, gracias.

[@colinw9908]

awesome video! idk why, but your voice sounds very nice

[@victorvidal7344]

Muchas gracias por la ayuda👌

[@languageswithenoch4417]

Thank you 🙏🏽

[@Soy_Cheru]

Thanks!

[@StephBsimon]

great stuff. Thank you! Any suggestion with regards to obfuscating or protecting the code as the asar file can be unpacked easily...?

[@tylerlaceby]

You could use minification and code obfuscation tools during the build step but I’m not aware of ways to totally prevent some source being read or reconstructed with enough time. To be fair I have not looked too much into it as for work and fun the tools don’t require such requirements

[@mrmarcuswatson]

Will you ever make a tutorial or just a quick 3 minute video showing how you would hook this up to a repository for automatic updates like you mentioned in the video?

[@mrmarcuswatson]

If your not planning to bro i will send u money to show me.

[@tylerlaceby]

I appreciate the offer however I can do it for free if you want to join my discord server. My discord username is @tlaceby. I would be more than happy walking you through some older code with auto updating using electron-updater.

[@MatheusSilva-qm3ph]

Very good Congratulations! But I came here looking for autoupdate do you have a video about it? thanks.

[@tylerlaceby]

I don’t have a video that covers auto update. Sorry. However this article helped me a few years back. medium.com/@johndyer24/creating-and-deploying-an-auto-updating-electron-app-for-mac-and-windows-using-electron-builder-6a3982c0cee6

[@ezrasenaputra8524]

hey this is a great videos, help me a lot with electron js. but what if i want the app to installed on Linux or Mac ? what do i use to make the custom installer? thanks

[@tylerlaceby]

There are similar options for other platforms. They get setup the same way. Just check the electron-builder docs and you should find them. I know Linux has a few good selections got installers.

[@ezrasenaputra8524]

@@tylerlaceby yes i already found it. thank you so much

[@raygan3]

Do you know how we can add some custom scripts during installation process? for example adding a windows registry key

[@tylerlaceby]

I don’t actually know the correct way for that however I typically handle installation and getting required files / assets on the startup of the app. Aka the first time the app starts I check if I need to do required things. That way I can do make a more customized installer page that looks like the app. Kinda like Visual Studios installer. It’s actually a electron app. But I know there are ways to run scripts

[@isaacmartinez3596]

I created an app that use FS to manage files, but when I move it to the program files folder it doesn't work (never open) without open as Admin. What I can do in that case to compile my app and install it in program files folder

[@tylerlaceby]

I don’t quiet remember the property you need to set but I would suggest reading the NSIS installer documentation. It will give you a list of properties that work for installers. Also some of these are on the electron-builder website.

[@MrMikSlayer]

Great video!! I have a question. Is it possibile to run a script after the installation is complete? I need to save the path of my application in a folder. I would like to run a script that write the application path in a folder but only after the installation is totally complete. I'm sorry for my english, it's probably bad :) but I'd like to have an answer please

[@tylerlaceby]

Your e goody is just fine 😀. If using NSIS you can use custom scripts written using NSIS. I would read the official NSIS documentation as it should give some more answers but the answer is yes. You can.

[@MrMikSlayer]

@@tylerlaceby Thank you!! Yes I'm using NSIS. I'll go to study the documentation!

[@zimehx]

I cant build it because apparently node-gpy cant find python and i have no clue how to fix it, i already tried reinstalling python with all optional stuff selected and looking up these errors but could not find anything helpful, could you help me?

[@zimehx]

i solved the issue i had to change some npm config

that electron application uses a lot o MB but it's just a test yet. I imagine how large it'll be when finished.

[@tylerlaceby]

It’s about the same size. Look at slack, discord, vscode etc for some real world examples of large scale electron projects in the wild.

[@abrahamjuniorsagoe9120]

Please can it be used to update desktop applications such as windows forms application

[@tylerlaceby]

This Installer is for setting up dependencies and running other scripts. However yea electron apps can easily be setup for auto update using electron-updater.

[@arijitchakrabarty1552]

I've done the same but I'm getting an error while executing the installer that "a javascript error occurred in the main process" cannot find module './setup'. what should I do? Also, I built my electron app using capacitor. Another error is this: Application entry file "build\src\index.js" in the "D:\GitHub\mapTestIonic\electron\dist\win-unpacked esources\app.asar" does not exist. Seems like a wrong configuration. failedTask=build

[@tylerlaceby]

I don’t know what the problem is without looking at any code. But it could also just be a issue with how Capacitor builds your code

[@arijitchakrabarty1552]

@@tylerlaceby is there any way I can share the code with you?

[@saulotarsobc]

+1

[@fisnikajredini2885]

is it possible to wrap the server and client side with electron ?

[@tylerlaceby]

I’m not sure I understand your question. However electron is simply a way to interface a GUI to a users machine. This means no you cannot bundle a product server with the app as that means there is no server. However if you bundle a server for say static file hosting or some other purpose then yes that’s possible. Long story short you can bundle whatever you want with your application as it’s simple a node js process

[@fisnikajredini2885]

@@tylerlaceby Sorry my mistake, I have a react app with server folder ( mongoose ) and a frontend folder. My question is, if i can bundle both of them on a simple electron app because i couldn't find any references online. BTW you make very cool videos, definitely I'm subscribing.

[@tylerlaceby]

Yea so anything that’s inside the root directory of the electron app can be bundled. For example I like to split my applications into a minimum 2/3 folder structures. The first folder is my svelte front end where I hold all my typescript abs html and css / assets for my UI. The code in this folder has no access to the node js runtime or the os and file system. However it does have access to the DOM and the ui of the app. The second folder I have is for the backend code. Typically I have a typescript backend and it will be the node js interface with the front end. In here I have code that only can be run inside the node js runtime. This code is running on seperate process to the ui code which is why we use IPC communication. Lastly I sometimes use c++ addons to increase the speed of some functionalities so having a third folder to contain c++ or other language code isn’t a bad idea. But long story short all of these can be put in the same electron app. Especially the first two as without these you have no app.

[@fisnikajredini2885]

@@tylerlaceby Thank you very much for taking time to give me this elaborate answer. Definitely will try this. You can make a tutorial about this because there is absolutely no materials regarding this topic. Thank you and keep up with this good work.

[@GamingWSpace]

question hat did you paste and where can i find what you paste in 1:34

[@tylerlaceby]

www.electron.build/configuration/nsis Here is the documentation for this section of the Tutorial. As for what I copied I am pretty sure I just copied it from another screen so its lost as I don't save that stuff. Srry

[@GamingWSpace]

@@tylerlaceby and also I did all you're tutorial but the icon doesn't change still and the name too

[@galacticmarine]

Could not detect abi for version 30.1.1 and runtime electron. Any help for this issue?

[@tylerlaceby]

I would make sure to upgrade your node and npm versions. Using a manager like nvm will be best.

[@aminalaggoun2700]

Error: "electron must be in the devDependencies" after executing "npm run build" and the dist folder is not generated , how can i fix it?

[@tylerlaceby]

Make sure electron is in the dev dependencies in the package json file

[@tylerlaceby]

If it’s not then install it in the dev dependencies folder with npm I -save-dev electron

[@brindharajesh8767]

Package "electron-builder" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json How to solve this error bro

[@tylerlaceby]

Just change the package json file ? Remove the line where it says electron-builder inside the dependecies and paste it down in the dev dependecies. Or just npm i --save-dev electron-builder

[@brindharajesh8767]

@@tylerlaceby thank you bro but still i have one more error . after buid SQLITE_CANTOPEN this should be shown how to solve it ??

[@asskrab]

this aint working for me when i type npm run build and can you please send me the code

[@tylerlaceby]

I don’t have the code anymore. However I would be happy to help figure out your issues if you want. Just message me on discord abs I can hop in a video call with you. Add my discord JSimplified#9121 or Join the community discord server.

[@asskrab]

@@tylerlaceby ok my username is print(0.1+0.2)