- #Bootstrap builder desktop app install
- #Bootstrap builder desktop app manual
- #Bootstrap builder desktop app mac
Whenever a new value is typed in the Celcius text box, the value in the Fahrenheit text box displays the same temperature in Fahrenheit.Whenever anything is typed in this textbox, the fahrenheitToCelcius() function is called. Creates a text box with id Fahrenheit.Whenever anything is typed in this textbox, the celciusToFahrenheit() function is called.
#Bootstrap builder desktop app install
Let us use the same application we used before and modify it slightly to create a temperature converter application.įirst let us install Bootstrap with the following command: npm install bootstrap -saveĬopy the following code into src/index.html: Let’s create a Temperature Converter Desktop Application For example it can be used to perform some action right before the application closes and so on. Similarly, app can be used to perform other actions on various events. The above code snippet says that when the application is ready, load the first window. For example take the below code snippet: app.on('ready', createWindow) Īpp is used to control the application’s event life cycle. The 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.
#Bootstrap builder desktop app mac
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.
#Bootstrap builder desktop app manual
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.
0 kommentar(er)
