Electron: Start to Finish

electron-codepen

Clone and run for a quick way to see Electron in action.

This is a minimal Electron application based on the Quick Start Guide within the Electron documentation.

Use this app along with the Electron API Demos app for API code examples to help you get started.

A basic Electron application needs just these files:

• package.json - Points to the app's main file and lists its details and dependencies.
• main.js - Starts the app and creates a browser window to render HTML. This is the app's main process.
• index.html - A web page to render. This is the app's renderer process.

You can learn more about each of these components within the Quick Start Guide.

Table of Contents

• Prerequisites
• How To Use
• Resources for Learning Electron

Prerequisites

• Install Git
• Get familiar with Git commands
• Install a text editor
• Install Node.js

Install Git

macOS

Mac users, while you probably already have a version of Git on your system, it may be out-of-date. You can download an updated installer package here.

Advanced users might consider installing the latest stable version of Git with Homebrew, e.g.:

brew install git

Windows

Git for Windows provides both Git and a Bash emulation environment to use Git on the command line.

Linux

While some Linux distributions come with a version of Git installed, it's often out-of-date. This guide has recommended commands to install Git with your distribution's preferred package manager.

Get familiar with Git commands

You'll want to know how to fork and clone a Git repository, and how to check out a branch.

If you need a refresher, consider exploring our free on-demand training.

Install a text editor

Perhaps consider Atom if you're looking for an awesomely hackable text editor for the 21st century!

Install Node.js

Q: Why do we need to install Node.js if Electron includes Node.js?

A: While Electron does include its own internal version of Node.js, what we'll install first includes npm, the Node Package Manager. NPM is what powers our dependency installation and build processes.

For all platforms, visit nodejs.org to download the installer package. For our purposes today, we recommend the "LTS" package.

For advanced users: if you later want to install multiple versions of node and npm on your system you can use tools like nvm or n.

Once you've got Node.js installed you will have the node and npm commands available in your terminal. You should be able to npm install packages now, without using sudo. If you see errors when installing packages with npm, you may need to fix your permissions.

How To Use

To clone and run this repository you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/satelliteworkshops/electron-codepen
# Go into the repository
cd electron-codepen
# Install dependencies
npm install
# Run the app
npm start

Note: If you're using Linux Bash for Windows, see this guide or use node from the command prompt.

Resources for Learning Electron

• electron.atom.io/docs - all of Electron's documentation
• electron.atom.io/community/#boilerplates - sample starter apps created by the community
• electron/electron-quick-start - a very basic starter Electron app
• electron/simple-samples - small applications with ideas for taking them further
• electron/electron-api-demos - an Electron app that teaches you how to use Electron
• hokein/electron-sample-apps - small demo apps for the various Electron APIs

License

CC0 1.0 (Public Domain)