Okay, now it’s time to look into the src folder: ➜ src git: (master ) ls The third webpack file - is where any shared configuration between Node.js and Chromium is set to avoid duplication. That’s because Electron actually runs two JavaScript files: one for the Node.js part, called “main”, which is where it creates browser windows and communicates with the rest of the operating system, and the Chromium part called “renderer”, which is the part that actually shows up on your screen. We’ll skip over the node_modules and package.json, and before we peek into the src folder, let’s go over the webpack files, since there are three. When that’s done and we cd into that directory, this is what we see: ➜ scratchpad git: (master ) ls Running that command will take a little while as it sets up and configures everything from Git to webpack to a package.json file. Here’s how we can do that in one terminal command: $ npx create-electron-app scratchpad -template =webpack

Since we want to use Electron Forge and React, we’ll head over to the Forge website and look at the guide for integrating React.įirst off, we need to set up Electron Forge with the webpack template. Now let’s begin by setting up a new project. These browser windows run Chromium, and are referred to as the “renderer” part of Electron, because it’s the part that actually renders something to the screen.

This file is called the “main” process, and it’s responsible for anything operating-system related, and for creating browser windows. Electron applications are “managed” by a Node.js JavaScript file. Two important terms I’ll use below are “main” and “renderer”. We’ll also assume a working installation of Git. If that’s not the case, please head over to the official download page and grab the correct binaries for your system, or use a version manager such as nvm. This tutorial assumes that you have Node installed on your machine.

Npm create electron app