@@tylerlaceby Creating small projects that use several technologies, like making a task manager with TypeScript + Electron + React + some backend database to store the tasks
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.
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!
Great video! Very clear and easy to understand. To take it a step further, if I want to give my users the option to install additional files, like add-ons to my app, or a packaged application, is there a way to customize the installer to do this?
There are. However typically this is done via your application itself if you want to ensure it's cross platform support. You can write an installer program which runs when the app first launches. In fact the installer for Visual Studio is an application entirely written in electron. Think of how discord has a small part of the app check for updates when you launch it. You can do something similar but give options or whatever if you want. If not you will have to manage 3+ separate installers. The NSIS windows one is a lot easier but for Mac and Linux it will be quiet hard.
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?
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.
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
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
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
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.
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
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.
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
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
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.
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
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.
i want a one time single executable setup like when user installs the app the setup should stop working or it should delete itself permanently can i do that?
I don't quite know what you mean. Tap on a clip to paste it in the text box. You can create a NSIS installer which will allow you to see custom options. This also includes the ability to have a simple uninstaller too.
@@tylerlaceby I want to share my electron app with clients but i am afraid they would further share the setup (illegal distribution) so i want a setup which can only be used once
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
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?
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
@@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.
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.
@@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.
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
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
Tyler making videos on everything an actual developer needs
haha. I try. Still pretty garbage at it. Any other ideas for videos are much appreciated mate xD
@@tylerlaceby Creating small projects that use several technologies, like making a task manager with TypeScript + Electron + React + some backend database to store the tasks
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.
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!
Great video, straight to the point!
awesome video! idk why, but your voice sounds very nice
Thank you so much Tyler, you're the best!
Great video! Very clear and easy to understand. To take it a step further, if I want to give my users the option to install additional files, like add-ons to my app, or a packaged application, is there a way to customize the installer to do this?
There are. However typically this is done via your application itself if you want to ensure it's cross platform support.
You can write an installer program which runs when the app first launches. In fact the installer for Visual Studio is an application entirely written in electron.
Think of how discord has a small part of the app check for updates when you launch it. You can do something similar but give options or whatever if you want.
If not you will have to manage 3+ separate installers. The NSIS windows one is a lot easier but for Mac and Linux it will be quiet hard.
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?
If your not planning to bro i will send u money to show me.
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.
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
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
@@tylerlaceby is there any way I can share the code with you?
Hi, thanks for video.. will it work for bigger project like 10gb?
great stuff. Thank you! Any suggestion with regards to obfuscating or protecting the code as the asar file can be unpacked easily...?
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
question hat did you paste and where can i find what you paste in 1:34
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
@@tylerlaceby and also I did all you're tutorial but the icon doesn't change still and the name too
Please can it be used to update desktop applications such as windows forms application
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.
Genial. Excelente contenido, gracias.
Best video.
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
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.
@@tylerlaceby Thank you!! Yes I'm using NSIS. I'll go to study the documentation!
Do you know how we can add some custom scripts during installation process? for example adding a windows registry key
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
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
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.
@@tylerlaceby yes i already found it. thank you so much
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
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.
i want a one time single executable setup like when user installs the app the setup should stop working or it should delete itself permanently can i do that?
I don't quite know what you mean. Tap on a clip to paste it in the text box. You can create a NSIS installer which will allow you to see custom options. This also includes the ability to have a simple uninstaller too.
@@tylerlaceby I want to share my electron app with clients but i am afraid they would further share the setup (illegal distribution) so i want a setup which can only be used once
Could not detect abi for version 30.1.1 and runtime electron. Any help for this issue?
I would make sure to upgrade your node and npm versions. Using a manager like nvm will be best.
that electron application uses a lot o MB but it's just a test yet. I imagine how large it'll be when finished.
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.
Very good Congratulations!
But I came here looking for autoupdate do you have a video about it?
thanks.
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
Great!
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?
i solved the issue i had to change some npm config
Thank you 🙏🏽
Muchas gracias por la ayuda👌
is it possible to wrap the server and client side with electron ?
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
@@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.
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.
@@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.
Error: "electron must be in the devDependencies" after executing "npm run build" and the dist folder is not generated , how can i fix it?
Make sure electron is in the dev dependencies in the package json file
If it’s not then install it in the dev dependencies folder with npm I -save-dev electron
I do not see "test Setup" after building, I got only "win-unpacked" and two .yaml files
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
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
@@tylerlaceby thank you bro but still i have one more error . after buid SQLITE_CANTOPEN this should be shown how to solve it ??
thank you!!!!!!!!!!!!!!!!!!!
Thanks!
+1
Thanks!