DEV Community

Cover image for Electron with React: The Ultimate guide to create cross platform desktop apps easily

Electron with React: The Ultimate guide to create cross platform desktop apps easily

Navdeep Mishra on August 10, 2023

Welcome to this comprehensive guide where we will embark on a journey to master the art of setting up Electron and React using Electron Forge 6 and...
Collapse
 
nathanfiscaletti profile image
Nathan Fiscaletti •

The yarn create electron-app <app-name> command fails on windows if your user directory has a space in it. My %USERPROFILE% is C:\Users\Nathan Fiscaletti. Due to this, I get this error:

yarn create electron-app kbs-electron --template=webpack
yarn create v1.22.22
[1/4] Resolving packages...
warning create-electron-app > @electron-forge/cli > @electron-forge/core > @electron/rebuild > node-gyp > make-fetch-happen > cacache > @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-electron-app@7.3.1" with binaries:
      - create-electron-app
'C:\Users\Nathan' is not recognized as an internal or external command,
operable program or batch file.
error Command failed.
Exit code: 1
Command: C:\Users\Nathan Fiscaletti\AppData\Local\Yarn\bin\create-electron-app
Arguments: kbs-electron --template=webpack
Directory: C:\git-repos
Output:

info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.
Enter fullscreen mode Exit fullscreen mode
Collapse
 
navdeepm20 profile image
Navdeep Mishra •

Yes, this error still persists with Yarn. Though npm works well here.

Collapse
 
tintildev profile image
Martin Klestil •

Thanks for the article, exactly the explanation I was looking for.
Great job

PS: import App from "./app.jsx"; must mean import App from "./App.jsx";

Collapse
 
elidotco profile image
Ebenezer Ametepeh •

hello please mine showed up empty

Collapse
 
navdeepm20 profile image
Navdeep Mishra •

The article is updated. You can try now.

Collapse
 
anni profile image
Anietie Brownson •

Nice article. I've been thinking of working with ElectronJS
Will definitely try it out

Collapse
 
elidotco profile image
Ebenezer Ametepeh •

hello please you left out a step
you have to import the index.js in the render.js

Collapse
 
navdeepm20 profile image
Navdeep Mishra •

Yes, Sorry for this. I have updated the article. Thankyou.

Collapse
 
sameerbrito profile image
Sameer Brito Villanueva •

mine also shows empty

Collapse
 
navdeepm20 profile image
Navdeep Mishra •

Yes, sorry for this. I actually forgot to import the index.js file inside the renderer. I have updated the article now. Thankyou.

Collapse
 
parzival_computer profile image
Parzival •

Good job.

Collapse
 
zainab_rasheed_05c46eb955 profile image
Zainab Rasheed •

helpful article thank you but do you have any idea if someone is using nextjs then which file can act as a main file (like in react you are using index.js).

Collapse
 
navdeepm20 profile image
Navdeep Mishra •

Not sure. I have to try that. Never used NextJs with Electron. Also I guess no need to. Major benefit of using NextJs is optimizing load time. Since your application is gonna serve locally. No need.

Collapse
 
spartan1404 profile image
Carlos Raúl Robinson Thompson •

Hello and thanks for the article. How can i build this app? Do i just install and run electron builder?