Configuration for packing electron app into a single exe file

readme.md

Electron Packaging Configuration

This is the configuration I use to write an Electron app in TypeScript and package it into a single .exe file for Windows distribution.

Package the app by running:

npm run dist

This typically also includes my other configuration setup at https://github.com/iansan5653/ts-boilerplate.

gulpfile.js

/* eslint @typescript-eslint/no-var-requires: 0 */
const gulp = require("gulp");
const ts = require("gulp-typescript");
const clean = require("gulp-clean");
const replace = require("gulp-replace");

const tsProject = ts.createProject("tsconfig.json");

const paths = {
  web: ["src/*.html", "src/*.css"]
};

// Copy any HTML and CSS files from src to out
gulp.task("copy-web", function() {
  return gulp.src(paths.web).pipe(gulp.dest("out"));
});

// Compile the TypeScript to JS
gulp.task("compile", function() {
  return tsProject
    .src()
    .pipe(tsProject())
    .js.pipe(replace("    ", "  "))
    .pipe(gulp.dest("out"));
});

// Remove any files in ./src
gulp.task("clean", function() {
  return gulp.src("out", {read: false, allowEmpty: true}).pipe(clean());
});

// Default task - clean, then copy and compile in parallel
gulp.task(
  "default",
  gulp.series("clean", gulp.parallel("copy-web", "compile"))
);

package.json

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "Project description.",
  "main": "./out/electron-main.js", // Or other entry point
  "scripts": {
    "start": "npm run-script build && electron ./out/electron-main.js", // Update if other entry point
    "build": "gulp",
    "pack": "electron-builder --dir",
    "dist": "npm run-script build && electron-builder"
  },
  "author": "Ian Sanders (iansan5653)",
  "license": "MIT",
  "devDependencies": {
    "@types/c3": "^0.7.1",
    "@types/d3": "^5.7.2",
    "@types/lodash": "^4.14.136",
    "@types/mssql": "^4.0.15",
    "@typescript-eslint/eslint-plugin": "^1.12.0",
    "@typescript-eslint/parser": "^1.12.0",
    "electron": "^6.0.2",
    "electron-builder": "^21.2.0",
    "electron-packager": "^14.0.2",
    "eslint": "^6.0.1",
    "eslint-config-google": "^0.13.0",
    "eslint-plugin-jsdoc": "^15.5.2",
    "gulp": "^4.0.2",
    "gulp-clean": "^0.4.0",
    "gulp-replace": "^1.0.0",
    "gulp-typescript": "^5.0.1",
    "prettier": "^1.18.2",
    "typescript": "^3.5.3"
  },
  "dependencies": {},
  "build": {
    "appId": "shell.display.board",
    "copyright": "Copyright © 2019 Chromalloy",
    "directories": {
      "buildResources": "out",
      "output": "dist"
    },
    "win": {
      "target": "portable"
    },
    "files": [
      "./out/**/*"
    ]
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es2019",
    "module": "commonjs",
    "outDir": "./out",
    "rootDir": "./src",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "esModuleInterop": true
  },
  "include": ["./src"]
}