how to create a application for a displaying website

How to create a application for a displaying website install#
How to create a application for a displaying website manual#
How to create a application for a displaying website code#

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.

How to create a application for a displaying website code#

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. This will not be covered in this article.Įlectron Architecture showing main and renderer process. 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 as renderer process Main Process and Renderer process The main process is used to display GUI elements. So 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 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, it has all the dependencies needed for the app and also it has some scripts.

Here I will be mentioning some of the important things in this folder structure package.json The application created has a folder structure. Understanding the Existing Folder Structure and Code This should open up a window like the one shown below

How to create a application for a displaying website install#

Install Electron Forge Globally using the following command Pre-requisitesĮnsure you have NodeJS installed. It also provides many other features which can be found in their documenation.

How to create a application for a displaying website manual#

This avoids the extra manual setups needed.Īlso it provides an easy way to build and package the application. It provides template applications with angular, react, vue and other frameworks. 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. The Answer is Yes 😄 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 ElectronĮlectron can be used to build Desktop Apps with HTML, CSS and Javascript. You can also check out my Youtube Channel to get access to various tutorials created by me.Ĭan HTML, CSS and Javascript really be used to build Desktop Applications?