When I was searching for electron on web I found that in all most all the articles and video tutorials the authors are using text editors such as Atom, Visual Studio Code, etc, to develop electron applications.
So I was curious in finding out a way to develop electron apps using Visual Studio. (Not Visual Studio Code).
Getting started ...
"This post is suitable for those who have a some basic knowledge in Electron"
If you are using Visual Studio 2015 or below first you have to download and install Node.js Tools for Visual Studio.
After installing Node.js Tools for Visual Studio, you get the ability to create a new Node.js project.
(Unfortunately for me I can't run electron application using Visual Studio 2015. So I'm using Visual Studio 2017. When we are installing Visual Studio 2017 we can set Node.js Tools to install as well. So there is no need to install Node.js Tools separately for Visual Studio 2017)
Let's Start ☺
Create a Blank Node.js Console Application.
Your project structure will be like this.
When the project gets created you will get a app.js file and package.json file. In the package.json file you can see some fields such as name, version, main, etc. app.js is assigned to the main field. So app.js is the entry point of your electron app.
So now we have to install electron to our app. To install electron you have to add electron module to the "dependencies" section of the package.json file.
So now your package.json file will look like this,
{
"name": "nodejs-console-app1",
"version": "0.0.0",
"description": "NodejsConsoleApp1",
"main": "app.js",
"author": {
"name": "User"
},
"dependencies": {
"electron": "^1.4.13"
}
}
So now you have to save the package.json file in-order to install electron. Once you press ctrl+s electron module starts downloading.
After the electron module gets downloaded you can see the electron package under npm in the solution explorer. If it shows a Exclamation mark with a yellow background indicating missing, you have to right click on the electron package and select Install Missing npm Package(s). It will take some time. After it's done you can see node_modules folder in Solution Explorer. (If it is not displaying check whether you have clicked Show All Files button in Solution Explorer.)
Now you have only one more step to be done. Right click on the project name (not the solution name) and select properties.
You will get a window like this...
Now you have to set the Node.exe path to electron.exe which is installed under the folder node_modules/electron/dist/.
So now your Node.exe path will look something like this.
D:\MyWorks\Samples\NodejsConsoleApp1\NodejsConsoleApp1\node_modules\electron\dist\electron.exe
(Path changes according to the project's location)
So now you can add the code to the app.js file and add a index.html file (file having the name which you define in the app.js).
Finally you can Press F5 or Start the app. ;)
