🚀 Como utilizar essas ferramentas em conjunto, para desenvolvimento preciso e ágil de aplicações desktop.
Para criar uma base de projeto como esse, considere:
A base do projeto é um app em ReactJs, o projeto deve ser inicializado dessa forma.
Todos os seguintes pacotes devem ser adicionados ao projeto:
electron @electron/remote concurrently wait-on cross-env electron-builder electron-is-dev react-router-dom
Adicione aos scripts os seguintes comandos:
"electron:serve": "concurrently -k \"cross-env BROWSER=none yarn start\" \"yarn electron:start\"",>"electron:build": "yarn build && electron-builder -c.extraMetadata.main=build/main.js",>"electron:start": "wait-on tcp:3000 && electron .",
Estes scripts são essenciais no ciclo da nossa aplicação, desde o desenvolvimento até o build.
- Dentro do package.json são necessárias mais algumas alterações:
-- Build:
"build": {
"extends": null,
"appId": "com.example.electron-cra",
"files": [
"dist/**/*",
"build/**/*",
"node_modules/**/*",
"package.json"
],
"directories": {
"buildResources": "assets"
}
},
-- Configurações:
"main": "public/main.js",
"homepage": "./",
Deve ser criado um main.js onde o Electron será executado para controlar nossa aplicação.
O local padrão e escolhido para esse projeto é dentro da pasta public. O arquivo main.js é responsável por criar nossa janela e gerir os processes e eventos ElectronJs.
É possível utilizar um preload.js em conjunto, mas apenas em casos necessários e/ou específicos de uso.
No nosso caso, é o comando que inicia a aplicação desktop juntamente com a aplicação web, unindo ElectronJs e ReactJs com o concurrently.
Na nossa aplicação, o comando electron:build é responsável por gerar a build e o instalador. Sem muitas configurações e usando apenas as dependências Node.