Electron.js Book: Create your desktop applications for Windows, Linux or Mac with JS, HTML and CSS
Content Index
- What is Electron JS and why is it so popular for creating desktop apps?
- Real advantages and disadvantages
- Why learn Electron? (and who this book is for)
- Minimum requirements (you don't need to know Node in depth)
- What will you learn in this Electron JS book?
- Communication between processes (IPC Main/Renderer)
- Objective
- Who this book is for
- Book syllabus
- Modules
- Projects you will build step by step
- The core of the Electron.js book
- No prior knowledge of Node is necessary
- IMPORTANT
If you're looking for an Electron JS book that goes beyond the typical and really teaches you how to build professional desktop applications, you're in the right place. I've been working with Electron for years to create real projects, integrating everything from native JavaScript to Vue, Bootstrap, databases, and complete packages for Windows, Linux, and Mac.
In this article, I'll tell you exactly what the book is about, what you'll learn, and why Electron is still a brutal technology for web developers.
I also have free resources for the book on the Blog and the community/FREE book and book on the Academy website.
What is Electron JS and why is it so popular for creating desktop apps?
Electron JS is a framework that combines the power of Chromium with Node.js to allow us to create desktop applications using web technologies. In other words: if you already know HTML, CSS, and JavaScript, you already have the foundation you need to create a program with its own window, native menus, and operating system functions.
When I started working with Electron, something I always say is that the interesting thing is not the framework itself, but the ability to transform a web application into a desktop app with real functionalities, without rewriting everything from scratch.
How Electron works: Chromium + Node.js
Electron combines:
- Chromium → where your web interface is rendered.
- Node.js → where you can access operating system APIs.
- The result is an architecture divided into a main process (backend) and a renderer process (frontend). Later you'll see how we work with both.
Real advantages and disadvantages
Advantages:
- Cross-platform (Windows, Mac, Linux).
- You reuse your web knowledge.
- Large ecosystem of libraries.
- You can integrate frameworks like Vue or React.
- Allows access to native APIs.
Disadvantages:
- Higher resource consumption (each app runs its own mini-Chrome).
- Requires a good understanding of the flow between main and renderer.
- Even with its cons, I still choose it because it allows me to scale web apps I've already made and turn them into complete programs in record time.
Why learn Electron? (and who this book is for)
Electron is still one of the most relevant tools for building modern desktop applications. Figma, Discord, VS Code, and WhatsApp Desktop are made with this technology, and it's no coincidence.
When I prepared this book, I set out to make it useful both for those who want to improve their skills and for those who want to build their first desktop apps without suffering with overly complex frameworks.
Minimum requirements (you don't need to know Node in depth)
You don't need deep prior knowledge of Node, because I include the essentials in the book.
It is enough that you know HTML, CSS, JavaScript and understand basic programming concepts.
- Real cases where Electron stands out
- Internal applications for companies
- Offline tools
- Text editors
- Productivity applications (like the to-do app we do in the book)
- Apps with modern interfaces (chat-like UI, panels, dashboards)
What will you learn in this Electron JS book?
This is where this book differs from most: you will not only see theory, but we will build multiple real applications as we go.
Creation of windows, menus, dialogs and shortcuts
We start with the most essential:
- Custom windows
- Change titles dynamically
- Menus and submenus
- Keyboard shortcuts
- System dialogs (open files, save, alerts)
I remember when I did the first demo of dialogs: I took the opportunity to show why some blocking functions are so useful if you want to control the flow of the program.
Communication between processes (IPC Main/Renderer)
The most important step to mastering Electron is understanding how your windows communicate with the backend.
In the book we do exercises where we send data between windows and process it with promises, callbacks and events.
Integration of frameworks and libraries: Vue, Bootstrap, Tailwind and more
One of my favorite parts of the book is when:
- We create applications with Vue using Vue CLI
- We integrate them into Electron
- We add styles with Bootstrap, Vue Material, FontAwesome or Tailwind
In this book we will touch on the fundamentals to create desktop applications using web technologies, in such a way that we will create web applications to then give them the functionality of native desktop applications such as:
- The use of menus
- Export and install on Windows, Linux and Mac Operating Systems
- Keyboard shortcuts
- Window creation
- Change the window title
- Creation of dialogues
- Drag and Drop files
- What is Electron.js
Electron is a framework for Node that allows us to create desktop applications using web technologies through a Node project; It consists of two modules that would be the server side with Node and the client side that is simply a web browser based on the free software project of chromium.
Objective
This book is for anyone who wants to start developing with Electron.js; no prior knowledge of other JavaScript frameworks is required, although you should know basic Node.js development, as well as HTML, CSS, and JavaScript.
Who this book is for
This book is for anyone who wants to start developing with Electron.js; no prior knowledge of other JavaScript frameworks is needed, although you should know how to develop Node.js basically, as well as HTML, CSS, and JavaScript:
- For those who want to know the framework and create their first desktop applications.
- For those people who want to learn something new, to know about a framework that does not have much documentation.
- For people who want to improve a skill, want to grow as a developer and who want to continue climbing their path in web development.
- For those who want to learn or improve a skill and with this, increase their employment possibilities or to carry out a personal project.
Book syllabus
This book and book has a total of 7 chapters and consists of explanations and practices:
- We will make 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.
- We will get 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.
- 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.
- We are going to generate an application for production and with this, generate its executables.
- We are going to create a basic text editor type application and with this, get to know the first integrations with Electron.js; the application will have options to customize the text in formats and save and open files.
- We are going to create a To Do or tasks application, for it we will use Vue.js, Express.js, Axios and MySQL as main technologies in its development.
- 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 initiated in said process.
Modules
- Debugging and professional workflow
- We use development tools, debug mode, inspection, logs and shortcuts to speed up your workflow.
- How I integrate real projects in the book
- Many of the exercises are based on real apps that I have created, such as:
- The to-do app
- A simple text editor
- A chat-like interface using Vue
- This helps a lot to see how everything is integrated in a real project.
Projects you will build step by step
- To-do app
- An ideal project to understand IPC, windows and local storage.
- Chat-like app with Vue + Electron
- Here we combine Vue CLI, modern styles and communication between windows.
- Text editor
- A perfect exercise to understand dialogs, file saving and blocking processes.
- Integration of apps created with Vue CLI
- We transform an SPA into a functional desktop application.
Other technologies we work with:
- We work with Electron DB (local storage)
- We integrate MongoDB + Mongoose for real persistence
- This part usually opens many doors for those who want to use Electron professionally.
- Packaging for Windows, Linux and Mac
- Finally, we export the projects for the three operating systems.
You will see how to include static files, configure icons and generate installers.
The core of the Electron.js book
We start from the installation of the basic components that would be our Node and an editor that in our case will be Visual Studio Code.
Then we will create several web applications to know and learn the characteristics of Electron.js, applications with native JavaScript and we will also learn to include applications created in Vue through the Vue Cli in our electron.
We will learn to include packages or modules that are from Electron.js, such as Electron DB and also from third parties, that is, that are not specific to Electron, such as Bootstrap in its version 4, Vue Material, fontawesome and much more content.
We also exploit components of the framework itself, such as the passing of messages between modules, debug mode and demonstrations between functions based on promises with blocking ones, for example, to display a dialog.
The interesting thing about Electron is not the framework itself, but the fact that we have our web apps created and that we can easily export it to a desktop app and give it the functionalities of a desktop app and with this expand our applications to this type of platform.
No prior knowledge of Node is necessary
As I mentioned at the beginning, it is not necessary that you have knowledge of Node, only basic knowledge of programming, object-oriented programming and of book, have a computer, we have a review or introduction section to Node and we give you everything you need to start with this technology to then be able to create our desktop apps; here is the presentation of the book:
In this book you will learn to create cross-platform desktop applications using Electron.js, which is available for Windows, Linux or Mac; create menus and of book, the application itself that you are going to export for these operating systems.
We will create multiple applications to test various features of Electron.js; install packages to enhance development, manage a simple database schema, text editor and of book, we will integrate Vue with Electron.js in a single project.
The great thing about these tools like Electron.js is that you can use all your existing knowledge to develop your web applications, to create desktop applications; technologies with Vue, Bootstrap, Material Vue, native JavaScript (which we see in the book) and everything you know, you can use it with Electron.js.
We will create projects using Vue Cli and incorporate our Electron.js so that everything works together; we will extend the applications with plugins, either for Electron.js or for the web app that we are embedding in our Electron.js
IMPORTANT
In this book we are going to work with Electron.js; that you can see it as if it were the skeleton of a living being, that is, the one that maintains our app, but remember that the most important part, and the one that consumes the most time (and therefore consumes in the book) is the creation of the app as such, the web app, which we will create from scratch and integrate with Electron.js to give it the characteristics of a desktop application.
The book is currently in development...
I agree to receive announcements of interest about this Blog.
Learn to create cross-platform desktop applications with Electron.js from scratch. This course and book will guide you through 7 practical chapters to master Electron.js, even if you're a beginner. Create your first desktop app with JavaScript, HTML, and CSS!
Algunas recomendaciones:
Benjamin Huizar Barajas
Laravel Legacy - Ya había tomado este curso pero era cuando estaba la versión 7 u 8. Ahora con la ac...
Andrés Rolán Torres
Laravel Legacy - Cumple de sobras con su propósito. Se nota el grandísimo esfuerzo puesto en este cu...
Cristian Semeria Cortes
Laravel Legacy - El curso la verdad esta muy bueno, por error compre este cuando ya estaba la versi...
Bryan Montes
Laravel Legacy - Hasta el momento el profesor es muy claro en cuanto al proceso de enseñanza y se pu...
José Nephtali Frías Cortés
Fllask 3 - Hasta el momento, están muy claras las expectativas del curso