I have a project which uses both electron-packager and electron-builder. When I run npm run packaged it is packaged up as .app file into the builds/ folder and there is no issue running the app. When I run npm run build or npm run build:mac, electron-builder successfully builds, signs and creates a .dmg and a .zip file as well as the .app file into the dist/ folder, however the .app file doesn't run as it appears that the src has not compiled correctly and files are missing. I'm sure I'm over looking something in my config but have hit a roadblock.
Here is my package.json:
{
"name": "my-electron-app",
"productName": "ACME Electron",
"version": "0.1.0",
"license": "MIT",
"main": "mainprocess/main.js",
"scripts": {
"start": "react-scripts start",
"clean:build": "rimraf builds",
"clean:dist": "rimraf dist",
"tes": "rimraf archive/tunnel-utils-darwin-x64",
"testDev": "cross-env NODE_ENV=development electron .",
"testProd": "cross-env NODE_ENV=production electron . --noDevServer",
"dev": "webpack-dev-server --progress --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
"build": "npm run clean:dist && webpack --progress --config webpack.build.config.js",
"package": "cross-env NODE_ENV=production npm run clean:dist && webpack --config webpack.build.config.js",
"postpackage": "cross-env NODE_ENV=production npm run clean:build && electron-packager . ${npm_package_productName} --overwrite --icon=assets/icons/mac/icon.icns --prune=true --ignore='(.circleci|archive|assets|build|builds|signing|scaffold|src)' --asar.unpackDir=node_modules/ngrok/* --out=builds",
"package-mac": "cross-env NODE_ENV=production electron-packager . ${npm_package_productName} --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --ignore='(.circleci|archive|assets|build|builds|signing|scaffold|src)' --asar.unpackDir=node_modules/ngrok/* --out=builds",
"package-win": "cross-env NODE_ENV=production electron-packager . ${npm_package_productName} --overwrite --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --asar.unpackDir=node_modules/ngrok/* --out=builds --version-string.CompanyName=ACME --version-string.FileDescription=ACME --version-string.ProductName="My App"",
"package-linux": "cross-env NODE_ENV=production electron-packager . ${npm_package_productName} --overwrite --platform=linux --arch=x64 --icon=assets/icons/png/icon.png --prune=true --ignore='(scaffold|src|builds|archive)' --asar.unpackDir=node_modules/ngrok/* --out=builds",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"build-bak": "run-os",
"build:win32": "electron-builder --win",
"build:darwin": "electron-builder --mac",
"clean": "rimraf ./dist",
"release": "electron-builder --publish always",
"postinstall": "electron-builder install-app-deps"
},
"build": {
"appId": "com.acme.app",
"productName": "ACME Electron",
"files": [
"**/*",
"builds/Release/*",
"assets/icons/*.*",
"assets/icons/mac/*.*",
"assets/icons/png/*.*",
"assets/icons/win/*.*"
],
"mac": {
"category": "public.build.automation",
"icon": "assets/icons/mac/icon.icns"
},
"dmg": {
"contents": [
{
"x": 110,
"y": 150
},
{
"x": 440,
"y": 150,
"type": "link",
"path": "/Applications"
}
],
"artifactName": "acme-app-${version}.${ext}"
},
"win": {
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
},
{
"target": "portable"
}
],
"icon": "assets/icons/win/icon.ico"
},
"nsis": {
"runAfterFinish": true,
"installerIcon": "assets/icons/win/icon.ico",
"artifactName": "acme-app-${version}.${ext}"
},
"portable": {
"artifactName": "acme-app.exe"
},
"appx": {
"applicationId": "acme.app",
"backgroundColor": "#000000",
"identityName": "acme.app",
"publisherDisplayName": "nolandubeau",
"artifactName": "acme-app-${version}.${ext}"
},
"publish": [
{
"provider": "github",
"releaseType": "release"
}
]
},
"dependencies": {
...
},
"devDependencies": {
...
}
}
And here is my webpack.build.config.js:
const webpack = require('webpack');
const path = require('path');
//const BabiliPlugin = require('babili-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// Config directories
const SRC_DIR = path.resolve(__dirname, 'src');
const OUTPUT_DIR = path.resolve(__dirname, 'dist');
// Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up
const defaultInclude = [ SRC_DIR ];
module.exports = {
entry: SRC_DIR + '/index.js',
output: {
path: OUTPUT_DIR,
publicPath: './',
filename: 'bundle.js'
},
module: {
rules: [
{ test: /.css$/, use: ['style-loader', 'css-loader'] },
{ test: /.json$/, loader: "json-loader" },
{
test: /.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}),
include: defaultInclude
},
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react'],
plugins: ['@babel/proposal-class-properties', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import']
}
}
},
{
test: /.(jpe?g|png|gif)$/,
use: [
{ loader: 'file-loader?name=img/[name]__[hash:base64:5].[ext]' }
],
include: defaultInclude
},
{
test: /.(eot|svg|ttf|woff|woff2)$/, use: [
{ loader: 'file-loader?name=font/[name]__[hash:base64:5].[ext]' }
],
include: defaultInclude
}
]
},
target: 'electron-renderer',
plugins: [
new HtmlWebpackPlugin({title: 'CaptureCloud Remote'}),
new ExtractTextPlugin("bundle.css"),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.LoaderOptionsPlugin({
debug: false,
optimization: {
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
}),
],
}
})
//new BabiliPlugin()
],
stats: {
colors: true,
children: false,
chunks: false,
modules: false
}
};
