We want the user to really believe that they’re using a native app, with all the features that they would be accustomed to. In this recipe, let’s now focus on making our app more window-like, with icons, menus, and so on. In the previous recipe, we added the possibility of using any and all of the functions provided by Node. If you click Save, the list of regions will be written in JSON format, as we specified earlier in our writeRegionsToDisk() function. When we run our updated app and select a country, we’ll see our newly added button, as in the following screenshot:Ĭlicking on the button will pop up a dialog, allowing you to select the destination for the data: The code we added showed how we could gain access to a Node package ( fs, in our case) and some extra functions, such as showing a Save to disk dialog. Taking some tips from the main.js file, we’ll create the following electron-start.js file: // Source file: electron-start.js /* */Ĭonst ) Įxport const ConnectedRegionsTable = connect( You can install Electron by executing the following command: npm install electron -save-dev We will start with installing Electron, and then in the later recipes, we’ll see how we can turn a React app into a desktop program. In this article, we will look at how we can use Electron together with the tools like, React and Node, to create a native desktop application, which you can distribute to users. To follow along with the examples implemented in this article, you can download the code from the book’s GitHub repository. This problem-solving guide teaches you popular problems solving techniques for JavaScript on servers, browsers, mobile phones, and desktops.
This article is taken from the book Modern JavaScript Web Development Cookbook by Federico Kereki. So, you won’t be limited to a sandboxed experience, being able to go beyond what you could do with just a browser.
Electron is an open source framework, created by GitHub, that lets you develop desktop executables that bring together Node and Chrome to provide a full GUI experience. Electron has been used for several well-known projects, including developer tools such as Visual Studio Code, Atom, and Light Table.īasically, you can define the UI with HTML, CSS, and JS (or using React, as we’ll be doing), but you can also use all of the packages and functions in Node.
0 kommentar(er)
