Setting Up Your Development Environment

Welcome to the exciting world of desktop application development with Electron! As web developers, you already possess a fantastic skillset that directly translates to building native desktop apps. This chapter will guide you through setting up your development environment so you can quickly get your first Electron app up and running.

Before we dive into writing code, we need to ensure you have the necessary tools installed. Electron apps are essentially web pages bundled into a desktop application, so our primary dependencies are Node.js and npm (Node Package Manager), which comes bundled with Node.js.

The first step is to install Node.js. If you don't have it already, head over to the official Node.js website (https://nodejs.org/) and download the LTS (Long Term Support) version for your operating system. The LTS version is recommended for most users as it's the most stable.

Once Node.js is installed, you can verify the installation by opening your terminal or command prompt and running the following commands:

These commands should output the installed versions of Node.js and npm, respectively. If you see version numbers, you're good to go!

Now that Node.js and npm are set up, we can create a new directory for our first Electron project. Navigate to your desired location in the terminal and create a new folder. Then, change into that directory.

Next, we'll initialize a new Node.js project within this directory. This will create a package.json file, which is crucial for managing your project's dependencies and scripts. You can run the following command and press Enter to accept the default settings, or you can provide your own answers.