Getting started with Electron – make your first electron app.

Installations:

Well, the very first step would be installing the Node Js, after it has been installed open up cmd by pressing windows key + r and typing in cmd.

Install Electron globally from CMD using the command or you can go to the link for more details.

npm install electron -g

After the successful installation lets create a project folder and name it Hello World with the command.

mkdir firstElectron

You can choose any name you want, we will be proceeding with this name.Then navigate to the folder using command

cd firstElectron

Once we are in the folder we can now create our package.json including our electron dependency using the command

npm init

It will ask for the different information like version, name, author. Leave everything blank, but just filling up the Author and description. This must be fine for now.

Let it install the package and now we are ready to move to coding. Open up visual code editor( my fav ) by typing in the command

code .c

in the cmd panel. This should open up your visual code editor.

Code:

Now lets have a look at the package.json file, it should look something like below.

Now as we can see the name of the JS file is index.js here, so lets create a file called index.js for our logic by simply navigating to File -> New File. Then paste in the below code in the file and save it.

const elec = require("electron");
const app = elec.app;
const browserwindow = elec.BrowserWindow;

let mainWindow;
app.on("ready", () => {
  mainWindow = new browserwindow({
    width: 600,
    height: 600
  });
  mainWindow.loadURL("https://www.itsfaq.in/");
});

What does this mean?? It means we created a browser windows with the help of Electron library and we specified its height and width. We also told this browserwindow to load an URL “https://www.itsfaq.in/” with the help of loadURL() function.

So that when you run this it will open up a window and load the specified URL. Till now we have created the window but we need to tweak our package.json so that when we type npm start it should open up the window.

To do this open package.json and navigate to script node and change it as below

"scripts": {
    "start": "electron ."
  },

This should tell your npm to start the the electron we just created. So now go ahead and save your file and type in the below command in the cmd panel.

npm start

This should run your electron app and it should look something like this

Output:

Thats all folks !! We have done it. In the next article I ll sharing the steps to make this an windows executable file with the help of electron packager, Stay tuned !!

Comment down your queries if you face any, I will be more than happy to help or do tell me the experience of creating your electron first app.

NOTE: All the commands are in small case.