Skip to content

Latest commit

 

History

History
105 lines (98 loc) · 3.04 KB

electron-app.md

File metadata and controls

105 lines (98 loc) · 3.04 KB
Raw

Creating Electron App

Create project

mkdir my-electron-app && cd my-electron-app
npm init

Type main.js as entry point: instead of index.js
Disable tests by adding line to package.json

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

Install electron

npm install --save-dev electron

In the scripts field of package.json config, add a start command

{
  "scripts": {
    "start": "electron ."
  }
}

To launch app in development mode run start

npm start

Create index.html file

<!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'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

Create main.js file and add import CommonJS modules

const { app, BrowserWindow } = require('electron')

Add a createWindow() function that loads index.html into a new BrowserWindow instance

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

  win.loadFile('index.html')
}

Call createWindow() after the app module's ready event is fired.

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

Close app if all windows are closed

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

Liste activate event to create window if previous all were closed

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

To open Developer Tools at app lauchn add next line to createWindow function

win.webContents.openDevTools();

Add renderer.js file to improve sequre, performance and stability

window.onload = () => {                                                                 
    const button = document.getElementById('myButton');                                                                                                            
                                                                                        
    async function fetchData() {                                                                                                                        
      console.log("Button press");                                                                                                                 
    }                                                                                   
                                                                                        
    fetchButton.addEventListener('click', fetchData);                                   
};