Hi Diego,

I’m glad this helped you. Writing an electron builder post was in the pipeline, but the process was so small that it didn’t make for a full-length tutorial.

You can use Gulp. Or if you are like me and prefer minimal dependencies, just simple yarn scripts would do.

Here’s what I did.

• We need to build the renderer and move the compiled html to build/html folder. For this, I have a build:renderer script (in main’s package.json):

"scripts": {
    "build:renderer": "cd ../renderer; yarn build; cd ../main; cp -r ../renderer/build ./build/html"
},

• Next, you need to tell electron to use CRA server in dev mode and build/html in prod. To do this make the following changes to main’s index.js :

if (process.env.NODE_ENV === 'dev') {
    win.loadURL('http://localhost:3000')
    win.webContents.openDevTools()
  } else {
 win.loadURL(`file://${process.resourcesPath}/build/html/index.html`)
  }

And setup the env in main’s package.json scripts:

"electron": "electron src",
"start": "NODE_ENV=dev nodemon --watch ./src/*.js --watch ./src/**/*.js --exec 'yarn electron'",
"dist": "rm -rf dist/; NODE_ENV=prod electron-builder",

And finally, make the database files and the compiled html files available on process.resourcesPath :

(In you main’s package.json add electron-builder’s config):

"build": {
    "appId": "com.httpslocalhost",
    "mac": {
      "category": "public.app-category.developer-tools"
    },
    "productName": "HTTPSLocalhost",
    "extraResources": [
      "tmp/**/*",
      "data/*.db",
      "build/**/*"
    ],
    "files": [
      "src/**/*"
    ]
  }

You can now run yarn dist to get a packaged application. You might need to tweak this if you need to include non-standard resources, but this is the jist of it.

Thanks