React app to Desktop app in 5 mins (2021)

You don’t have a lot of time and want to get a working desktop application out of your existing react app that you already built in the shortest time possible ? Look no further.

I’m just going to list the steps down below for you to get it running, the official documentation can guide you further on the API and options.

1. In your project, install electron and electron-builder as dev-dependencies. Run npm i -D electron electron-builder in the terminal inside your project folder. (At the time of writing, the latest version of electron builder had some build issues so had to run npm i -D electron-builder@22.10.4)
2. In the root of your project folder, create a file called main.js and post the following code in it.

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require("path");
const url = require("url");
let win;

function createWindow() {
// Create the browser window.
win = new BrowserWindow({ width: 1300, height: 900, show: false });
// and load the index.html of the app.
win.loadURL(
url.format({
pathname: path.join(__dirname, "./build/index.html"),
protocol: "file:",
slashes: true,
setFullScreen: true,
})
);
splash = new BrowserWindow({
width: 800,
height: 450,
transparent: true,
frame: false,
alwaysOnTop: true,
});
splash.loadURL(
url.format({
pathname: path.join(__dirname, "public/splash.html"),
protocol: "file:",
slashes: true,
})
);
// if main window is ready to show, then destroy the splash window and show up the main window
win.webContents.on("ready-to-show", function () {
setTimeout(function () {
splash.destroy();
win.show();
}, 3000);
});
win.on("closed", () => (win = null));
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
// Follow OS convention on whether to quit app when
// all windows are closed.
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
// If the app is still open, but no windows are open,
// create one when the app comes into focus.
if (win === null) {
createWindow();
}
});

As the code suggests, make sure your build already created the index.html file in the /build folder that is referenced. The splash screen will display till your application is loaded, ensure it is placed in public/splash.html.

3. Create a file named electron.js in your /public folder and copy the contents of main.js here. Update the relative file paths for index.html and splash.html in the copied code.

4. Add the following to the scripts section of your package.json and ensure the paths are correct.

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron": "electron .",
"electron-dev": "concurrently \"BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-package": "./node_modules/.bin/electron-builder -c.extraMetadata.main=build/electron.js",
"preelectron-package": "npm run build"
},

5. Run npm run preelectron-package or npm run build if you haven’t already, to take the latest build.

6. Try running npm run electron to see if your react application loads up as a native application in your system. If it does, that’s great. Otherwise I recommend you to check the paths and if the code is correct.

7. Run npm run electron-dev to develop for electron on top of your react app. Once satisfied, run npm run electron-package to get the installable/executable for your OS.

8. If you want to build or all 3 platforms (Win/Mac/Linux), It is possible but not recommended since many features might not be possible. Please read the official documentation for clarificaton. (https://www.electron.build/multi-platform-build)

What worked for me was using the docker instance with Wine preinstalled to get installable/executable for all 3 platforms. Your mileage may vary.

Run the following code in your project root folder. Ensure you have docker installed and set up on your system.

docker run — rm -ti \ — env-file <(env | grep -iE ‘DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS_TAG|TRAVIS|TRAVIS_REPO_|TRAVIS_BUILD_|TRAVIS_BRANCH|TRAVIS_PULL_REQUEST_|APPVEYOR_|CSC_|GH_|GITHUB_|BT_|AWS_|STRIP|BUILD_’) \ — env ELECTRON_CACHE=”/root/.cache/electron” \ — env ELECTRON_BUILDER_CACHE=”/root/.cache/electron-builder” \ -v ${PWD}:/project \ -v ${PWD##*/}-node-modules:/project/node_modules \ -v ~/.cache/electron:/root/.cache/electron \ -v ~/.cache/electron-builder:/root/.cache/electron-builder \ electronuserland/builder:wine

Then once you get the docker open in your terminal, run npm i && ./node_modules/.bin/electron-builder . Follow the updated documentation in the link shared above if you run into any problems.

You can find the installables/executables in the dist folder in the project folder.

Let me know in the comments if you run into some issues or if this article helped you. Adiós.