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

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

  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 .

  {
    "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

  <!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

  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();
    }
  });
  
  
  

  c Packaging electron app https://www.electronjs.org/docs/latest/tutorial/tutorial-packaging

• run following

  npm install --save-dev @electron-forge/cli
  npx electron-forge import
  

• then in package.json, following scripts will be added

    //...
    "scripts": {
  	"start": "electron-forge start",
  	"package": "electron-forge package",
  	"make": "electron-forge make"
    },
    //...
  

• to package use npm run package  

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

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

  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;
  });
};