Electron Projects

Electron Projects

by Denys Vuika
Released November 2019
Publisher(s): Packt Publishing
ISBN: 9781838552206

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

A project-based guide to help you create, package, and deploy desktop applications on multiple platforms using modern JavaScript frameworks

Key Features

  • Use your web development skills with JavaScript and Node.js to build desktop applications for macOS and Windows
  • Develop desktop versions of popular mobile applications that are similar to Slack, Spotify, and more
  • Design desktop apps with automatic updates and real-time analytics capabilities

Book Description

The Electron framework allows you to use modern web technologies to build applications that share the same code across all operating systems and platforms. This also helps designers to easily transition from the web to the desktop. Electron Projects guides you through building cross-platform Electron apps with modern web technologies and JavaScript frameworks such as Angular, React.js, and Vue.js.

You'll explore the process of configuring modern JavaScript frameworks and UI libraries, real-time analytics and automatic updates, and interactions with the operating system. You'll get hands-on with building a basic Electron app, before moving on to implement a Markdown Editor. In addition to this, you'll be able to experiment with major JavaScript frameworks such as Angular and Vue.js, discovering ways to integrate them with Electron apps for building cross-platform desktop apps. Later, you'll learn to build a screenshot snipping tool, a mini-game, and a music player, while also gaining insights into analytics, bug tracking, and licensing. You'll then get to grips with building a chat app, an eBook generator and finally a simple digital wallet app.

By the end of this book, you'll have experience in building a variety of projects and project templates that will help you to apply your knowledge when creating your own cross-platform applications.

What you will learn

  • Initialize Node.js, Node Package Manager (NPM), and JavaScript to set up your app
  • Integrate Phaser with Electron to build a simple 2D game
  • Improve app quality by adding an error tracking system and crash reports
  • Implement group chat features and event handling capabilities using Firebase
  • Integrate a WordPress-like rich-text editor into your app
  • Build Electron applications using a single codebase

Who this book is for

This book is for JavaScript developers who want to explore the Electron framework for building desktop apps. Working knowledge of modern frontend JavaScript frameworks and Node.js is assumed. No prior knowledge of desktop development is required.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Electron Projects
  3. Dedication
  4. About Packt
    1. Why subscribe?
  5. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. Release cycle note
    4. To get the most out of this book
      1. Download the example code files
      2. Conventions used
    5. Get in touch
      1. Reviews
  7. Building Your First Electron Application
    1. Technical requirements
    2. What is Electron?
    3. Preparing a development environment
      1. Installing Visual Studio Code
        1. Installing Visual Studio Code for Ubuntu
      2. Setting up the environment for macOS
        1. Installing Git on macOS
        2. Installing Node.js on macOS
      3. Setting up the environment for Ubuntu Linux
        1. Installing Git on Ubuntu
        2. Installing Node.js on Ubuntu
      4. Setting up the environment for Windows
        1. Installing Git on Windows
        2. Installing Node.js on Windows
          1. Verifying the installation
    4. Creating a simple application
    5. Packaging for multiple platforms
      1. Packaging for macOS
      2. Packaging for Ubuntu
      3. Packaging for Windows
    6. Summary
  8. Building a Markdown Editor
    1. Technical requirements
    2. Configuring a new project
    3. Integrating the editor component
    4. Fitting the screen size
    5. Integrating the application menu
      1. Creating a custom menu item
      2. Defining menu item roles
      3. Providing menu separators
      4. Supporting keyboard accelerators
      5. Supporting platform-specific menus
      6. Configuring the application name in the menu
      7. Hiding menu items
      8. Sending messages between processes
        1. Introducing editor-event
        2. Sending confirmation messages to the main process
        3. Sending messages to the renderer process
        4. Wiring the toggle bold menu
      9. Saving files to a local system
        1. Using the save dialog
      10. Loading files from a local system
      11. Creating a file menu
    6. Adding drag and drop support
    7. Supporting automatic updates
      1. Testing automatic updates
    8. Changing the title of the application
    9. Summary
  9. Integrating with Angular, React, and Vue
    1. Technical requirements
    2. Building an Electron application with Angular
      1. Generating our Angular project scaffold
      2. Integrating the Angular project with Electron
      3. Configuring Live Reloading
        1. Why test in the browser?
      4. Setting up production builds
      5. Setting up conditional loading
      6. Using Angular Material components
        1. Modifications made by installing Angular Material
        2. Adding the Material Toolbar component
      7. Angular routing
    3. Building an Electron application with React
      1. Generating a React project
      2. Live reloading
      3. Setting up production builds
      4. Setting up conditional loading
      5. Using the Blueprint UI toolkit
        1. Adding an application menu
        2. Adding routing
        3. Final touches
    4. Building an Electron application with Vue.js
      1. Creating a Vue configuration file
      2. Live reloading
      3. Production builds
      4. Setting up conditional loading
      5. Adding routing
      6. Configuring Vue Material
        1. Creating an application toolbar
    5. Summary
  10. Building a Screenshot Snipping Tool
    1. Technical requirements
    2. Preparing the project
    3. Configuring frameless windows
      1. Additional options for macOS
        1. Using the hidden titleBarStyle
        2. Using the hiddenInset titleBarStyle
        3. Using the customButtonsOnHover titleBarStyle
    4. Transparent windows
    5. Making application windows draggable
    6. Adding a snip toolbar button
    7. Using the desktopCapturer API
    8. Calculating the primary display size
    9. Generating and saving a thumbnail image
    10. Resizing and cropping the image
    11. Testing the application's behavior
    12. Integrating with the system tray
    13. Hiding the main application window on startup
    14. Registering global keyboard shortcuts
    15. Summary
  11. Making a 2D Game
    1. Technical requirements
    2. Configuring a game project
    3. Running a Hello World example
    4. Rendering background images
    5. Preventing window resizing
    6. Rendering a sprite
    7. Scaling sprites
    8. Handling keyboard input
    9. Flipping sprites based on their direction
    10. Controlling sprite coordinates
    11. Controlling sprite speed
    12. Summary
  12. Building a Music Player
    1. Technical requirements
    2. Creating a project scaffold
    3. Exploring the music player component
      1. Downloading music files
      2. Providing basic player setup
        1. Using AmplitudeJS elements
        2. Implementing the global play button
        3. Implementing the global pause button
        4. Implementing the global play/pause button
      3. Styling buttons
    4. Exploring the playback control buttons
      1. Stop button
      2. Mute and unmute buttons
      3. Volume buttons
    5. Implementing a song progress bar
    6. Displaying music metadata
    7. Improving the user interface
    8. Reviewing the final structure
    9. Summary
  13. Analytics, Bug Tracking, and Licensing
    1. Technical requirements
    2. Understanding analytics and tracking
    3. Creating your own solution or using an existing service
      1. Creating your own analytics services
      2. Using third-party analytics services
    4. Using Nucleus for Electron applications
    5. Creating a new Nucleus account
    6. Creating a new project with tracking support
    7. Installing the Nucleus Electron library
    8. Inspecting real-time analytics data
      1. Identifying users
    9. Disabling tracking per user request
    10. Verifying real-time user statistics
    11. Supporting offline mode
    12. Handling application updates
    13. Loading global server settings
    14. License checking and policies
      1. Creating a new policy and license
      2. Checking licenses in the application
    15. Summary
  14. Building a Group Chat Application with Firebase
    1. Technical requirements
    2. Creating an Angular project
      1. Configuring the Electron Shell
    3. Creating a Firebase account
    4. Creating a Firebase application
    5. Configuring Angular Material components
      1. Adding a Browser Animations module
      2. Configuring the default theme
      3. Adding the Material Icons library
      4. Adding a navigation bar
      5. Testing the application with the material toolbar
    6. Building a login dialog
      1. Implementing the Material interface
      2. Supporting error handling
      3. Preparing the chat component placeholder
    7. Connecting the login dialog to Firebase Authentication
      1. Enabling the sign-in provider
      2. Creating demo accounts
      3. Integrating the Login dialog with Firebase
    8. Configuring the Realtime Database
      1. Creating demo groups
    9. Rendering the group list
      1. Testing real-time updates
    10. Implementing the group messages page
    11. Displaying group messages
      1. Improving query performance
    12. Sending group messages
      1. Updating the message list interface
      2. Ideas for further enhancements
    13. Verifying the Electron Shell
    14. Summary
  15. Building an eBook Editor and Generator
    1. Technical requirements
    2. Creating the project structure
      1. Generating a new React application
      2. Installing the editor component
      3. Testing the web application
      4. Integrating with the Electron shell
    3. Updating the code to use React Hooks
    4. Controlling keyboard shortcuts
      1. Loading files
      2. Saving files
    5. Integrating with the application menu
    6. Setting up the book generator
      1. Installing Docker
      2. Running the Pandoc container
      3. Sending documents to the main (Node.js) process
    7. Invoking Docker commands from Electron
      1. Sending the markdown text to the Node.js process
      2. Saving the markdown text to the local drive
    8. Generating PDF books
    9. Generating ePub books
    10. Summary
  16. Building a Digital Wallet for Desktops
    1. Technical requirements
    2. Generating the project scaffold with React
    3. Integrating the Ant Design library
    4. Setting up a personal Ethereum blockchain
    5. Configuring the Ethereum JavaScript API
    6. Displaying Ethereum Node information
      1. Getting node information
      2. Rendering node information in the header
    7. Integrating with the application menu
    8. Rendering a list of accounts
    9. Showing our account balance
    10. Transferring Ether to another account
    11. Packaging the application for distribution
    12. Summary
  17. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Electron Projects
  • Author(s): Denys Vuika
  • Release date: November 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781838552206