DEV Community

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

Posted on • Updated on

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

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 the exciting enhancements that React 18 brings to the table. From installation and project setup to integrating cutting-edge features into your applications, I've got you covered.

For creating beautiful looking desktop app with Electron and React we'll be using Electron Forge - A complete pipeline for creating and shipping Electron app. It also provide an easy way to setup React with Electron.

Let's go step by step -

  • Create a new directory for the project.
  • Open same project directory created in step 1 in VS Code.
  • Open Terminal in Vs Code and first setup the Electron App with Webpack -


yarn create electron-app electron-with-react --template=webpack


Enter fullscreen mode Exit fullscreen mode

Or if using npm,



npm init electron-app@latest my-new-app -- --template=webpack


Enter fullscreen mode Exit fullscreen mode

After installation,



cd electron-with-react/


Enter fullscreen mode Exit fullscreen mode

After creating the electron app, now let's setup the React. Let's first setup babel



yarn add --dev @babel/core @babel/preset-react babel-loader


Enter fullscreen mode Exit fullscreen mode

Or if using npm,



npm install --save-dev @babel/core @babel/preset-react babel-loader


Enter fullscreen mode Exit fullscreen mode

Set up the babel-loadermodule with the React preset in webpack.rules.js:


module.exports = [
// ... existing loader config ...
{
test: /.jsx?$/,
use: {
loader: 'babel-loader',
options: {
exclude: /node_modules/,
presets: ['@babel/preset-react']
}
}
}
// ... existing loader config ...
];


> _Finally, Let's install **React**_.

Enter fullscreen mode Exit fullscreen mode

yarn add react react-dom

**Or if using npm**
Enter fullscreen mode Exit fullscreen mode

npm install --save react react-dom


- After doing everything. Your directory should look something like this. 

!['Directory structure after installing the packages'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqf7c8y2biksefbhdo51.png)




**_So, it's Done????_**

!['jerry saying no gif'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d4yn9eloc1z90fyc7wf.gif)

**_Still something is left. Let's continue_**

- Now create two new files inside the src directory.
  `src/App.jsx` and `src/index.js`. Why we created **index.js** 
 I'll tell you soon.

- Now your directory should look something like this. 


!['directory structure after creating files'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxbctsu9wcgkb1a04tzb.png)

_Now here is something where the Electron Forge documentation still lack's till today when I am writing this article and needs to be updated. If you follow them then you'll be surely getting some error and your react app will not load. But we are not going to wait for that update. Let's continue..._

_We have to first modify our `index.html` file. Copy the below code and replace with your `index.html` content._


```html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Electron With React</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>


Enter fullscreen mode Exit fullscreen mode

Since I am following similar directory of React app that's why we created one extra file in the above steps which is src/index.js

Now copy paste the below content inside index.js



import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./app.jsx";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);



Enter fullscreen mode Exit fullscreen mode

Also copy paste the below content inside the App.jsx



import React from "react";

function App() {
  return (
    <div>
      <h1>πŸ’– Hello World!</h1>
      <p>Welcome to your Electron application.</p>
    </div>
  );
}

export default App;


Enter fullscreen mode Exit fullscreen mode

Now, import the index.js inside renderer to make sure your react app is visible to you.




import "./index.css";
import "./index.js";

console.log(
  'πŸ‘‹ This message is being logged by "renderer.js", included via webpack'
);



Enter fullscreen mode Exit fullscreen mode

All done. Now just one more command and our will be up and running. Now just copy and hit this command in your terminal.



yarn start


Enter fullscreen mode Exit fullscreen mode

Now, You should see this screen.

'app running image'

Now we can say

'relax_gif'

Thankyou for you time in reading this article. If you face any issue feel free to ask and also if you want more article on Electron, React, NextJs. Feel free to comment below.

Thankyou πŸ’
Navdeep Mishra πŸ˜‰

Top comments (13)

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
 
mklestil 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
 
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
 
anni profile image
Anietie Brownson

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

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.