Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted March 16th, 2016
Introduction to Electron

What is Electron?

Electron is an open source Node.js framework that can be used to build applications for Windows, Linux and Mac. Electron has been used by many people and companies. Some examples of programs made with Electron is Atom, Slack, Visual Studio: Code, Docker and Discord.
At the moment of writing Electron (0.36.10) uses:
– node 5.1.1
– Chromium 47.0.2526.110

How to start with Electron?

Before you can start using Electron you have to make sure git-cli and Node.js are installed.

The easiest way to start with Electron is cloning the electron-quick-start repository of github. First navigate in the terminal to the folder where you want to create the project folder. Then execute the following command: git clone https://github.com/atom/electron-quick-start <project -name>.
After the repository has been cloned get in the newly created folder using: cd </project><project -name>. Then run npm install to install all needed packages (these can be found in package.json).
To see if everything is working like it should execute npm start. This command will built the application and should open a window. If this doesn’t work make sure that you are currently in the project folder.

Now the project is working we can look what is currently happening. Close the application and open the project folder in your favorite IDE.
First open package.json. Here you can change the name, description and some other information about your application. Notice that ‘main.js’ has been defined as main script and when you use npm start it executes electron main.js.
Now open main.js, this is, as we just saw, the file that is being executed when we start the application. First it creates some new constants and functions. When the app is being activated and mainWindow is still null it creates a new window by calling the createWindow function. By default it creates a window of 800*600, loads in the index.html file and opens the DevTools.

Now you can start making your application with JavaScript, HTML and CSS the way you would normally design a website.

Posted by Stefan Janssen

Leave a Reply

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