Início rápido com Electron usando React

Crie seu aplicativo React

Organize seu aplicativo usando a cadeia de ferramentas Create React App . Digite o seguinte comando em seu terminal:

npx create-react-app my_electron_react_application

Seu aplicativo deve incluir os seguintes arquivos. Alguns arquivos adicionais em seu projeto, como CSS, trabalhador de serviço e arquivos de teste não estão incluídos abaixo.

.
|-- package.json
|-- package-lock.lock
|-- public
|   |-- index.html
|-- src
|   |-- App.js // renderer process
|-- |-- index.js // renderer process

Qualquer arquivo JS dentro do diretório src é executado em um renderer process.

Remova a dependência do web-vitals

Create React App versão 4.0+ inclui o web-vitals módulo. Como o 'web-vitals' foi projetado para funcionar com a Web e não com um ambiente Electron, a inclusão desse módulo pode levar a um erro "chunk runtime-main [entry] Cannot convert undefined or null to object" ao construir o aplicativo. Para evitar esse erro, execute o seguinte comando para desinstalar o pacote web-vitals .

npm uninstall web-vitals

Em seguida, exclua o arquivo reportWebVitals.js:

rm src/reportWebVitals.js

Por fim, remova as seguintes linhas do arquivo src/index.js:

import reportWebVitals from './reportWebVitals';
reportWebVitals();

Instale o CRACO para alterar sua configuração do Webpack

Para permitir que seu aplicativo funcione corretamente com o Electron, você precisa alterar a configuração do webpack. Por padrão, aplicativos criados via create-react-app usam um arquivo de webpack pré-configurado e oculto para o usuário final. A configuração padrão Create React App webpack não é compatível com Realm e você deve substituí-la. Você pode usar o CRACO para substituir esses valores padrão. Instale o CRACO com o seguinte comando:

npm install @craco/craco

Criar um arquivo de configuração CRACO

Para substituir os valores do webpack pré-configurados, crie um arquivo de configuração CRACO chamado craco.config.js na raiz do seu aplicativo. Adicione o seguinte a este arquivo:

const nodeExternals = require("webpack-node-externals");
module.exports = {
  webpack: {
    configure: {
      target: "electron-renderer",
      externals: [
        nodeExternals({
          allowlist: [/webpack(\/.*)?/, "electron-devtools-installer"],
        }),
      ],
    },
  },
};

O alvo está definido como " electron-renderer " para compilar seu aplicativo para ambientes de navegador para módulos integrados do Electron. O nodeExternals também é especificado para evitar que todos os node_modules sejam agrupados. A chave allowList no objeto passado para nodeExternals especifica uma lista de módulos a serem incluídos no pacote – no caso, as ferramentas de desenvolvimento do Electron e o Webpack. Para usar webpack-node-externals, execute o seguinte comando:

npm install webpack-node-externals --save-dev

Instalar Electron

Para adicionar Electron ao seu projeto, execute o seguinte comando:

npm install electron --save-dev

Crie seu arquivo de processo principal do Electron

O arquivo Electron main process pode ser considerado o ponto de entrada em seu aplicativo. Este arquivo é responsável por carregar o arquivo index.html do React App no BrowserWindow criado pela Electron.

Adicione o seguinte código a um novo arquivo denominado electron.js no diretório public:

const electron = require("electron");
const path = require("path");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: { nodeIntegration: true, contextIsolation: false },
  });
  // and load the index.html of the app.
  console.log(__dirname);
  mainWindow.loadFile(path.join(__dirname, "../build/index.html"));
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

Seu aplicativo agora deve incluir os seguintes arquivos. Alguns arquivos adicionais em seu projeto, como CSS, trabalhador de serviço e arquivos de teste não estão incluídos abaixo.

.
|-- package.json
|-- package-lock.lock
|-- craco.config.js
|-- public
|   |-- index.html
|   |-- electron.js // main process
|-- src
|   |-- App.js // renderer process
|-- |-- index.js // renderer process

Todos os arquivos JS no diretório src são executados no processo renderer . O Electron.js e quaisquer arquivos exigidos por ele são executados no processo principal.

Execute seu aplicativo

Para executar a sua aplicação, especifique uma página inicial e um ponto de entrada principal para Electron adicionando o seguinte ao seu ficheiro package.json :

"main": "public/electron.js",
"homepage": "./",

Por fim, adicione os seguintes scripts ao seu arquivo package.json:

"scripts": {
  "build": "craco build",
  "start": "electron ."
},

No seu terminal, execute npm run build e, em seguida, npm run start. Você deve ver o seguinte:

Instalar Realm

No terminal, use o seguinte comando para adicionar Realm ao seu projeto:

npm install realm

Use domínio no processo de renderização adicionando o seguinte ao topo do arquivo src/App.js (você também precisará importá-lo em qualquer arquivo em que escrever código usando Realm):

import Realm from "realm";