- Electron 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. Electron Combines Chromium and NodeJS into a single Runtime. This enables Us to run the HTML, CSS and Javascript Code as a desktop application.
- When users configure files on the Mac OS platform, sometimes they need to configure some files in the MAC terminal. At this time, they need to open app applications in the terminal with commands. However, many users do not use terminal commands. Xiaobian provides a tutorial for you to open app applications under the terminal.
- MAC address is very commonly use in various application. It is generally used in voting application, poll application like this where identify a unique user is very important. There are many ways you can identify a unique user such as using the hard disk id, processor id etc for desktop application and for web application you can use ip address.
- Exporting data to Excel is very useful for every enterprise on data list web application. Every time, export data using custom export feature helps to download table data list for offline use as excel file like csv format. As a web Developer, I was required to do that in various live project. Excel format for exporting data in file is ideal in every enterprises. Mostly we used server-side.
To open a file on your Mac using a different program, navigate to the file you wish to open and right-click on it to see the file menu as shown below. When the file menu opens, click on the Open.
This Wiki page explains how to create a simple application using CEF3.
Note to Editors: Changes made to this Wiki page without prior approval via the CEF Forum or Issue Tracker may be lost or reverted.
- Getting Started
- Source Code
- Build Steps
This tutorial explains how to create a simple application using CEF3. It references the cefsimple example project. For complete CEF3 usage information visit the GeneralUsage Wiki page.
CEF provides a sample project that makes it really easy to get started with CEF development. Simply browse over to the cef-project website and follow the step-by-step instructions. The source files linked from this tutorial are for the current CEF3 master branch and may differ slightly from the versions that are downloaded by cef-project.
Loading a Custom URL
The cefsimple application loads google.com by default but you can change it to load a custom URL instead. The easiest way to load a different URL is via the command-line.
You can also edit the source code in cefsimple/simple_app.cc and recompile the application to load your custom URL by default.
All CEF applications have the following primary components:
- The CEF dynamic library (libcef.dll on Windows, libcef.so on Linux, “Chromium Embedded Framework.framework” on OS X).
- Support files (*.pak and *.bin binary blobs, etc).
- Resources (html/js/css for built-in features, strings, etc).
- Client executable (cefsimple in this example).
The CEF dynamic library, support files and resources will be the same for every CEF-based application. They are included in the Debug/Release or Resources directory of the binary distribution. See the README.txt file included in the binary distribution for details on which of these files are required and which can be safely left out. See below for a detailed description of the required application layout on each platform.
The below list summarizes the items of primary importance for this tutorial:
- CEF uses multiple processes. The main application process is called the “browser” process. Sub-processes will be created for renderers, plugins, GPU, etc.
- On Windows and Linux the same executable can be used for the main process and sub-processes. On OS X you are required to create a separate executable and app bundle for sub-processes.
- Most processes in CEF have multiple threads. CEF provides functions and interfaces for posting tasks between these various threads.
- Some callbacks and functions may only be used in particular processes or on particular threads. Make sure you read the source code comments in the API headers before you begin using a new callback or function for the first time.
Read the GeneralUsage Wiki page for complete discussion of the above points.
The cefsimple application initializes CEF and creates a single popup browser window. The application terminates when all browser windows have been closed. Program flow is as follows:
- The OS executes the browser process entry point function (main or wWinMain).
- The entry point function:
- Creates an instance of SimpleApp which handles process-level callbacks.
- Initializes CEF and runs the CEF message loop.
- After initialization CEF calls SimpleApp::OnContextInitialized(). This method:
- Creates the singleton instance of SimpleHandler.
- Creates a browser window using CefBrowserHost::CreateBrowser().
- All browsers share the SimpleHandler instance which is responsible for customizing browser behavior and handling browser-related callbacks (life span, loading state, title display, etc).
- When a browser window is closed SimpleHandler::OnBeforeClose() is called. When all browser windows have closed the OnBeforeClose implementation quits the CEF message loop to exit the application.
Your binary distribution may include newer versions of the below files. However, the general concepts remain unchanged.
Entry Point Function
Execution begins in the browser process entry point function. This function is responsible for initializing CEF and any OS-related objects. For example, it installs X11 error handlers on Linux and allocates the necessary Cocoa objects on OS X. OS X has a separate entry point function for helper processes.
- Windows platform implementation: cefsimple/cefsimple_win.cc
- Linux platform implementation: cefsimple/cefsimple_linux.cc
- Mac OS X platform implementation
- For the browser process: cefsimple/cefsimple_mac.mm
- For sub-processes: cefsimple/process_helper_mac.cc
SimpleApp
SimpleApp is responsible for handling process-level callbacks. It exposes some interfaces/methods that are shared by multiple processes and some that are only called in a particular process. The CefBrowserProcessHandler interface, for example, is only called in the browser process. There’s a separate CefRenderProcessHandler interface (not shown in this example) that is only called in the render process. Note that GetBrowserProcessHandler() must return |this| because SimpleApp implements both CefApp and CefBrowserProcessHandler. See the GeneralUsage Wiki page or API header files for additional information on CefApp and related interfaces.
- Shared implementation: cefsimple/simple_app.h, cefsimple/simple_app.cc
SimpleHandler
SimpleHandler is responsible for handling browser-level callbacks. These callbacks are executed in the browser process. In this example we use the same CefClient instance for all browsers, but your application can use different CefClient instances as appropriate. See the GeneralUsage Wiki page or API header files for additional information on CefClient and related interfaces.
- Shared implementation: cefsimple/simple_handler.h, cefsimple/simple_handler.cc
- Windows platform implementation: cefsimple/simple_handler_win.cc
- Linux platform implementation: cefsimple/simple_handler_linux.cc
- Mac OS X platform implementation: cefsimple/simple_handler_mac.mm
Build steps vary depending on the platform. Explore the CMake files included with the binary distribution for a complete understanding of all required steps. The build steps common to all platforms can generally be summarized as follows:
- Compile the libcef_dll_wrapper static library.
- Compile the application source code files. Link against the libcef dynamic library and the libcef_dll_wrapper static library.
- Copy libraries and resources to the output directory.
Windows Build Steps
- Compile the libcef_dll_wrapper static library.
- Compile/link cefsimple.exe.
- Required source code files include: cefsimple_win.cc, simple_app.cc, simple_handler.cc, simple_handler_win.cc.
- Required link libraries include: comctl32.lib, shlwapi.lib, rcprt4.lib, libcef_dll_wrapper.lib, libcef.lib, cef_sandbox.lib. Note that cef_sandbox.lib (required for sandbox support) is a static library currently built with Visual Studio 2015 Update 3 and it may not compile with other Visual Studio versions. See comments in cefsimple_win.cc for how to disable sandbox support.
- Resource file is cefsimple.rc.
- Manifest files are cefsimple.exe.manifest and compatibility.manifest.
- Copy all files from the Resources directory to the output directory.
- Copy all files from the Debug/Release directory to the output directory.
The resulting directory structure looks like this for 2526 branch:
Linux Build Steps
Js Mac Address
- Compile the libcef_dll_wrapper static library.
- Compile/link cefsimple.
- Required source code files include: cefsimple_linux.cc, simple_app.cc, simple_handler.cc, simple_handler_linux.cc.
- Required link libraries include: libcef_dll_wrapper.a, libcef.so and dependencies (identified at build time using the “pkg-config” tool).
- Configure the rpath to find libcef.so in the current directory (“-Wl,-rpath,.”) or use the LD_LIBRARY_PATH environment variable.
- Copy all files from the Resources directory to the output directory.
- Copy all files from the Debug/Release directory to the output directory.
- Set SUID permissions on the chrome-sandbox executable to support the sandbox. See binary distribution build output for the necessary command.
The resulting directory structure looks like this for 2526 branch:
Mac OS X Build Steps
- Compile the libcef_dll_wrapper static library.
- Compile/link/package the “cefsimple Helper” app.
- Required source code files include: process_helper_mac.cc.
- Required link frameworks include: AppKit.framework.
- App bundle configuration is provided via “cefsimple/mac/helper-Info.plist”.
- Load the CEF Framework as described here.
- Compile/link/package the “cefsimple” app.
- Required source code files include: cefsimple_mac.mm, simple_app.cc, simple_handler.cc, simple_handler_mac.mm.
- Required link frameworks include: AppKit.framework.
- App bundle configuration is provided via “cefsimple/mac/Info.plist”.
- Load the CEF Framework as described here.
- Create a Contents/Frameworks directory in the cefsimple.app bundle. Copy the following files to that directory: “cefsimple Helper.app”, “Chromium Embedded Framework.framework”.
The resulting directory structure looks like this for 2526 branch:
Updated
Can HTML, CSS and Javascript really be used to build Desktop Applications?
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 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.
Electron Combines Chromium and NodeJS into a single Runtime. This enables Us to run the HTML, CSS and Javascript Code as a desktop application.
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.
Electron Forge makes the above things much easier.
It provides template applications with angular, react, vue and other frameworks. This avoids the extra manual setups needed.
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.
Ensure you have NodeJS installed. It can be installed from here
Install Electron Forge Globally using the following command
Use the following command to create your application
simple-desktop-app-electronjs is the name of the application
The above command will take some time to run.
Once it finishes running, Start the application using the following commands
This should open up a window like the one shown below
The application created has a folder structure. Here I will be mentioning some of the important things in this folder structure
package.json
It has information about the application you are creating, it has all the dependencies needed for the app and also it has some scripts. Some of the scripts are already pre configured and you can add new scripts as well.
The config.forge path has all the configurations which are specific to ElectronJS. For example make-targets is used specify the target make files for various platforms like Windows, Mac or Linux.
Also package.json has 'main': 'src/index.js' which indicates that src/index.js is the starting point of the application
src/index.js
According to package.json, index.js is the main script. The process which runs the main script is known as the Main Process. So Main Process runs the index.js script.
The main process is used to display GUI elements. It does this by creating Web Pages.
Each Web page created runs in a process called as renderer process
Main Process and Renderer process
The purpose of the Main Process is to create web pages using a BrowserWindow Instance.
The BrowserWindow Instance uses a renderer process to run each Web page.
Each App can have only one Main Process but can have many renderer processes
It is possible to communicate between the main and the renderer process as well. This will not be covered in this article.
Electron Architecture showing main and renderer process. The file names can vary
abcd.html is shown as a second webpage in the above architecture. But in our code we won’t be having a second web page.
src/index.html
index.js loads the index.html file into a new BrowerWindow Instance.
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.
Code in index.js explained
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
The above code snippet basically creates a BrowserWindow Instance and loads index.html into the BrowserWindow.
You would see app used often in the code. For example take the below code snippet.
app is used to control the applications’s event life cycle.
The above code snippet says that when the application is ready, load the first window.
Similarily app 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.
Writing the Code
Let us use the same application we used before and modify it slightly to create a temperature converter application.
First Let us install Bootstrap. Install bootstrap using the following command
Copy the following code into src/index.html
The above code does the following
- Creates a text box with id celcius. whenever anything is typed in this textbox, celciusToFahrenheit() function is called.
- Creates a text box with id fahrenheit. whenever anything is typed in this textbox, fahrenheitToCelcius() function is called.
- Whenever a new value is typed in celcius text box, the value in the fahrenheit text box displays the same temperature in fahrenheit
- Whenever a new value is typed in fahrenheit text box, the value in the celcius text box displays the same temperature in celcius
The 2 functions which do the temperature conversion are present in renderer.js
Create a file called renderer.js inside src. Copy the following code into it.
celciusToFahrenheit() function reads the value in celcius text box, converts it to fahrenheit and writes the new temperature into fahrenheit text box.
Open Mac App Via An Js Function Allows
fahrenheitToCelcius() function does the exact opposite of this.
Running the application
Run the application using the following command
This should display the following window. Try it out with different values.
Packaging the application
The command to package the application is
This command will take some time to run. Once it finishes check the out folder within the project folder.
I tested this in a windows machine. This creates a folder called simple-desktop-app-electronjs-win32-x64 inside out folder
So in the out/simple-desktop-app-electronjs-win32-x64 folder, the command creates an .exe file for this application. Clicking on the exe file automatically starts the desktop application.
The folder name simple-desktop-app-electronjs-win32-x64 can be broken down as appname-platform-architecture where
- appname = simple-desktop-app-electronjs
- platform = win32
- architecture = x64
When you run this command without any parameters, by default it packages for the platform which you are using for development
Let’s say you want to package for a different platform and architecture. Then you can use the following syntax
For example, in order to package for linux you can use the following command
This will create a folder called as simple-desktop-app-electronjs-linux-x64 inside out folder.
Creating a make File
In order to create a make file or an installer for the application, use the following command
This command will take some time to run. Once it finishes check the out folder within the project folder.
The out/make folder will have a windows installer for the desktop application.
When you run this command without any parameters, by default it creates the installer for the platform which you are using for development
Code
The code for this desktop application is available in my github repo
You now know how to create desktop applications using HTML, CSS and Javascript.
This article covered very basic concepts of electron and electron-forge.
To know more about them, you can checkout their documentation.