#Electronjs with React

102 messages · Page 1 of 1 (latest)

wispy plank
#

main.js

const path = require('path');
const url = require('url');
const { app, BrowserWindow } = require('electron');

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  // Load the index.html of the app.
  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true,
    })
  );

  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
}

// 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', async () => {
  await waitOn({ resources: ['http://localhost:3000'] });
  createWindow();
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

royal sedge
#

you should start react-script, wait on localhost and then start electron

wispy plank
#

ok

#

still no work...

royal sedge
#

You can also separate this in multiple scripts if you want to make it more readable, for example:

"react-start": "react-scripts start",
"electron-start": "electron .",
"start": "concurrently \"yarn react-start\" \"wait-on http://localhost:3000/ && yarn electron-start\"",
wispy plank
#

ill try that

royal sedge
#

replace yarn with npm if you don't use yarn

wispy plank
#

ik

royal sedge
#

your mainWindow.loadURL() is wrong too, when in dev you should use the localhost and not the file

wispy plank
#

oo shoot

royal sedge
#

and you don't need this line await waitOn({ resources: ['http://localhost:3000'] });

wispy plank
#

still, it does not work

#

wait

#

it does not even run the other commands

#

so this is not electron related

royal sedge
#

oh wait

#

I know this problem

wispy plank
#

oh gr8

royal sedge
#

try again with tcp instead of localhost

wispy plank
#

tcp?

#

like this?

  mainWindow.loadURL('tcp:https://localhost:3000');
royal sedge
#

no I mean in the script

#

tcp:127.0.0.1:3000

#

instead of localhost

#

my bet is that you either have a problem with your hosts file or you're using NodeJS 17+

wispy plank
#

still no..

royal sedge
#

okay

#

hum

royal sedge
#

cna you add -v after wait-on to activate debug?

wispy plank
royal sedge
wispy plank
#

sure

royal sedge
#

the hosts file is a file on macOS

wispy plank
#

i've also asked in the concurrently support

royal sedge
#

I think the problem comes from wait-on

#

what version do you use?

#

And what version of node?

wispy plank
royal sedge
#

hu

#

there is no v8 for wait-on

wispy plank
#

ayo wth

royal sedge
#

are you sure you use the right package?

wispy plank
#

well there can't be two packages with the same name...

#

i'll reinstall

remote glen
#

its npm version

royal sedge
#

ohh ah ah

#

you're right

wispy plank
#

still same tcp error

#

after reinstalling

royal sedge
#

it could be a bug from node 18

wispy plank
royal sedge
#

but honestly I have no clue

remote glen
royal sedge
#

try to downgrade your version of node to 17

wispy plank
#

ok

wispy plank
remote glen
#

i think

#

script is wrong

#

"start": "concurrently \"yarn react-start\" \"wait-on http://localhost:3000/ && yarn electron-start\""

royal sedge
#

I've been using it for 5 years with no problem :/

#

but on Windows

remote glen
#

shoudnt it be \"wait-on http://localhost:3000/\"

#

?

#

he is on windows no?

royal sedge
#

Maybe, I don't know why but I assumed he was on macOS ^^

#

Which is stupid of me because there is a windows icon next to his name lol

wispy plank
royal sedge
#

I think

remote glen
#

thats because of trailing /

royal sedge
#

you put an extra /

#

lol

remote glen
#

need wait-on tcp:127.0.0.1:3000

royal sedge
#

tell me how you found it Timosh? I had to look into wait-on source code xD

remote glen
#

source code =/

royal sedge
#

ah ah

remote glen
#

then test it myself

royal sedge
#

nice ^^

wispy plank
#

so putting / make it work? on node v17

remote glen
#

remove it

#

wait-on tcp:127.0.0.1:3000

royal sedge
#

the fact that localhost doesn't work still means there is a problem because of Node though

wispy plank
#
GitHub

We ran into an issue with Node 18, were wait-on would wait indefinitely for a service to start, even though it was already started. Environment: Bitbucket Pipeline Node 18 image Azure Function App ...

#

i searched up and found that this might fix it, ill try tmrw

#

for node 18

remote glen
#

i am still on v16 =/

royal sedge
#

same

#

what error do you get now that you removed the trailing / ?

wispy plank
grave sparrow
#

this is how i do it with electron-forge + create-react-app:
"start": "start npm run start-forge & npm run start-cra",
"start-forge": "electron-forge start",
"start-cra": "set BROWSER=none&& react-scripts start",

this opens create-react-app in the visual studio code terminal and electron in a cmd (powershell?) popup terminal

#

and yes, the missing blank before && is correct

#

but you have to change ports for cra or forge, otherwise they use the same port and it will not work

wispy plank
# remote glen remove it

it works, the electron window opens up but its just blank... doesn't load localhost:3000...

  mainWindow.loadURL('https://localhost:3000');
wispy plank
remote glen
#

http

#

not https

wispy plank
#

Works now, tysm!

#

but one more thing

wispy plank
# remote glen http

i downgraded my nodejs to v16 so if i upgrade it to v18 it won't work right?

remote glen
#

dont know