CODEWITHSUNDEEP
javascriptelectronelectron-builder
Daniel Lizik
Daniel Lizik

Reputation: 3144

How to build different versions with environment variables

According to this it is not possible to set flags within an electron app with environment variables. I still need to build different versions of the app for dev, staging, pilot and prod.

Internally I would like to use electron-node-config because it's just easy. But because I have no access to environment variables it's not possible to use node-config.

So I thought of having several entry scripts like

// index.dev.js
require('./main')({ APP_URL: 'localhost:8080' });

// index.staging.js
require('./main')({ APP_URL: 'https://staging.foo.com' });

// pilot.staging.js
require('./main')({ APP_URL: 'https://pilot.foo.com' });

Where my main.js file looks more or less like this

module.exports = (config) => {
  app.on('ready', () => {
    mainWindow.loadURL(config.APP_URL);
  });
};

However, in the electron builder docs there doesn't seem to be an option for specifying an entry file, it always uses index.js to package the app, and there isn't much written in the docs for the js api other than

const builder = require('electron-builder');
const env = process.env.NODE_ENV;
const entry = `index.${env}.js`;

builder.build({
  entry,
  appId: 'com.electron.foo',
  productName: 'foo',
  mac: {
    target: 'zip'
  },
  win: {
    target: 'portable'
  },
  portable: {
    artifactName: 'foo.exe'
  }
});

So I tried setting up my package.json like this

"scripts": {
  "build:staging": "NODE_ENV=development node scripts/build",
  "build:pilot": "NODE_ENV=pilot node scripts/build",
  "build:production": "NODE_ENV=production node scripts/build"
}

However I'm really not sure how to set the entry file for electron builder config. How do I specify an entry file?

Upvotes: 4

Views: 5106

Answers (2)

Yurii Danylevych
Yurii Danylevych

Reputation: 51

You can solve this with electron-build config extraMetadata, you can override package.json properties during build with it. 

const builder = require('electron-builder');
const env = process.env.NODE_ENV;
const entry = `index.${env}.js`;

builder.build({
  config: {
    extraMetadata: {
      main: entry
    },
    appId: 'com.electron.foo',
    productName: 'foo',
    mac: {
      target: 'zip'
    },
    win: {
      target: 'portable'
    },
    portable: {
      artifactName: 'foo.exe'
    }
  }
});

Upvotes: 5

Daniel Lizik
Daniel Lizik

Reputation: 3144

I did this with a hacky bash script

#!bin/bash

# make tmp package.json
cp package.json _package.json

# set entry file
sed -i '' "s/index.js/index.$1.js/" package.json

# set output folder
sed -i '' "s/TARGET/$1/" package.json

# package app
npm run build

# get rid of electron config package.json
rm package.json

# "reset" old package.json
mv _package.json package.json

and my package.json scripts looks like

{
  "postinstall": "electron-builder install-app-deps",
  "reinstall": "rm -rf node_modules/ && npm i",
  "start": "NODE_ENV=development electron src/index.development.js",
  "build": "build -mw",
  "build:development": "sh scripts/build.sh development",
  "build:pilot": "sh scripts/build.sh pilot",
  "build:pilot2": "sh scripts/build.sh pilot2",
  "build:production": "sh scripts/build.sh production",
  "build:all":
    "npm run build:development && npm run build:pilot && npm run build:pilot2 && npm run build:production",
  "test": "npm run postinstall && jest"
}

Upvotes: 3

Related Questions