How to build an Electron app using Create React App and Electron Builder

I recently decided to build a desktop app to download and archive all my Google Photos. I’m really paranoid about loosing all my pics. Google had a few options but they all had their problems. If you want to use the app to download and archive all your Google Photos you can download it here and here . OSX WIN I decided to use Electron and React. This stack was really fun to work on and the application turned out nice. In this blog I’ll share my setup and discuss a few gotchas I ran into. I leveraged these blogs when doing my initial development, & (thanks guys). 1 2 OK, lets learn how to build an Electron app using Create React App, and package it for distribution using Electron Builder. Lets take a look at the entire stack and then get started. If you want to skip right to the , feel free. sample app The stack Electron React — Create React App Rescripts Electron Builder is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. In our case we’ll be using React. Electron is JavaScript library for building user interfaces… and so much more. React To make the React setup easier we’re going to use . Create React App (CRA) is awesome because it saves buckets-of-time and eliminates config hell. Create React App Create React App is a tool (built by developers at Facebook) that gives you a massive head start when building React apps. It saves you from time-consuming setup and configuration. You simply run one command and Create React App sets up the tools you need to start your React project. allows us to customize the CRA setup without ejecting. Rescripts Ejecting CRA is something you really want to avoid, because you will no longer benefit from the future improvements to CRA. is used to package our desktop app for distribution. Electron Builder Dev Setup Create our new app using Create React App. npx create-react-app my-app cd my-app Add Electron. yarn add electron electron-builder --dev Add some dev tools we’ll need. yarn add wait-on concurrently --dev yarn add electron-is-dev Create a new file, , with the following contents. public/electron.js const electron = require('electron');const app = electron.app;const BrowserWindow = electron.BrowserWindow;const path = require('path');const isDev = require('electron-is-dev');let mainWindow;function createWindow() { mainWindow = new BrowserWindow({width: 900, height: 680}); mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`); if (isDev) { // Open the DevTools. //BrowserWindow.addDevToolsExtension(' '); mainWindow.webContents.openDevTools(); } mainWindow.on('closed', () => mainWindow = null);}app.on('ready', createWindow);app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); }});app.on('activate', () => { if (mainWindow === null) { createWindow(); }}); Add the following command to the package.json tag. scripts "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"" This script will just wait until CRA runs the React app on localhost:3000 before starting Electron. Add the following tag to package.json. main "main": "public/electron.js", Right now your package.json should look something like this. { "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "electron-is-dev": "^1.0.1", "react": "^16.8.3", "react-dom": "^16.8.3", "react-scripts": "2.1.5" }, "main": "public/electron.js", "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"" }, "eslintConfig": { "extends": "react-app" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "devDependencies": { "concurrently": "^4.1.0", "electron": "^4.0.6", "electron-builder": "^20.38.5", "wait-on": "^3.2.0" }} At this point you can run your new app in development mode via: yarn electron-dev You should see something like this: If you see that image, congratulations you’re ready to develop your app. Yay! Now, if you need to access the module like I did, you’ll quickly hit the error. See . fs Module not found here To solve this we need to use the as the Webpack target… but we don’t want to eject CRA to do it. So we use . Let me show you. electron-renderer Rescripts First, install Rescripts. yarn add @rescripts/cli @rescripts/rescript-env --dev Then, change the tags in from this… scripts package.json "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", to this. "start": "rescripts start", "build": "rescripts build", "test": "rescripts test", Now add a new file called with the following contents: .rescriptsrc.js module.exports = [require.resolve('./.webpack.config.js')] Finally add another new file called with the following contents: .webpack.config.js // define child rescript module.exports = config => { config.target = 'electron-renderer'; return config; } Now you can use the module, no worries. fs Package Setup Awesome, now we’re ready to package our app. First, add Electron Builder & Typescript: yarn add electron-builder typescript --dev CRA, by default, builds an index.html that uses absolute paths. This will fail when loading it in Electron. There is a config option to change this. Set the property in . homepage package.json "homepage": "./", Next lets add the new command which will package the builds. electron-pack Add the following to the tag in . scripts package.json "postinstall": "electron-builder install-app-deps", "preelectron-pack": "yarn build", "electron-pack": "build -mw" will ensure that your native dependencies always match the electron version. "postinstall": "electron-builder install-app-deps" will build the CRA. "preelectron-pack": "yarn build" packages the app for Mac (m) and Windows (w). "electron-pack": "build -mw" Before we can run this command we have to configure Electron Builder. Add the following to . package.json "author": { "name": "Your Name", "email": "your.email@domain.com", "url": "https://your-website.com"},"build": { "appId": "com.my-website.my-app", "productName": "MyApp", "copyright": "Copyright © 2019 ${author}", "mac": { "category": "public.app-category.utilities" }, "files": [ "build/**/*", "node_modules/**/*" ], "directories": { "buildResources": "assets" }} You can see all the Electron Builder options . here You will also want to create a directory called where you will add your app icons. Check to see the formats for these icons. assets here Here is what the entire looks like. package.json { "name": "my-app", "description": "Electron + Create React App + Electron Builder", "version": "0.1.0", "private": true, "author": { "name": "Your Name", "email": "your.email@domain.com", "url": "https://your-website.com" }, "build": { "appId": "com.my-website.my-app", "productName": "MyApp", "copyright": "Copyright © 2019 ${author}", "mac": { "category": "public.app-category.utilities" }, "files": [ "build/**/*", "node_modules/**/*" ], "directories": { "buildResources": "assets" } }, "dependencies": { "electron-is-dev": "^1.0.1", "react": "^16.8.3", "react-dom": "^16.8.3", "react-scripts": "2.1.5" }, "homepage": "./", "main": "public/electron.js", "scripts": { "start": "rescripts start", "build": "rescripts build", "test": "rescripts test", "eject": "react-scripts eject", "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"", "postinstall": "electron-builder install-app-deps", "preelectron-pack": "yarn build", "electron-pack": "build -mw" }, "eslintConfig": { "extends": "react-app" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "devDependencies": { "@rescripts/cli": "^0.0.10", "@rescripts/rescript-env": "^0.0.5", "concurrently": "^4.1.0", "electron": "^4.0.6", "electron-builder": "^20.38.5", "typescript": "^3.3.3333", "wait-on": "^3.2.0" }} Now we’re ready to package the app. Run this command to package the app. yarn electron-pack You will see the packaged artifacts under the directory. dist That’s it. Time to code your app and build something amazing. Here is the . sample app I hoped this blog helped. See you next time. Originally published at finbits.io .