Как открыть экран React с помощью Electron?

Question

У меня есть проект, в котором я делаю настольное приложение с Electron и использую React в качестве движка шаблонов. Но я не знаю, как открыть новый экран для React with Electron.

Это иерархия каталогов моего проекта: https://i.stack.imgur.com/RvI77.png

В моем основном -> index. js, у меня есть этот код, который является инициатором моего приложения:

'use strict'

import { app, BrowserWindow, ipcMain } from 'electron'
import * as path from 'path'
import { format as formatUrl } from 'url'
import { NOME_APLICACAO, ABRIR_TELA_DE_VENDAS } from '../utils/constants.js';


const isDevelopment = process.env.NODE_ENV !== 'production'

// global reference to login window (necessary to prevent the window from being garbage collected)
let loginWindow;
let vendaWindow;

function createLoginWindow() {
  const window = new BrowserWindow({ 
    title: NOME_APLICACAO,
    webPreferences: { nodeIntegration: true }
  });

  if (isDevelopment) {
    window.webContents.openDevTools()
  };

  if (isDevelopment) {
    window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`)
  }
  else {
    window.loadURL(formatUrl({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file',
      slashes: true
    }))
  }

  window.on('closed', () => {
    loginWindow = null
  })

  window.webContents.on('devtools-opened', () => {
    window.focus()
    setImmediate(() => {
      window.focus()
    })
  })

  return window;
}


// quit application when all windows are closed
app.on('window-all-closed', () => {
  // on macOS it is common for applications to stay open until the user explicitly quits
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // on macOS it is common to re-create a window even after all windows have been closed
  if (loginWindow === null) {
    loginWindow = createLoginWindow()
  }
})

// create main BrowserWindow when electron is ready
app.on('ready', () => {
  loginWindow = createLoginWindow()
})

И когда я запускаю проект, он открывает представление -> index. js screen, и index. js screen имеет следующий код:

import React from "react"
import ReactDOM from "react-dom"
import Login from "./component/loginView/Login"

ReactDOM.render(
    <Login />, 
    document.getElementById("app") 
)

Из того, что я узнал в своих исследованиях, представление -> 'index. js' необходимо для добавления файла. html в элемент который имеет идентификатор «приложение». Но, как вы можете видеть в моей иерархии каталогов, у меня нет ни одного файла. html. Итак, я не знаю, где к электрону добавляется индексный файл. js. Это мой первый вопрос.

Мой второй вопрос: как вы можете видеть, window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`) этой инструкции в main -> index. js достаточно, чтобы открыть представление -> index. js, и я не знаю, -как. Я хотел бы знать, как, потому что у меня есть другие страницы, такие как view -> vendaView. js, которые я хочу открыть в main -> index. js, но я не знаю, как его кодировать.

Я ценю любую помощь.

Answer 1

Вы сейчас работаете в развивающейся среде, поэтому электрон открывает http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}, когда вы бежите. Он не открывает ни один файл sr c, который вы написали. На самом деле, они не читаются браузером (в том числе электрон). В среде разработки, когда вы запускаете npm start или любую другую стартовую команду, она встраивает ваши исходные файлы в версию, читаемую браузером, и статически обслуживает порт process.env.ELECTRON_WEBPACK_WDS_PORT Электрон показывает, что содержимое на экране.

Вы можете подтвердить это открыв тот же URL в вашем браузере.

Если вы не в среде разработки, браузер должен открыть индекс. html встроенных файлов. Встроенные файлы читаются браузером. Поэтому я сомневаюсь, что конфигурация:

 pathname: path.join(__dirname, 'index.html')

не будет работать. Поэтому вы должны указать электрону открыть индекс встроенных файлов следующим образом:

pathname: path.join(__dirname, '../build/index.html')

Например: тег <Login/> вашего файла sr c не может быть показан в браузере, но когда ваш sr c построен, он заменен набором тегов с содержимым, которое может быть показано.

Большая часть функциональности Electron обеспечивается основными компонентами Chromium, Node.js и V8. ref: https://www.electronjs.org/blog/electron-6-0

Ваш индекс. js изменить состояние c служить, и созданный индекс, основанный на среде (dev или prod), будет открыт браузер Electron.