How to build desktop application easily with HTML, CSS and JavaScript

Time:2020-9-28

How to build desktop application easily with HTML, CSS and JavaScript

Can HTML, CSS and JavaScript really be used to build desktop applications?

The answer is yes.

In this article, we will focus on how electron uses web technologies such as HTML, CSS, and JavaScript to create desktop applications.

Electron

How to build desktop application easily with HTML, CSS and JavaScript

Electron can be used to build desktop applications using HTML, CSS, and JavaScript. These applications are also suitable for windows, MAC, Linux and other platforms.

Electron combines chromium and nodejs into a runtime. This allows us to run HTML, CSS, and JavaScript code as a desktop application.

Electron Forge

How to build desktop application easily with HTML, CSS and JavaScript

If you use electron directly, you need to make some manual settings before you build the application. In addition, if you want to use angular, react, Vue or any other framework or library, you need to configure it manually.

Electron forge makes that easier.

It provides template application of angular, react, Vue and other frameworks, avoiding additional manual settings.

It also provides an easy way to build and package applications. It also provides many other features that can be found in its documentation.

precondition

Make sure nodejs is installed.

Use the following command to install electron forge globally:

npm install -g electron-forge

Let’s get started with the app

Use the following command to create your application:

electron-forge init simple-desktop-app-electronjs

simple-desktop-app-electronjsIs the name of the application.

The above command will take some time to run.

After running, start the application with the following command:

cd simple-desktop-app-electronjs
npm start

This will open a window as follows:
How to build desktop application easily with HTML, CSS and JavaScript

Learn about the existing folder structure and code

The application has a special folder structure. I’ll mention some of the important things in this folder structure here.

package.json

It has information about the application you are creating, all the dependencies the application needs, and some scripts. Some scripts are pre configured, and you can add new scripts.

config.forgeThe path contains all the configuration of electronjs. For example,make-targetsUse to specify the target make file for various platforms such as windows, MAC or Linux.

package.json There are also"main": "src/index.js"This indicates that SRC/ index.js Is the starting point for the application.

src/index.js

according to package.json ,index.jsIs the main script. The process that runs the main script is calledMain process。 So the main process is running index.js script.

The main process is used to display GUI elements, which is realized by creating web pages.

Each web page you create runs in a process called the renderer process.

Main process and rendering process

The purpose of the main process is to use theBrowserWindowInstance to create a web page.

BrowserWindowInstance uses the render process to run each web page.

Each application can have only one main process, but there can be many render processes.

There is also communication between the main process and the render process. However, this paper will not deal with this issue.
How to build desktop application easily with HTML, CSS and JavaScript

abcd.htmlIt is shown as the second web page in the above architecture. But in our code, we won’t have a second page.

src/index.html

index.js take index.html The file is loaded into the new browerwindow instance.

That basically means index.js A new GUI window is created and the index.html The web page is loaded into it. index.html The web page runs in its own render process.

index.js Code description in

stay index.js Most of the code created in has good comments to explain its role. I will mention it here index.js Several key points need to be paid attention to.

mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
});

//And load the index.html .
mainWindow.loadURL(`file://${__dirname}/index.html`);

The code snippet above basically creates aBrowserWindowInstance, and willindex.htmlLoad into browserwindow.

In the code, you can see that apps are often used. For example, the following code snippet.

app.on('ready', createWindow);

appIs the event lifecycle used to control the application.

The above code fragment says that when the application is ready, the first window is loaded.

Again,appIt can also be used to perform other operations on various events. For example, it can be used to perform actions before an application closes, and so on.

Let’s create a temperature converter desktop application

Let’s use the previous application and modify it a little to create a temperature converter application.

First, let’s install bootstrap with the following command:

npm install bootstrap --save

Copy the following code to SRC/ index.html Chinese:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    < title > temperature converter
    <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

  </head>
  <body>
    <h1>Temperature Converter</h1>
    <div class="form-group col-md-3">
      <label for="usr">Celcius:</label>
      <input type="text" class="form-control" id="celcius" onkeyup="celciusToFahrenheit()">
    </div>
    <div class="form-group col-md-3">
      <label for="pwd">Fahrenheit:</label>
      <input type="text" class="form-control" id="fahrenheit" onkeyup="fahrenheitToCelcius()">
    </div>
    <script src='./renderer.js'></script>
  </body>
  </body>
</html>

The above code does the following:

  1. Create an ID ofCelciusText box for. Whenever you type anything in this text box, thecelciusToFahrenheit()Function.
  2. Create an ID ofFahrenheitText box for. Whenever you type anything in this text box, thefahrenheitToCelcius()Function.
  3. Whenever you type a new value in the Celcius text box, the value in the Fahrenheit text box displays the same temperature in Fahrenheit
  4. Whenever you type a new value in the Fahrenheit text box, the value in the Celcius text box displays the same temperature as Celcius

renderer.jsProvides two functions to perform temperature conversion in.

In SRC, create a file namedrenderer.jsFile. Copy the following code into it:

function celciusToFahrenheit(){
  let celcius = document.getElementById('celcius').value;
  let fahrenheit = (celcius* 9/5) + 32;
  document.getElementById('fahrenheit').value = fahrenheit;
}

function fahrenheitToCelcius(){
  let fahrenheit = document.getElementById('fahrenheit').value;
  let celcius = (fahrenheit - 32) * 5/9
  document.getElementById('celcius').value = celcius;
}

celciusToFahrenheit()Function readCelciusText box, convert it to Fahrenheit, and then write the new temperature toFahrenheitText box.

fahrenheitToCelcius()The function is the opposite of this.

Running applications

Run the application using the following command:

npm start

This should display the following window. Try with different values.
How to build desktop application easily with HTML, CSS and JavaScript

Package application

The command to package an application is:

npm run package

This command will take some time to run. Once it’s done, check theoutfolder.

I tested it on a Windows machine. This will create a folder namedsimple-desktop-app-electronjs-win32-x64Folder for.

So in theout/simple-desktop-app-electronjs-win32-x64Folder, the command creates an. EXE file for this application. click.exeThe file will start the desktop application automatically.

Folder namesimple-desktop-app-electronjs-win32-x64It can be decomposed intoappname-platform-architectureIn which

  • appname = simple-desktop-app-electronjs
  • platform = win32
  • architecture = x64

When you run this command without any parameters, it packages the platform for development by default.

Suppose you want to package for different platforms and architectures. Then you can use the following syntax.

npm run package -- --platform=<platform> arch=<architecture>

For example, to package for Linux, you can use the following command:

npm run package -- --platform=linux --arch=x64

This will create a folder namedsimple-desktop-app-electronjs-linux-x64Folder for.

Create a make file

To create a make file or setup program for your application, use the following command.

npm run make

This command will take some time to run. Once it’s done, check theoutfolder.

out/makeThere will be a Windows Setup for desktop applications in the folder.

When you run this command, there are no parameters. By default, it creates an installation program for the platform you use for development.

code

The code for this desktop application can be found in my GitHub Repository:https://github.com/aditya-sri…

congratulations

You now know how to create desktop applications using HTML, CSS, and JavaScript.

This paper introduces the very basic concepts of electron and electron forge.

To learn more about them, see their documentation.


Source:https://medium.com/free-code-camp
Author: Aditya Sridhar
Translation: official account “front-end full stack developer”