{"id":1390,"date":"2019-01-19T02:25:38","date_gmt":"2019-01-19T02:25:38","guid":{"rendered":"https:\/\/blog.hassler.ec\/wp\/?p=1390"},"modified":"2019-01-06T09:31:14","modified_gmt":"2019-01-06T09:31:14","slug":"how-to-easily-build-desktop-apps-with-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/blog.hassler.ec\/wp\/2019\/01\/19\/how-to-easily-build-desktop-apps-with-html-css-and-javascript\/","title":{"rendered":"How to Easily Build Desktop Apps with HTML, CSS and Javascript"},"content":{"rendered":"
\n
\n
<\/div>\n<\/div>
Photo by Robin Pierre<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n

Can HTML, CSS and Javascript really be used to build Desktop Applications?<\/p>\n

The answer is yes. ?<\/p>\n

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.<\/p>\n

Electron<\/h3>\n

Electron<\/a> can be used to build Desktop Apps with HTML, CSS and Javascript. Also these apps work for multiple platforms like Windows, Mac, Linux and so on.<\/p>\n

Electron combines Chromium and NodeJS into a single runtime. This enables us to run the HTML, CSS and Javascript code as a desktop application.<\/p>\n

Electron Forge<\/h3>\n

If Electron is used directly, then some manual setup is needed before building your application. Also if you want to use Angular, React, Vue or any other framework or library, you will need to manually configure for that.<\/p>\n

Electron Forge<\/a> makes the above things much easier.<\/p>\n

It provides template applications with Angular, React, Vue and other frameworks which avoids the extra manual setups.<\/p>\n

Also it provides an easy way to build and package the application. It also provides many other features which can be found in their documenation<\/a>.<\/p>\n

Pre-requisites<\/h3>\n

Ensure you have NodeJS installed. It can be installed from here<\/a>.<\/p>\n

Install Electron Forge globally using the following command:<\/p>\n

npm install -g electron-forge<\/code><\/pre>\n
Let\u2019s get started with the application<\/h3>\n
Use the following command to create your application:<\/p>\n
electron-forge init simple-desktop-app-electronjs<\/code><\/pre>\n
simple-desktop-app-electronjs<\/strong> is the name of the application.<\/p>\n
The above command will take some time to run.<\/p>\n
Once it finishes running, start the application using the following commands:<\/p>\n
cd simple-desktop-app-electronjs\nnpm start<\/code><\/pre>\n
This should open up a window like the one shown below:<\/p>\n
\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n
Understanding the Existing Folder Structure and Code<\/h3>\n
The application has a particular folder structure. Here I will be mentioning some of the important things in this folder structure.<\/p>\n
package.json<\/h4>\n
It has information about the application you are creating, all the dependencies needed for the app, and some scripts. Some of the scripts are already pre configured, and you can add new scripts as well.<\/p>\n
The config.forge<\/strong> path has all the configurations which are specific to ElectronJS. For example make-targets<\/strong> is used to specify the target make files for various platforms like Windows, Mac or Linux.<\/p>\n
Also package.json has \"main\": \"src\/index.js\"<\/code> which indicates that src\/index.js is the starting point of the application<\/p>\n
src\/index.js<\/h4>\n
According to package.json, index.js<\/strong> is the main script. The process which runs the main script is known as the main process<\/strong>. So the main process runs the index.js script.<\/p>\n
The main process is used to display GUI elements. It does this by creating web pages.<\/p>\n
Each web page created runs in a process called the renderer process.<\/strong><\/p>\n
Main process and renderer process<\/h4>\n
The purpose of the main process<\/strong> is to create web pages using a BrowserWindow<\/code> Instance.<\/p>\n
The BrowserWindow<\/code> Instance uses a renderer process<\/strong> to run each web page.<\/p>\n
Each app can have only one main process but can have many renderer processes.<\/strong><\/p>\n
It is possible to communicate between the main and the renderer process as well. This, however, will not be covered in this article.<\/p>\n
\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>
Electron Architecture showing main and renderer process. The file names can vary.<\/em><\/figcaption><\/figure>\n
abcd.html<\/strong> is shown as a second webpage in the above architecture. But in our code we won\u2019t be having a second web page.<\/p>\n
src\/index.html<\/h4>\n
index.js loads the index.html file into a new BrowerWindow Instance.<\/p>\n
What this basically means is that index.js creates a new GUI Window, and loads it with index.html web page. The index.html web page runs in its own renderer process.<\/p>\n
Code in index.js explained<\/h4>\n
Most of the code created in index.js has good comments explaining what it does. Here I will mention a few key points to note in index.js:<\/p>\n
mainWindow =<\/strong> new<\/strong> BrowserWindow({\n    width: 800,\n    height: 600,\n  });\n\n  \/\/ and load the index.html of the app.<\/em>\n  mainWindow.loadURL(`file:\/\/${__dirname}\/index.html`);<\/code><\/pre>\n
The above code snippet basically creates a BrowserWindow<\/strong> Instance and loads index.html<\/strong> into the BrowserWindow.<\/p>\n
You will see app<\/strong> used often in the code. For example take the below code snippet:<\/p>\n
app.on('ready', createWindow);<\/code><\/pre>\n
app<\/strong> is used to control the application\u2019s event life cycle.<\/p>\n
The above code snippet says that when the application is ready, load the first window.<\/p>\n
Similarly, app<\/strong> can be used to perform other actions on various events. For example it can be used to perform some action right before the application closes and so on.<\/p>\n
Let\u2019s create a Temperature Converter Desktop Application<\/h3>\n
Let us use the same application we used before and modify it slightly to create a temperature converter application.<\/p>\n
First let us install Bootstrap with the following command:<\/p>\n
npm install bootstrap --save<\/code><\/pre>\n
Copy the following code into src\/index.html:<\/p>\n
<!DOCTYPE html><\/strong>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>Temperature Converter<\/title>\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css\">\n\n  <\/head>\n  <body>\n    <h1>Temperature Converter<\/h1>\n    <div class=\"form-group col-md-3\">\n      <label for=\"usr\">Celcius:<\/label>\n      <input type=\"text\" class=\"form-control\" id=\"celcius\" onkeyup=\"celciusToFahrenheit()\">\n    <\/div>\n    <div class=\"form-group col-md-3\">\n      <label for=\"pwd\">Fahrenheit:<\/label>\n      <input type=\"text\" class=\"form-control\" id=\"fahrenheit\" onkeyup=\"fahrenheitToCelcius()\">\n    <\/div>\n    <script src='.\/renderer.js'><\/script>\n  <\/body>\n  <\/body>\n<\/html><\/code><\/pre>\n
The above code does the following:<\/p>\n
    \n
  1. Creates a text box with id Celcius<\/strong>. Whenever anything is typed in this textbox, the celciusToFahrenheit()<\/strong> function is called.<\/li>\n
  2. Creates a text box with id Fahrenheit<\/strong>. Whenever anything is typed in this textbox, the fahrenheitToCelcius()<\/strong> function is called.<\/li>\n
  3. Whenever a new value is typed in the Celcius text box, the value in the Fahrenheit text box displays the same temperature in Fahrenheit<\/li>\n
  4. Whenever a new value is typed in the Fahrenheit text box, the value in the Celcius text box displays the same temperature in Celcius<\/li>\n<\/ol>\n
    The 2 functions which do the temperature conversion are present in renderer.js.<\/strong><\/p>\n
    Create a file called renderer.js<\/strong> inside src<\/strong>. Copy the following code into it:<\/p>\n
    function<\/strong> celciusToFahrenheit(){\n    let<\/strong> celcius =<\/strong> document.getElementById('celcius').value;\n    let<\/strong> fahrenheit =<\/strong> (celcius*<\/strong> 9\/<\/strong>5) +<\/strong> 32;\n    document.getElementById('fahrenheit').value =<\/strong> fahrenheit;\n\n}\n\nfunction<\/strong> fahrenheitToCelcius(){\n    let<\/strong> fahrenheit =<\/strong> document.getElementById('fahrenheit').value;\n    let<\/strong> celcius =<\/strong> (fahrenheit -<\/strong> 32) *<\/strong> 5\/<\/strong>9\n    document.getElementById('celcius').value =<\/strong> celcius;\n}<\/code><\/pre>\n
    The celciusToFahrenheit()<\/strong> function reads the value in the Celcius<\/strong> text box, converts it to Fahrenheit, and writes the new temperature into the Fahrenheit<\/strong>text box.<\/p>\n
    The fahrenheitToCelcius()<\/strong> function does the exact opposite of this.<\/p>\n
    Running the application<\/h3>\n
    Run the application using the following command:<\/p>\n
    npm start<\/code><\/pre>\n
    This should display the following window. Try it out with different values.<\/p>\n
    \n
    \n
    <\/div>\n
    <\/canvas><\/div>\n<\/div>\n<\/figure>\n
    Packaging the application<\/h3>\n
    The command to package the application is:<\/p>\n
    npm run package<\/code><\/pre>\n
    This command will take some time to run. Once it finishes check the out<\/strong>folder within the project folder.<\/p>\n
    I tested this in a Windows machine. This creates a folder called simple-desktop-app-electronjs-win32-x64<\/strong> inside the out<\/strong> folder<\/p>\n
    So in the out\/simple-desktop-app-electronjs-win32-x64<\/strong> folder, the command creates an .exe<\/strong> file for this application. Clicking on the exe file automatically starts the desktop application.<\/p>\n
    The folder name simple-desktop-app-electronjs-win32-x64<\/strong> can be broken down as appname-platform-architecture<\/strong> where<\/p>\n