Getting started with Electron.js

✍ Scribed by Andres Cruz Yoris

• Year: 2023
• Tongue: English
• Leaves: 162
• Category: Library

✦ Synopsis

This book is for anyone who wants to start developing with Electron.js; No prior knowledge of other jаvascript frameworks is required, although you should know basic Node.js development, as well as HTML, CSS, and jаvascript.

Electron.js is a web framework with which we can create cross-platform (non-native) desktop applications that work on Windows, MacOS and Linux, with a web wrapper using jаvascript, HTML and CSS and without the need for native development experience.

This book is for anyone who wants to start developing with Electron.js; No prior knowledge of other jаvascript frameworks is required, although you should know basic Node.js development, as well as HTML, CSS, and jаvascript.

For those who want to learn about the framework and create their first desktop applications.
For those people who want to learn something new, learn about a framework that doesn't have much documentation.
For people who want to improve a skill, want to grow as a developer, and want to continue to climb their path in web development.
For those who want to learn or improve a skill and with this, increase their chances of employment or to carry out a personal project.

This book has a total of 7 chapters and consists of explanations and practices:

1. We will give the first contact with Electron, creating a minimal application with which we will know the flow and basic structure of the framework and with this, know its possibilities.
2. We are going to know the key modules that Electron.js provides us in a more theoretical than practical way, therefore, when using them later, you will already have a reference to them.
3. We are going to create the bases of a chat type application, which, although it will not have real functionality, will allow us to experiment with some modules provided in the Electron API.
4. We are going to generate an application for production and with this, generate its executables.
5. We are going to create a basic text editor type application and with this, learn about the first integrations with Electron.js; the application will have options to customize the text in formats and save and open files.
6. We are going to create a To Do application or tasks, for it we will use Vue.js, Express.js, Axios and MySQL as main technologies in its development.
7. We are going to work in a better way with the development mode in the application, we will know how to configure the environment variables and packages to make the main process reload every time changes are started in said process.

✦ Table of Contents

Getting started with Electron.js
Tweet about the book!
About the Author
Copyright
Table of Contents
Chapter 1: Chat application, building the first application in Electron.js
What is Electron?
About Electron
Technical requirements
Create an app in Electron
Sample application
Create a detail page
Bootstrap 5
Install Bootstrap 5
Define columns
Application debugging in Chrome
Web design
Contacts
Chat
Text's box
Create contacts based on an array of objects
Create chats based on an array of objects
Chapter 2: Main modules in Electron
Enable integration with Node
Communication between processes through events
Interprocess Communication: Send messages
Main Process to Render Process
Render process to main process
Events and messages
Introduction to menus in Electron
Custom options
Predefined roles
Keyboard shortcuts: Shortcut
Windows
Windows identifier
Additional windows
Static methods for working with windows
Close windows
Chapter 3: Chat application, communication with Electron.js
Communication between processes
Upload contacts and chats
Load contacts by selection
Chapter 4: Build the application for production
Chapter 5: Editor application
Editor app and inter-process communication
menu structure
Create and open files
menu options
Chapter 6: Tasks app with Vue
Prepare the environment
Vue Router
Instalation
Project settings
Component Creation
Configure Electron.js
Basic task CRUD with Vue
List
Create tasks
Delete tasks
Edit tasks
Using Electron.js modules from Vue
Basic Task CRUD with Vue and Electron.js
List
Rest CRUD operations
Create task
Edit task
Delete task
Electron.js and Electron DB
Install ElectronDB
Scheme to use
List
Create task
Edit task
Delete task
Configure a Rest API on Node with Express
Install required dependencies
Configure the Rest API
Configure CORS
List
Configure Electron DB
Create task
Edit task
Delete task
Reload the listing
Configure the Rest Api with Express and MySQL
Install dependencies in the project
Create SQL
Create connection
Get all records
Create task
Edit task
Delete task
Extra: Protect Rest Api by request origin
Conclusion
Basic user module
Create SQL
Register a user
Login
Window to register
Login window
Messages and redirects
Close windows
Authentication token
Register and consume the auth token from a file
Obtain data from the user authenticated by the token
Send event to main window when authenticating user
Detect wrong login
Sign off
Include Bootstrap 5 in the project in Vue
Container
List
Navbar
Form
Login and Registration window
Token handling
Debug mode in routes
Registration and login links
Login and Cookies
Sign off
Check in
Build the app for production
Install Electron builder
Other services
Generate application build in Vue
Vue application on server
Application in Vue as part of the build
Chapter 7: Environment variables and reload in the main process
Environment Variables
Reload/reload in the main process
electron reloader
Nodemon
Electron reloader