Electron
Simplest definition: Electron is a framework that allows creating a desktop application for all the platforms (Windows, Mac, and Linux). Some of the examples of desktop applications that are built on Electron are Atom, Visual Studio Code, Github Desktop. Could you believe that the Visual Studio Code is built on HTML, CSS, and NodeJS?
A little deep definition: Electron is a GUI framework that combines Chromium rendering engine and Node.js runtime to allow browser process and several other renderer processes to run the application logic. The browser process runs the logic of app (main.js => main entry point for an application) and another built-in rendering process creates windows by rendering HTML and CSS.
My application is running just fine, but after packaging the application using electron-builder, the app doesn't launch. The exe gets produced and I don't see any errors/warnings in the console. Is there any logging I can enable on the app or any other steps I can do to try and figure out what's going on? Here is my full package.json below.
- But that is running the entire application as a superuser. We are trying to run a daemon via launched, which on application startup takes the users' credentials and keeps running in the background. Whenever the user initiates the hardware operations, the application will call this daemon to run those operations.
- DMG installer for Mac This Electron webview application needs just these files: package.json- Points to the app's main file and lists its details and dependencies. Main.js- Starts the app and creates a browser window to render website.
- Getting Started With Electron. Apps built with Electron are just web sites which are opened in an embedded Chromium web browser. In addition to the regular HTML5 APIs, these websites can use the full suite of Node.js modules and special Electron modules which give access to the operating system.
Why use Electron?
One of the problems I experience all the time as a developer when I start developing a project is that I get hung up on for which platform should I approach for my project. Electron helps to develop a cross-platform application using basic web technologies. Usually, you would use different web technologies to create an application on different platforms, but that is not the case with Electron.
Another reason to use Electron is because of code and app management. As a developer, you don't need to maintain different projects for different major platforms. You could develop code for all the major platforms in one project and encounter all the bugs and problems in one place. You also don't need to code new features and enhancements separately for different projects from different codebases.
How to create an Electron app?
Alright, let's get started to creating a simple electron app.
First and foremost, create a local project folder on your machine. Then, write this command in the terminal from the root project level.
Check out the package.json
If the main is not present in the package.json, Electron will try to load the index.js as it normally does with node.js.
Now, add a start script to give instructions on how to start an application. Since this is not a normal node app, so you wouldn't start by 'node .' command. Instead, you will start an app like this,
Install the electron framework package using npm.
Code
As I mentioned earlier, Electron uses node.js runtime that means you could use javascript principles to create an app. You can find all the Electron APIs here.
Let's create an entry point or main.js for our application and import all the Electron module.
Create an 'app' and 'BrowserWindow' variables from the 'electron' module
A desktop application doesn't work like other browser pages or mobile apps. It needs a desktop window to showcase different rendering pages just like any other desktop application.
Let's create a function that will create a desktop window with custom size preferences that will load the HTML file.
Since some APIs in the back-end takes time to load so we need to make our app smart that only creates windows after every API is loaded and all the events occurred including asynchronous functions.
It's a good practice to quit an app and kill the process if the window is closed by the user.
There are different names for different platforms:- Windows: win32
- MAC: darwin
- Linux: linux
Electron App With Node Js Server
Since it is common on macOS to re-create a window in the app when the dock icon is clicked and there are no windows open.
Finally, let's add the basic index.html page for the rendering process to render the page and showcase it inside the window.
Run
Once you have main.js, index.html, and package.json components, then finally run the app!
![Running Running](/uploads/1/3/4/0/134066796/104516312.gif)
You did it! See how simple it was to get started on the Electron app. You can integrate Vue.js, React.js, Backbone.js and many other frameworks to create a renderer. ?
Just leaving an example of the Vue.js electron app for some inspiration!
Let me know if you have any questions. Adiós until the next blog!
Running Electron App Built With Node.js On Mac Windows 10
For me the solution for productive Node.js development on Mac, with code execution on a Raspberry Pi was usage of Samba. After following the steps you will be able to develop Node.js applications right on your Mac, execute them on your Raspberry Pi (just by pressing cmd+S) and see the console output and errors on your Mac, without much hassle. This tutorial covers the entire setup.
![Built Built](/uploads/1/3/4/0/134066796/687105685.png)
Login to your router interface and assign a static IP address to your Raspberry Pi’s MAC address (e.g. https://bassbrown453.weebly.com/blog/onenote-desktop-app-mac. 192.168.0.120). The router menus differ from each other, if you have trouble check the router manual.
Then connect to your Raspberry Pi via Secure Shell (SSH) from your Mac.
Install Node.js and the npm packet manager on the Raspberry Pi.
Install some other useful packets (optional).
Install Samba, set a user password and edit the config file.
Edit the Samba config file (/etc/samba/smb.conf).
Restart Samba to apply the changes:
service smbd restart
Open Finder on your Mac and navigate to Go > Connect to Server.
Access your Raspberry Pi’s folders through Finder and create your project there. https://bassbrown453.weebly.com/how-to-uninstall-wechat-app-on-mac.html.
Now the workflow is to have a Terminal window open, to see the error messages and the console output of your Node application via SSH. There you can also run
nodemon app.js
instead of node app.js
in order to keep the app restarting automatically, after files have been modified.Every time you modify a file in the editor (on the left), nodemon will “restart due to changes”. Since your editor accesses the files on your Raspberry Pi right through Samba there is no need to transfer them, to test a new version. The console output and errors are shown in the Terminal for quick debugging.