161 lines
3.7 KiB
Markdown
161 lines
3.7 KiB
Markdown
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();
|
|
}
|
|
});
|
|
|
|
|
|
```
|
|
|
|
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`
|
|
|
|
|
|
**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
|
|
```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;
|
|
});
|
|
};
|
|
```
|
|
|