Category: Electron

Create a basic project structure with Electron Forge


Electron is GitHub’s cross platform desktop application development tool powered by Nodejs , CSS and HTML.

Electron Forge

What is Electron forge ? Electron Forge is a programmer’s tools to help create , build electron application quickly as possible.

First up all you need to Install Nodejs and then install electron forge from terminal

npm install create-electron-app -g

Now you are ready to use the tools.

Basic Electron Project Setup

Let’s create a project with basic structure which includes

  • index.css
  • index.html
  • index.css
  • package.json
  • nodemodules

open your terminal and fire up

npm create-electron-app  myapp

It will take some time to generate files and you are ready to first run npm start

For more information and guide have a look at Official Site

 

 

javaScript

How to interact with input in Reactjs


How to handle state and event of input element in React apps

Create desktop version of a web app with Electron and Nodejs


Electron is Nodejs framework which let you build app with the notion of one code base. With electron you can create cross-platform desktop apps with JavaScript, HTML, and CSS. It is opensource project powered by the Github community. For more info on Electron on Official website

Using Electron we can build platform independent version of  Web app ( with out regenerating all the code again) . Some of the feature may not fully supported

In our example, create a app for Wikipedia.org. Lets get started.

Pre-requisites

For our project and all Electron projects , you should have the following

  • Nodejs (https://nodejs.org/en/)
  • Electron forge
  • Editor of any choice (choose between Atom and Visual code will be wise)

Head over https://nodejs.org/en/ and get the Nodejs which allow you use JavaScript libraries.

Install Forge

Electron forge help us to quickly create project with all file structure we needed. Lets install it

npm install create-electron-app -g

Now we can use create-electron-app to build app as follows

nmp create-electron-app myapp

run the app using the following command on terminal

cd myapp
npm run start

The default app launches a new html page as application. We need website instead of the html page. Edit the following portion of index.js

  // and load the index.html of the app.
    mainWindow.loadFile(path.join(__dirname, 'index.html'));

As

 mainWindow.loadFURL('https://wikipedia.org');

Save the file ,run again and here is your app

Build executable

Now our app is almost ready , let build the executable which will be stored in output folder of our project.

npm run make

Optionally we can change application Name, Icon etc using the JSON package file.