CODEWITHSUNDEEP
javascriptnode.jsreactjselectron
Bruna Magrini
Bruna Magrini

Reputation: 19

How open a React's screen with Electron?

I have a project that I'm doing desktop application with Electron and using React as a Template Engine. But I don't know how to open a new screen to React with Electron.

This is the directory hierarchy of my project: https://i.sstatic.net/RvI77.png

In my main -> index.js, I have this code that is the init of my application:

'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()
})

And someway when I start the project, it opens view -> index.js screen, and index.js screen has this code:

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

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

From what I learned in my studies, the view -> 'index.js' needed to append a .html file in the element that has id "app". But as you can see in my directory hierarchy, I don't have any .html file anywhere. So, I don't know where the electron is appended the index.js file. This is my first question.

My second question is that as you can see, window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`) this instruction in main -> index.js is enough to open the view -> index.js, and I don't know-how. I would like to know how because I have other pages like view -> vendaView.js that I want to open in main -> index.js but I don't know how to code it.

I appreciate any assistance.

Upvotes: 1

Views: 1631

Answers (1)

Nilanka Manoj
Nilanka Manoj

Reputation: 3718

You are now running in a developing environment, so electron opens http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT} when you are running. It is not opening any src file you have written. Actually, they are not readable by a browser(includes electron too). In the development environment when you run npm start or whatever starting command it builds your source files into browser readable version and serves statically at the port process.env.ELECTRON_WEBPACK_WDS_PORT electron shows that content on the screen.

You can confirm it by opening the same URL in your browser.

When you are not in the development environment, the Browser should open the index.html of built files. Built files are readable by a browser. So, I doubt that configuration :

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

will not be worked. So you have to tell electron to open index of built files as follows:

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

As an example: <Login/> tag of your src file cannot be shown in the browser, but when your src is built, it is replaced by a set of tags with content that can be shown.

Much of Electron's functionality is provided by the core components of Chromium, Node.js, and V8. ref : https://www.electronjs.org/blog/electron-6-0

Your index.js alter static serve and the built index based on the environment(dev or prod) to be opened by the browser of Electron.

Upvotes: 2

Related Questions