Electron appjs how to#
Electron appjs .exe#
Electron appjs install#

Inside the main process (or main.js), we add a handle() method from IPC Main to “listen” for events (in this case blender:version): // src/main/main.ts ipcMain. This is a system that uses pub/sub events to transmit data to and from the “main” (or backend) to the “renderer” (or frontend). So if you want to do something like query a DB, or open the native file system dialog - how does React run these commands on demand?

Electron appjs how to#

Understanding the distinction between these two will help understand how to create a secure Electron app, similar to working with apps on the web, to avoid exploits like XSS. The main.js file will run first, then run the renderer.js. import yup from 'yup).īoth of these processes are often bundles separately, usually through a library like Webpack or Parcel.

Electron appjs install#

Here we can use any frontend dependencies that we install in our package.json, like Yup for validating form input (e.g.

Electron appjs .exe#

exe file.After that I have faced lot of challenge to add node js app inside exe file for production build.I cant go with online server setup, as this is a offline desktop app. We can also use libraries like React or Angular, since they’re also JS and render in an HTML page. 1 day ago &0183 &32 I am just creating electron desktop app.Initially I have configure react js with electron, then I have converted it into.

This includes an HTML page to render, as well as any CSS or JS required inside of it. Here we can use dependencies such as NodeJS APIs and Electron APIs, as well as any library that requires it to be server-side (like a SQLite adapter to read from a DB - const sqlite = require('sqlite')).Ī “ renderer” process runs the “ frontend” of your app. This process is responsible for the “backend” of the app, such as rendering the actual app window and piping the HTML inside - or speaking to native platform APIs (like making the actually close using Electron’s app.quit()). But what does that mean?Įlectron has 2 main processes: Main and Renderer.Ī “ main” process that runs “ server-side” - on the NodeJS platform. This simply emphasized the “ renderer” process (or “ frontend”) with React didn’t have access to the same modules as the “ main” (or “ backend”) process. None of these worked, and the module would not import, despite any configuration. This led me down a hole of incorrect StackOverflow answers that kept insisting that I do things like add nodeIntegrations: true to my Forge config, changing import to require, or update my Webpack config to null out when importing Node modules in the frontend. When I cloned the latest version of electron-react-boilerplate, I tried doing this again only to get an error about child_process being missing. I figured Electron was different from frameworks like NextJS. Normally this wouldn’t be possible - even in NextJS-land you’re forced to use special methods to fetch data from the server-side.

You can see in my project, I use NodeJS directly inside my React component. I literally built an app that the user can input CLI commands and run them (using the exec method in the child_process module). As someone who has built Electron apps before, I thought I knew how to use NodeJS.