🖥️프론트엔드/Electron.js

Electron - 초기 설정 및 실행

Janger 2022. 3. 27. 00:57
728x90

[설치]

npm init
npm i electron

 

[package.json]

{
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

 

[main.js]

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

Menu.setApplicationMenu(false); // 메뉴 비활성화

function createWindow(){
    let win = new BrowserWindow({
        frame: true,
        width: 600,
        height: 400,
        minWidth: 400,
        minHeight: 200,
        maxWidth: 700,
        maxHeight: 500,
        resizable: true,
        webPreferences:{
            nodeIntegration: true,
            contextIsolation: false,
            devTools: true           
        }
    });

    win.loadFile('./index.html');

}

app.on('ready', createWindow);

 

[index.html]

<html>
    <head>
        <title>window</title>
    </head>

    <body>
        
        <h1>Hello world!</h1>

    </body>
</html>

 

 

[실행]

npm start
728x90