initial

joplin notion extension/Web Development/React/electron.md

@@ -0,0 +1,161 @@
+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;
+  });
+};
+```
+