How to create desktop application with React.js and Electron.js
This post is about how to initiate Electron desktop application on top of React. Building desktop application with Electron is pretty good in that your React and JavaScript skills can be reused.
Even though demand for desktop applications decreases due to handy mobile and web applications, some applications still need to run on desktop. In my case, I decided to develop my own torrent client called “ts-torrent”.
I will not explain what React.js and Electron.js are because it may waste valuable time of most readers. If you are not familiar with them, just google them.
In this post, I would like to describe only how I succeed in implementing an application with React and Electron on my window desktop.
Create a React.js application with create-react-app.
I simply created a react app with command “create-react-app [your-app-name]”
I named my app “ts-torrent”
Install electron and other dependencies.
The dependencies needed are as follows.
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"electron-is-dev": "^1.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"devDependencies": {
"concurrently": "^5.3.0",
"electron": "^11.0.4",
"electron-builder": "^22.9.1",
"wait-on": "^5.2.0"
}The dependencies under “devDependencies” are only used in the dev-mode. Thus, you put -D tag when adding them.
The only dependency that runs on production is electron-is-dev, which let the computer know whether it is on dev-mode or prod-mode.
Create a folder “electron” at root and create a file “main.js” inside the folder.
Basically, we place electron on the front and react on the back. Then, we load react.js first and then run main.js(electron) pointing the react running on back.
The following code is for electron on the front.
We have the react code inside src/App.js so that we are not creating a new code for backend.
We get the App.js to run on http://localhost:3000 and then main.js to point to the server.
Modify package.json
Modify package.json as follows
//part of package.json"main": "./electron/main.js",
"homepage": "./",
"scripts": {
"dev": "concurrently \"npm start\" \"wait-on http://localhost:3000 && electron .\"",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dist": "yarn run build && electron-builder -w"
},
"build": {
"extends": null,
"directories": {
"buildResources": "public"
},
"target": "zip"
},
The whole package.json looks like this
We can run develop-mode with yarn run dev and we can build and create installation file with yarn run dist.
Keep in mind that the -w in dist means window. If the application was for Mac, replace -w with -m. If you want an application running on linux, replace -w with -l.
It’s all done. You are ready to run the application.
Run Development mode
yarn run dev implements development-mode. It runs App.js on browser at http://localhost:3000 and then run main.js in electron folder.
You can see the dev-version application runining on the computer after the yarn command.
In order to change the content, you modify code in ./src/App.js
After modifying the App.js, it will display
Create installation file
Suppose you finished development and are ready for production.
yarn run dist will build and create installation file inside dist folder. The two folders are automatically created by the yarn command.
If it is successful, you will see the two folders, “build” and “dist”, and the installation file(.exe) inside dist folder.
Double clicking the exe file will install the application on your computer.
This is it for starting application with React and Electron.
