![]() The problem with frontend code is that the user can edit it and change it.įor example, if we have a shopping cart with products, we’d normally store the product prices in the React state. ![]() You can see a full working version of this example in this commit. Using this architecture, you can essentially create an API of sorts (similar to API routes in NextJS) to create a secure communication channel between the frontend (renderer aka React) and backend (main process aka Electron/Node). So the frontend uses the “API” you define in preload.js - and the backend uses the event names in preload.js (aka blender:version) to run the right function for the event. When we call that method, the IPC Renderer inside the preload script runs (or invoke()) the function we put in the main process. Inside the main process (or main.js), we add a handle() method from IPC Main to “listen” for events (in this case blender:version): 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? 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. Here we can use any frontend dependencies that we install in our package.json, like Yup for validating form input (e.g. We can also use libraries like React or Angular, since they’re also JS and render in an HTML page. 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? How Electron WorksĮ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). My Journey through Webpack HellĪs someone who has built Electron apps before, I thought I knew how to use NodeJS. You can clone this project and follow along - all files I reference will be relative to that project.Īlso note - I tried using Electron Forge and it didn’t work out of the box - requiring a lot of configuration to get it on par with electron-react-boilerplate. ℹ️ I’ll be using electron-react-boilerplate throughout this article as the basis for any code. I had to go through the Electron Discord to find a secret gist that finally had a proper example that worked for me. This seems simple enough (if you know Electron buzz words), but there’s not a lot of great examples out there that explicitly show how to do this kind of stuff unless you dig. The short answer? use the IPC Renderer to create a “pub/sub” event channel between the “main” and “renderer”. ![]() Looking how to use NodeJS modules (like exec to execute CLI commands) or Electron APIs (like dialog to open the native PC’s file dialog to select files)?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |