Desktop it!

How to convert JavaScript code to .exe file

Here is a simple step by step instruction how to make Windows desktop application out of your JavaScript files:

1) Download and install Node.Js
2) Go to drive C:\ and create folder electron
3) In electron folder create a folder with your project name, for example notetoself.
4) In the end it should be like
C:\electron\notetoself
5) Open usual windows cmd and type:
cd c:\electron\notetoself
You will appear in your folder.
6) Now type:
npm init
7) Say OK or input your values to request for version, program name, description and so on until it asks about entry point.
8) When cmd asks you about entry point name, change the entry point from index.js to main.js
. Continue to answer questions or just push Enter for OK.
9) Now you will see that in C:\electron\notetoself folder a file was created named package.json.
10) Type:
npm install electron --save-dev --verbose
11) Now you will see that in your folder a node_modules folder appeared. It weighs about 120 mb.
12) Go to C:\electron\notetoself and create there my_code folder. Put in this folder all you application files (html, js and css).
13) Go to C:\electron\notetoself and create there main.js file with the following content:


const electron = require("electron");
const app = electron.app;

const path = require("path");
const url = require("url");

const BrowserWindow = electron.BrowserWindow;

var mainWindow;
app.on("ready", function() {
	mainWindow = new BrowserWindow({
		width: 1024,
		height: 768,
		backgroundColor: "#2e2c29"
	});

	mainWindow.loadURL(url.format({
		pathname: path.join(__dirname, "my_code", "notetoself.html"),
		protocol: "file:",
		slashes: true
	}));
	
});

app.on("window-all-closed", function() {
  if (process.platform != "darwin") {
      app.quit();
    }
 });

14) String pathname: path.join(__dirname, "my_code", "notetoself.html"), should be changed according with your application main html file name and its placement. For example here in my folder C:\electron\notetoself I have a separate my_code folder only for my application. And notetoself.html is my main application file. So the path to notetoself.html file will be:
In Windows C:\electron\notetoself\my_code\notetoself.html
In Node.js path.join(__dirname, "my_code", "notetoself.html")
If your html file with application is in the main folder C:\electron\notetoself then pathname string would be like this:
pathname: path.join(__dirname, "notetoself.html"),
More about how to create path with path.join command google for Node.js path.join() Method.
15) Now open the package.json file, find “script” key which we should change like this:


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

16) Now type:
npm start
and see how your beautiful app starts.
17) Good. Now it’s time to make .exe file out of your application
18) Type:
npm install electron-packager
19) After installation finished type:
electron-packager .
Pay your attention to the dot in the end of the command
20) After command finishes the win32-x64 folder appears in C:\electron\notetoself. It’s your application. You can send it whoever you want. To start the app just run the .exe file in this folder. Enjoy=))
21) If you got the error electron-packager . is not a command in step 19, try to install electron-packager with global attribute like this
npm install -g electron-packager
and try again.
22) If you need a 32 bit version use attribute --arch=ia32 like this
electron-packager . --arch=ia32

Electron logo