Electron

Destaques

Onde é usada

• Editores de código e ferramentas para desenvolvedores
• Clientes desktop de chat e colaboração
• Aplicativos internos de empresas
• Levar um produto web existente para o desktop

Instalação

1. 1

   Preparar o Node.js

   O Electron é instalado e executado por meio do Node.js e do npm. Instale uma versão LTS do Node.js e confira se as duas versões aparecem.

   node -v && npm -v

   Copiar
2. 2

   Adicionar o Electron a um projeto

   Crie um package.json em uma pasta nova e instale o electron como dependência de desenvolvimento. Depois, defina o campo main como main.js e adicione um script start que execute electron .

   mkdir my-electron-app && cd my-electron-app && npm init -y && npm install --save-dev electron

   Copiar
3. 3

   Começar com o Electron Forge

   Para um projeto que já inclua empacotamento e publicação, use o comando de criação do Electron Forge, a ferramenta oficial. Dentro da pasta gerada, npm start abre o aplicativo.

   npm init electron-app@latest my-app

   Copiar

Seu primeiro programa

Abra sua primeira janela

main.js é o ponto de entrada do processo principal. Quando o aplicativo fica pronto, ele cria uma BrowserWindow de 800×600 e carrega o index.html da mesma pasta. No macOS, os aplicativos costumam continuar abertos depois que a última janela é fechada, por isso o aplicativo só encerra nas outras plataformas. Coloque um index.html simples ao lado de main.js e rode npm start.

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

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

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

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

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

npm init -y
npm install --save-dev electron
npm pkg set main=main.js scripts.start="electron ."
npm start

Ferramentas do dia a dia

Electron Forge

Ferramenta oficial completa para criar o projeto, rodar em desenvolvimento, empacotar, gerar instaladores e publicar.

electron-builder

Ferramenta de empacotamento muito usada para instaladores multiplataforma, assinatura de código e atualizações automáticas.

Electron Fiddle

Ambiente oficial de testes para escrever pequenos experimentos e executá-los em diferentes versões do Electron.

Playwright

Inicia seu aplicativo Electron para testes de ponta a ponta que controlam as janelas e avaliam código no processo principal.

Documentação oficial e recursos

• OficialElectron
• OficialElectron Documentation
• OficialElectron Forge
• AprenderElectron Tutorial
• AprenderElectron Fiddle
• ReferênciaBrowserWindow API
• ReferênciaElectron Security Checklist
• Comunidadeelectron/electron on GitHub

Linguagens

• TypeScriptTypeScript adiciona tipos estáticos ao JavaScript: encontra erros antes de o código rodar e facilita a manutenção de projetos grandes.
• JavaScriptJavaScript é uma linguagem de programação dinâmica, padronizada como ECMAScript, que roda em todos os navegadores e em ambientes como o Node.js.