Electron JS apps are the easiest way to create a cross-platform GUI application. It is widely used for desktop applications such as Steam, VSCode, Spotify, and Slack. In this article, we will deep dive into the topic and learn about the various components which create electron applications. This electron js tutorial will help you create a basic application quickly.
Overview
Electron.js is a popular open-source framework that enables developers to create cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript. With Electron, developers can build desktop apps for Windows, macOS, and Linux using a single codebase, making it an efficient and cost-effective solution for creating desktop apps.
Electron works by bundling a web application inside a native wrapper, allowing it to access system-level resources like file systems, network connections, and other hardware. This means that developers can leverage the power of web technologies to create desktop applications that are as functional as native applications.
Now, that you have basic information about the Electron app, let’s get into the process to build an app with Electron. js. We have listed simple steps to quickly build an Electron.js application.
Step 1: Install Node.js
Install Node.js and npm (Node Package Manager) on your machine.
Step 2: Create a browser window
After installing node.js and npm, it's time to set up a simple npm project. The npm will help us to manage the packages our project depends on. Plus, these packages serve as a handy place to keep building scripts.
Here, npm will ask a lot of questions and then create a package.json file based on the answers we provide. Now, the below command will ensure that we do not publish this package as a library by accident and hence set the private property in the config:
This enables npm to refuse to publish the pancake, even if we asked it to.
After setting up npm, we’ll use it:
The update package.json will help us to add electron as a dependency and also build a package-lock.json.
The minimal electron script looks something like the below mentioned:
This will allow Electron to run, and once it is ready, we will create a window to display a webpage that we want. After this, we need to add this file in src/electron/index.js. The plan is for a folder structure that looks like the below structure:
We now need to run the electron application that looks like this:
But, typing that out every time is cumbersome, so we'll define an npm script in the package. json to store the command:
When we run npm scripts, npm adds./node modules/.bin/ to the path, so we don't need to specify that portion. We can now execute our electron program with npm start.
Introducing TypeScript
TypeScript is an open-source programming language developed by Microsoft that is a superset of JavaScript. It adds static typing and other features to the JavaScript language. TypeScript provides optional static typing, which helps catch errors before code is executed, making it easier to build and maintain large-scale applications.
TypeScript is designed to be compatible with existing JavaScript code and run on any platform that JS desktop app can run on, including web browsers, servers, and desktop and mobile devices.
Step 1: Install TypeScript
Step 2: Create a simple built script
Finally, you need to rename it from index.js to index.ts.
We can now execute npm run build to check how the files in./src are mapped to./out. We'll also need to modify the start script so that electron runs./out/electron/index.js rather than our typescript code.
After all of that work, we arrive at the punchline:
A simple fix and our Electron js app will finally start running:
Mode is still convenient to use and hence change a second npm script for this:
The actual command which runs is tsc --watch:
No comments:
Post a Comment