TABLE OF CONTENTS
I. Introduction
II. Prerequisites
III. Setting up the Development Environment
IV. Creating the User Interface
V. Building the Application Logic
VI. Packaging and Distributing the Application
VII. Debugging and troubleshooting
VIII. Conclusion
INTRODUCTION
Hey there fellow humans! As a front-end web dev I've always been fascinated by the internal workings of desktop apps. And can you blame me? The idea of crafting a file interface or desktop homepage with code is like a big brain puzzle just waiting to be solved. So naturally, I decided to dive deeper into the world of desktop development and feed my craving for knowledge.
During my research, I discovered Electron JS, an open-source framework that enables developers to build desktop apps using web development technologies. The framework runs on Chromium and Node.js and supports JavaScript, HTML, and CSS. The best part? It allows developers to build cross-platform desktop applications that function on Mac, Windows, and Linux operating systems. This blew my mind! So I did what any normal developer would do: I tinkered with the newly discovered technology!
This article covers everything you need to know about Electron JS, from building a fully functional desktop application to packaging and distributing it to the public. Whether you're new to desktop application development or looking to expand your skills, this article is a valuable resource for you. By the end of it, you'll have a solid understanding of how to use Electron JS to create and distribute your own desktop applications.
PREREQUISITES
To easily follow this article, it is recommended that you already know the following;
- HTML
- CSS
- JavaScript
SETTING UP THE DEVELOPMENT ENVIRONMENT
To get started, you will need a code editor. I will be using VSCode editor, but you can use any editor that you're comfortable with. Follow these steps to set up your environment;
I. Install Node.js and npm (Node Package Manager) on your machine, if they aren't already installed. You can download them from the
IX. Update your package.json file with the script below.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
This script tells npm to start the Electron application by running the electron command and passing in the current directory "." as an argument.
X. Start your Electron application using the following command:
npm start
This command will spin up your application and load the index.html file you created earlier on the screen. If all goes well, your screen should display "Hello world" like the image below.
ADDING FORMATTING FEATURES
What's a text editor without the ability to format text? In this section, you are going to be adding formatting functionality to the project.
Text bolding
To add this feature to this application, you need to add a button to the interface to trigger the event. In your index.html file, update the code by adding the following:
<body>
<div class="wrapper">
<textarea id="editor" cols="60" rows="25"></textarea>
<div class="button-container">
<button id="openBtn">Open</button>
<button id="saveBtn">Save</button>
<button id="bold-btn"><b>B</b></button>
</div>
</div>
<script src="./renderer.js"></script>
<link rel="stylesheet" href="style.css" />
</body>
The newly created button will be used as bold button. To do this, in the renderer.js file, add an event listener for the bold button and update the text area accordingly:
const boldBtn = document.getElementById('bold-btn');
boldBtn.addEventListener('click', () => {
const start = editor.selectionStart;
const end = editor.selectionEnd;
const selectedText = editor.value.substring(start, end);
const boldText = `<b>${selectedText}</b>`;
const newText = editor.value.substring(0, start) + boldText + editor.value.substring(end);
editor.value = newText;
});
This code listens for the click event on the bold button, gets the selected text in the text area, wraps it in a <b> tag to make it bold, and updates the text area with the new text.
Syntax highlighting
To implement an advanced feature like syntax highlighting, you are going to need an external library called Prism.js. Here's how to use it:
I. Update your index.html file with the Prism library.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-okaidia.min.css" rel="stylesheet"/>
This code adds the prism.js library to the HTML file, so as to make it accessible in the project.
II. In your renderer.js file, update your code by using the Prism.highlight() method to apply syntax highlighting to your text editor:
editor.addEventListener('input', () => {
const code = editor.value;
const highlightedCode = Prism.highlight(code, Prism.languages.javascript, 'javascript');
editor.innerHTML = highlightedCode;
});
This code listens for input events on the text editor, gets the code in the editor, uses Prism.js to highlight the code with JavaScript syntax, and then updates the editor with the highlighted code.
III. To check your highlighted code, create an empty paragraph in your index.html file:
<p id="paragraph"></p>
IV. Add the highlighted code inside the paragraph:
editor.innerHTML = highlightedCode;
paragraph.innerHTML = highlightedCode;
Your editor should look like the image below.
.
II. Create a file called electron-builder.yml in the root directory of the project and add the following code to it:
appId: com.example.myapp
productName: My App
win:
publisherName: My Company
target: nsis
signingHashAlgorithms: ['sha256']
certificateFile: path/to/certificate.pfx
certificatePassword: mypassword
mac:
category: public.app-category.developer-tools
identity: My Company
entitlements: path/to/entitlements.plist
entitlementsInherit: path/to/entitlements.plist
III. Replace the appId, productName, publisherName, certificateFile, and certificatePassword with the appropriate values.
IV. For macOS users, create an entitlements file (.plist) that specifies the permissions the application needs to run. Learn more about entitlements files to learn all about the partner program.
II. Generate a code signing certificate using a tool like OpenSSL or Visual Studio. This certificate will be used to sign the application package. Refer to the sub-section about code signing above.
III. Create a Windows app package by using the msix configuration in the electron-builder.yml file. Use the code below:
appId: com.example.myapp
productName: My App
win:
target: msix
certificateFile: path/to/certificate.pfx
certificatePassword: password
IV. Sign the app package with the code signing certificate using the SignTool utility. Use the following code:
signtool sign /a /t http://timestamp.digicert.com /f path/to/certificate.pfx /p password MyApp.msix
V. Submit the app package to the Microsoft Store through the Microsoft Partner Center portal. The app will undergo a review process before being published.
Linux OS
The Linux OS distributes their application using the Snap store. Follow these steps to get started on the distribution:
I. Create a snap package for the application by using the snap configuration in the electron-builder.yml file. Use the code below:
appId: com.example.myapp
productName: My App
linux:
target: snap
II. Install the Snapcraft CLI tool and run the snapcraft command in the application directory to create a snap package. Use the code below:
sudo snap install snapcraft --classic
snapcraft
III. Upload the snap package to the Snap Store using the Snapcraft CLI tool. Use the code below:
snapcraft login
snapcraft push myapp_1.0_amd64.snap --release=edge
IV. The application will undergo automated tests before being published to the Snap Store. Once published, users can find and install the application from the Snap Store.
DEBUGGING AND TROUBLESHOOTING
Debugging is an important part of the software development process. A framework or library is not useful if it cannot be easily debugged and Electron applications are no exception. Luckily, the debugging process in an Electron application is fairly straight-forward mostly because they are not using a new technology. Follow the steps below to debug and troubleshoot Electron applications :
Use the developer tools: Electron provides a powerful set of developer tools that can help you debug and troubleshoot your application. You can open the developer tools by pressingCtrl+Shift+IorCmd+Option+I. The developer tools include a console, a debugger, and other tools that can help you identify and fix issues in your code.
Check the application logs: Electron applications generate log files that can provide valuable information about errors and exceptions. You can view the logs by opening the console or by using a tool likeelectron-log.
Use the remote debugger: The remote debugger allows you to debug your application from a separate process or machine. To use the remote debugger, you need to start your Electron application with the--remote-debugging-portflag, and then connect to it using a tool like Chrome DevTools.
Check the system requirements: Electron applications have certain system requirements, such as specific versions of Node.js and Chromium. Make sure that your application is running on a supported platform and that all dependencies are installed correctly.
Use error handling and logging: Proper error handling and logging can help you identify and troubleshoot issues in your code. Make sure that your application handles errors gracefully and logs relevant information about errors and exceptions.
CONCLUSION
In this user guide, we have made a deep dive into the Electron JS framework, and successfully built a fully functional text-editor in the process. We covered the basics of setting up a development environment for creating a text editor desktop application using Electron JS. We also explored more advanced features such as implementing keyboard shortcuts, using third-party libraries and frameworks, and packaging and distributing the application to various app stores.
As with any software development project, debugging and troubleshooting are essential parts of the process. We have discussed some tips and techniques for debugging and troubleshooting Electron applications, including using the developer tools and checking the application logs.
Overall, Electron JS is a versatile and powerful framework that can be used to create a wide range of desktop applications. With the knowledge and skills gained from this user guide, you can confidently create your own desktop applications using Electron JS and take advantage of its many features and benefits. Happy coding!
SOCIAL SHARE CARD GENERATOR