How to start to make your first Electron js app

Let’s go to the point. First of all you must download and install NodeJS. After it’s installed, you’re ready to start to make new project.

Open your Command Prompt, in Windows for example. Go to any folder/directory. Make new folder for your project, and go inside it. Then run this command:

npm init -y

Then

npm i –save-dev electron

Edit your auto generated package.json file to be look like this:

{
  "name": "tinyhtmlwriter",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^12.0.9"
  }
}

Then make an index.html file, simply like this:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>New Project</title>
	</head>
	
	<body>
		<p>Hello world!</p>
	</body>
</html>

Then make main.js file like this one:

const { ipcMain, app, BrowserWindow } = require('electron')

function createWindow () {
	const win = new BrowserWindow({
		width: 1280,
		height: 720,
		webPreferences: {
			nodeIntegration: true,
			enableRemoteModule: true,
		}
	})

	win.loadFile('index.html')
	win.webContents.openDevTools();
	
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
	app.quit();
});

app.on('activate', () => {
	if (BrowserWindow.getAllWindows().length === 0) {
		createWindow()
	}
})

ipcMain.on('quitprogram', (evt, arg) => {
	app.quit();
});

That’s all. You’ve generated your new project files. To start the program, type this command in your Command Prompt:

npm start

To build your program as Windows executable, check out this post: https://thirteenov.ciihuy.com/how-to-build-your-electron-js-app-as-windows-executable-for-windows/

To build it for Mac, check out this post: https://thirteenov.ciihuy.com/how-to-build-your-electron-js-for-mac/

Post Views: 411