1/9/2024 0 Comments Temperature conversion app pcThe above code snippet basically creates a BrowserWindow Instance and loads index.html into the BrowserWindow. Here I will mention a few key points to note in index.js: mainWindow = new BrowserWindow(/index.html`) Most of the code created in index.js has good comments explaining what it does. The index.html web page runs in its own renderer process. What this basically means is that index.js creates a new GUI Window, and loads it with index.html web page. Index.js loads the index.html file into a new BrowerWindow Instance. But in our code we won’t be having a second web page. The file names can vary.Ībcd.html is shown as a second webpage in the above architecture. Electron Architecture showing main and renderer process. This, however, will not be covered in this article. It is possible to communicate between the main and the renderer process as well. The BrowserWindow Instance uses a renderer process to run each web page.Įach app can have only one main process but can have many renderer processes. The purpose of the main process is to create web pages using a BrowserWindow Instance. It does this by creating web pages.Įach web page created runs in a process called the renderer process. The main process is used to display GUI elements. So the main process runs the index.js script. The process which runs the main script is known as the main process. For example make-targets is used to specify the target make files for various platforms like Windows, Mac or Linux.Īlso package.json has "main": "src/index.js" which indicates that src/index.js is the starting point of the application src/index.jsĪccording to package.json, index.js is the main script. The config.forge path has all the configurations which are specific to ElectronJS. Some of the scripts are already pre configured, and you can add new scripts as well. It has information about the application you are creating, all the dependencies needed for the app, and some scripts. Here I will be mentioning some of the important things in this folder structure. The application has a particular folder structure. This should open up a window like the one shown below: Understanding the Existing Folder Structure and Code Once it finishes running, start the application using the following commands: cd simple-desktop-app-electronjsnpm start The above command will take some time to run. Simple-desktop-app-electronjs is the name of the application. Use the following command to create your application: electron-forge init simple-desktop-app-electronjs Install Electron Forge globally using the following command: npm install -g electron-forge Let’s get started with the application Pre-requisitesĮnsure you have NodeJS installed. It also provides many other features which can be found in their documenation. It provides template applications with Angular, React, Vue and other frameworks which avoids the extra manual setups.Īlso it provides an easy way to build and package the application. Also if you want to use Angular, React, Vue or any other framework or library, you will need to manually configure for that.Įlectron Forge makes the above things much easier. If Electron is used directly, then some manual setup is needed before building your application. This enables us to run the HTML, CSS and Javascript code as a desktop application. Also these apps work for multiple platforms like Windows, Mac, Linux and so on.Įlectron combines Chromium and NodeJS into a single runtime. ElectronĮlectron can be used to build Desktop Apps with HTML, CSS and Javascript. In this Article we will be focussing mainly on how Electron can be used to create desktop applications with Web Technologies like HTML, CSS and Javascript. Can HTML, CSS and Javascript really be used to build Desktop Applications?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |