Empacotamento e distribuição para plataformas desktop
Crie instaladores para macOS, Windows e Linux usando electron-builder, com assinatura de código e atualização automática.
Empacotamento e distribuição para plataformas desktop é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
Configuração do electron-builder
electron-builder é a ferramenta padrão para empacotar aplicações Electron em instaladores distribuíveis. Sua configuração fica no package.json, sob a chave "build", especificando metadados da aplicação (appId, productName), caminhos dos ícones e formatos de destino por plataforma.
Destinos de compilação por plataforma
electron-builder oferece suporte ao macOS (dmg e zip), ao Windows (instalador NSIS) e ao Linux (AppImage e deb). Você pode direcionar várias plataformas em um único comando de compilação ou configurar a integração contínua para compilar cada plataforma em seu próprio ambiente de execução nativo, garantindo a melhor compatibilidade.
Assinatura de código para macOS
O macOS exige a assinatura de código com um certificado de desenvolvedor da Apple para que o Gatekeeper permita que os usuários abram a aplicação sem um aviso de segurança. O electron-builder lê seu certificado no sistema Chaves do macOS durante o processo de compilação e assina todos os binários automaticamente.
Notarização para macOS
Além da assinatura de código, as versões modernas do macOS também exigem notarização — o envio da aplicação ao serviço de notarização da Apple, que procura malware e emite um comprovante. O electron-builder pode automatizar a notarização por meio do electron-notarize, e os usuários do macOS 10.15 ou posterior não poderão abrir a aplicação sem ela.
Assinatura de código para Windows
O Windows exige um certificado Authenticode de uma autoridade certificadora confiável (CA) para que o SmartScreen confie no seu instalador. Sem a assinatura, os usuários veem o aviso "O Windows protegeu o computador". Os certificados de Validação Estendida (EV) eliminam o aviso imediatamente, enquanto os certificados OV padrão constroem confiança gradualmente.
Estrutura dos artefatos de compilação
Após uma compilação bem-sucedida, o electron-builder grava os instaladores específicos de cada plataforma no diretório dist/. Você encontrará o DMG ou zip para macOS, o .exe do NSIS para Windows e o AppImage ou .deb para Linux, além de um manifesto de atualização automática latest.yml (ou latest-mac.yml).
Ícones da aplicação
As aplicações Electron precisam de ícones em formatos específicos de cada plataforma: um PNG de 512x512 para Linux, um arquivo ICNS (com várias resoluções) para macOS e um arquivo ICO (com várias resoluções) para Windows. O electron-builder pode gerar todos os formatos a partir de um único PNG de 1024x1024 usando a opção --icon.
Atualização automática com electron-updater
O pacote electron-updater integra-se ao electron-builder para fornecer atualizações automáticas. Publique suas compilações no GitHub Releases ou no S3, e o electron-updater poderá verificar se há atualizações na inicialização, baixar a atualização diferencial em segundo plano e solicitar que o usuário reinicie.
Verificação de atualizações na inicialização
Chame autoUpdater.checkForUpdatesAndNotify() em main.js depois que a aplicação estiver pronta. O electron-updater busca o manifesto latest.yml no destino de publicação, compara as versões e, se houver uma atualização disponível, faz o download e exibe uma notificação nativa quando ela estiver pronta para ser instalada.
O arquivo ASAR
O electron-builder agrupa os arquivos JavaScript da sua aplicação em um único arquivo ASAR (semelhante a um arquivo tar) para distribuição. Isso melhora o desempenho da inicialização ao reduzir as consultas ao sistema de arquivos e torna mais difícil, embora não impossível, examinar diretamente o seu código-fonte.
Desempacotamento de módulos nativos do ASAR
Os módulos nativos do Node.js (arquivos .node) não podem ser carregados de dentro de um arquivo ASAR — eles precisam ser desempacotados no sistema de arquivos. Configure asarUnpack no electron-builder para listar os padrões dos módulos nativos; isso os coloca no diretório app.asar.unpacked, ao lado do arquivo.
Requisito de notarização do macOS
Por que a notarização é necessária para distribuir aplicações no macOS, além da simples assinatura de código?
Resumo da lição
Distribuir uma aplicação Electron envolve configurar os destinos do electron-builder, assinar o código para macOS (com notarização) e Windows (com Authenticode) e, opcionalmente, configurar atualizações automáticas com electron-updater. O arquivo ASAR agrupa a aplicação para distribuição, enquanto os módulos nativos são desempacotados separadamente. Um processo sólido de integração e entrega contínuas executa essas etapas automaticamente para cada plataforma.
Perguntas Frequentes
A aula “Empacotamento e distribuição para plataformas desktop” é grátis?
Sim — o texto completo de “Empacotamento e distribuição para plataformas desktop” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Empacotamento e distribuição para plataformas desktop”?
Crie instaladores para macOS, Windows e Linux usando electron-builder, com assinatura de código e atualização automática. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Empacotamento e distribuição para plataformas desktop”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Arquitetura do Electron: processos principal e de renderização
- Configurando React com Electron
- Comunicação IPC entre processos
- Empacotamento e distribuição para plataformas desktop