Run Your First Electron App

Now, let’s spin up the application locally.

gif of following the directions below

  1. Type npm start and press enter.

Your app should open up, successfully, with a string of text. Dev Tools will also be open on the right side, due to a setting that we added by default. Quit the app by pressing Ctrl + C in your Command Line Interface.

Tell me why

Dev Tools

You may be familiar with Chrome Developer Tools if you’ve ever built a web page. If you’re not, they’re a set of tools that allow you to see behind the scenes of what a browser displays, giving you visibility into the HTML, CSS, and Javascript that makes up a web application alongside a number of performance analysis tools.

When working in Electron, Dev tools is also available to you. Open it at any time by selecting “View” from the top level drop down menu of the application, then clicking “Toggle Developer Tools”, or use the shortcuts described in the official documentation.

Stuck? Open an issue in the repository for this class and mention @githubteacher for help from one of the GitHub trainers!