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

#react #electron #electronforge #typescript

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

Or if using npm,

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

After installation,

cd electron-with-react/

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

Or if using npm,

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

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.

yarn add react react-dom

Or if using npm

npm install --save react react-dom

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

So, it's Done????

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.

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.

<!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>

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>
);

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;

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

Now, You should see this screen.

Now we can say

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 😉