electron
https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app

- Make a folder and open terminal and when in project directory execute this 
  `npm init`
- Now create a file `main.js` and print  something like `hello world` 
	```js
	console.log('hello world')
	```
- Now to make `main.js` entry point. have this following configuration in `package.json`. main property have to point to main.js and start script have to be `electron .`
	```json
	{
	  "name": "electron-app",
	  "version": "1.0.0",
	  "description": "",
	  "main": "main.js",
	  "scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"start": "electron ."
	  },
	  "keywords": [],
	  "author": "",
	  "license": "ISC",
	  "devDependencies": {
		"electron": "^33.2.0"
	  }
	}

	```
- Start app with `npm run start`. this will output 	hello world. no window will open as its only cli
 

**GUI**
- to serve html file `index.html`
	```html
	<!doctype html>
	<html>
		<head>
			<meta charset="UTF-8" />
			<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
			<meta
				http-equiv="Content-Security-Policy"
				content="default-src 'self'; script-src 'self'"
			/>
			<meta
				http-equiv="X-Content-Security-Policy"
				content="default-src 'self'; script-src 'self'"
			/>
			<title>Hello from Electron renderer!</title>
		</head>
		<body>
			<h1>Hello from Electron renderer!</h1>
			<p>👋</p>
		</body>
	</html>

	```

- in main.js
	```js
	const { app, BrowserWindow } = require("electron");

	const createWindow = () => {
	  const win = new BrowserWindow({
		width: 800,
		height: 600,
		title: "SilverBullet",
		autoHideMenuBar: true,

		icon: "images/silverbullet.jpg",
	  });

	  // win.loadFile("index.html");
	  win.loadURL("http://localhost:3001");
	};

	app.whenReady().then(() => {
	  createWindow();
	});

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


	```
&nbsp;
c
**Packaging electron app**
https://www.electronjs.org/docs/latest/tutorial/tutorial-packaging
- run following
	```bash
	npm install --save-dev @electron-forge/cli
	npx electron-forge import
	```
- then in package.json, following scripts will be added
	```json
	  //...
	  "scripts": {
		"start": "electron-forge start",
		"package": "electron-forge package",
		"make": "electron-forge make"
	  },
	  //...
	```
- to package use `npm run package`
&nbsp;

**Context menu**
https://stackoverflow.com/questions/71698892/how-to-apply-electron-context-menu-in-window
&nbsp;

**Open file in default app instead of new window**
- In electron if there are assets or files and we wanna open then we have to use shell object
  and web-contents setWindowOpenHandler to intercept opening of new window to intercept them and direct it to default file opener
  https://www.electronjs.org/docs/latest/api/web-contents#contentssetwindowopenhandlerhandler
```js
  const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    title: "SilverBullet",
    autoHideMenuBar: true,

    icon: "images/silverbullet.jpg",
  });

  // win.title = "Silverbullet";

  // win.loadFile("index.html");
  win.loadURL(`http://${hostname}:${PORT}`);

 

  win.webContents.setWindowOpenHandler((details) => {
    console.log("detected");
    // shell.openExternal(url); // open link in default app
    // console.log(__dirname, url);
    // shell.openPath(path.join(__dirname, ur));
    // shell.openPath(winDetails.url);

    // const urlString = decodeURI(winDetails.url).replace(
    //   `http://${hostname}:${PORT}/`,
    //   "file://",
    // );
    const urlString = details.url.replace(
      `http://${hostname}:${PORT}/`,
      `file://${datadirname}/`,
      // "",
    );

    console.log(urlString);
    shell.openExternal(urlString);

    return null;
  });
};
```