Electron
Posted Updated techa minute read (About 176 words)

Electron

Refs

  1. Electron JS Docs

What and why

  • Electron is a framework for building desktop applications using JavaScript, HTML, and CSS.
  • By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required.

Chromium VS Chrome

  • Chrome is a web browser whereas Chromium is an open-source software project.
  • Chromium serves as a building ground for many other popular browsers.

A simplest Electron App

1
2
3
4
first-app
- main.js
- index.html
- package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// package.json
{
  "name": "myelec",
  "version": "1.0.0",
  "description": "Test",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^20.2.0"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// main.js
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--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>

First Electron App

Electron

https://blog-cdt1.vercel.app/2022/09/21/Electron/

Author

Chendongtian

Posted on

2022-09-21

Updated on

2023-08-04

Licensed under

#

Like this article? Support the author with

Comments

×