How to Use Electron Fiddle

How to Use Electron Fiddle

What is Electron?

Electron is a program that allows you to build cross-platform apps using the basic coding languages that are used for web-development. Basic understanding of HTML, CSS, and Vanilla JavaScript will go a long way when it comes to developing an Electron App. By using Nodejs, Electron creates a chrome browser inside of a desktop app environment that can be quickly adapted for fast application development.

Full documentation for Electron as well as additional starter information can be found on the official website

What is Electron Fiddle?

Electron Fiddle creates a starter environment that is adapted to create electron app experiments. The program automatically renders an application source code and is a great way to get introduced to how Electron uses web technologies to create desktop applications.

The Fiddle application, when launched creates this unique and powerful environment.

Pre-rendered with your main.js file, render.js file, and index.html file, you have everything you will need to start creating your own desktop application.

From Fiddle, you can start an app from its built in terminal by choosing the run function at the top. As a result, you will end up with a new window. Electron includes a pre-formated index.html file that will look like the following image when launched.

You will still need to launch the fiddle app from your terminal. Our example was created on a Mac, and the terminal used was Hyper. If you are using Windows we suggest you use GitBash Terminal. If you are on Linux, use the standard terminal provided by the Linux system you have downloaded.

Both your terminal and Fiddle will have to be running since Fiddle is not set up to be its own independent app. Electron Fiddle is a tool that is designed to help you create and test small applications and run experiments.

How to Get Started With Electron Fiddle?

Getting started is simple and fast. There are three steps involved with getting the program up and running on your own computer today.

First Step: Get your own copy of Electron Fiddle

  • Download the zip file directly from GitHub here.
  • Download the npm pre-installed file created by Alizarin 9 and skip step 2

Second Step: Install npm

npm install

Third Step: Start App

npm start

Optionally, you can run steps two and three at the same time with the following command:

npm install && npm start

If installed correctly, you should see the app open on your desktop. The top navigation includes a start button that will run the script and open a new window.

A terminal will appear to display the run information and will allow you to stop the program with a similar button.

That’s all there is to it. Electron is rather simple to use and easy to understand. However, if you are new to npm, Node, and using Java Script for routing and rendering windows and pages, check out Alizarin 9’s Coding Resources to view more helpful tutorials and walkthroughs.

Happy hacking!

Leave a Reply

Your email address will not be published. Required fields are marked *