CODEWITHSUNDEEP
angularsqliteelectronknex.jselectron-builder
Nishat Sayyed
Nishat Sayyed

Reputation: 151

Cannot find sqlite file in production mode Electron + Angular

I am using electron with Angular with a SQLite db to persist data locally. It works perfectly in development environment but somehow it fails in production when I build it with electron-builder because it "can't find" the database file. Also I am using this great boilerplate repo for this process => https://github.com/maximegris/angular-electron/tree/master/src

Following is my directory structure

- src/
- db/
-- database.sqlite
- main.ts

Following is how I try to access the database file in main.ts using Knex

let knex = Knex({
  client: "sqlite3",
  connection: {
    filename:path.join(__dirname, '/db/', 'database.sqlite')
  }
});

Following are my scripts and configuration

electron-builder.json

{
  "productName": "POS Billing",
  "directories": {
    "output": "release/"
  },
    "files": [
        "**/*",
        "!**/*.ts",
        "!*.code-workspace",
        "!LICENSE.md",
        "!package.json",
        "!package-lock.json",
        "!src/",
        "!e2e/",
        "!hooks/",
        "!angular.json",
        "!_config.yml",
        "!karma.conf.js",
        "!tsconfig.json",
        "!tslint.json"
    ],
  "win": {
    "icon": "dist/assets/icons",
    "target": [
      "portable"
    ]
  },
  "mac": {
    "icon": "dist/assets/icons",
    "target": [
      "dmg"
    ]
  },
  "linux": {
    "icon": "dist/assets/icons",
    "target": [
      "AppImage"
    ]
  }
}

package.json

{
  "name": "pos-billing",
  "version": "1.0.0",
  "main": "main.js",
  "private": true,
 
  "scripts": {
    "postinstall": "electron-builder install-app-deps",
    "ng": "ng",
    "start": "npm-run-all -p electron:serve ng:serve",
    "build": "npm run electron:serve-tsc && ng build --base-href ./",
    "build:dev": "npm run build -- -c dev",
    "build:prod": "npm run build -- -c production",
    "ng:serve": "ng serve -c web -o",
   "electron:serve-tsc": "tsc -p tsconfig.serve.json",
    "electron:serve": "wait-on tcp:4200 && npm run electron:serve-tsc && npx electron . --serve",
    "electron:local": "npm run build:prod && npx electron .",
    "electron:build": "npm run build:prod && electron-builder build",
    "test": "ng test --watch=false",
    "test:watch": "ng test",
    "e2e": "npm run build:prod && cross-env TS_NODE_PROJECT='e2e/tsconfig.e2e.json' mocha --timeout 300000 --require ts-node/register e2e/**/*.e2e.ts",
    "version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
    "lint": "ng lint"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "10.0.1",
    "@angular-devkit/build-angular": "0.1001.6",
    "@angular-eslint/builder": "0.5.0-beta.3",
    "@angular-eslint/eslint-plugin": "0.5.0-beta.3",
    "@angular-eslint/eslint-plugin-template": "0.5.0-beta.3",
    "@angular-eslint/template-parser": "0.5.0-beta.3",
    "@angular/cli": "10.1.6",
    "@angular/compiler": "10.1.5",
    "@angular/compiler-cli": "10.1.5",
    "@angular/language-service": "10.1.5",
    "@angular/platform-browser": "10.1.5",
    "@angular/platform-browser-dynamic": "10.1.5",
    "@ngx-translate/core": "13.0.0",
    "@ngx-translate/http-loader": "6.0.0",
    "@types/jasmine": "3.5.14",
    "@types/jasminewd2": "2.0.8",
    "@types/mocha": "8.0.3",
    "@types/node": "14.11.8",
    "@typescript-eslint/eslint-plugin": "4.4.0",
    "@typescript-eslint/eslint-plugin-tslint": "4.4.0",
    "@typescript-eslint/parser": "4.4.0",
    "chai": "4.2.0",
    "electron-packager": "^15.1.0",
    "conventional-changelog-cli": "2.1.0",
    "core-js": "3.6.5",
    "cross-env": "7.0.2",
    "electron": "10.1.3",
    "electron-builder": "22.8.1",
    "electron-reload": "1.5.0",
    "eslint": "7.11.0",
    "eslint-plugin-import": "2.22.1",
    "jasmine-core": "3.6.0",
    "jasmine-spec-reporter": "6.0.0",
    "karma": "5.2.3",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-electron": "6.3.1",
    "karma-jasmine": "4.0.1",
    "karma-jasmine-html-reporter": "1.5.4",
    "mocha": "8.1.3",
    "npm-run-all": "4.1.5",
    "rxjs": "6.6.3",
    "spectron": "12.0.0",
    "ts-node": "9.0.0",
    "tslib": "2.0.3",
    "typescript": "4.0.3",
    "wait-on": "5.2.0",
    "webdriver-manager": "12.1.7",
    "zone.js": "0.11.1"
  },
  "dependencies": {
    "@angular/common": "10.1.5",
    "@angular/core": "10.1.5",
    "@angular/forms": "10.1.5",
    "@angular/animations": "~10.1.5",
    "@angular/router": "10.1.5",
    "@ng-select/ng-select": "^5.0.7",
    "@swimlane/ngx-datatable": "^18.0.0",
    "file-saver": "^2.0.2",
    "guid-typescript": "^1.0.9",
    "knex": "^0.21.6",
    "license-key-gen": "^0.1.4",
    "ng-select": "^1.0.2",
    "ngx-export-as": "^1.5.0",
    "ngx-print": "^1.2.0-beta.5",
    "sqlite3": "^5.0.0"
  },
  "engines": {
    "node": ">=10.13.0"
  }
}

This creates an exe file under the release/ directory but when I open it, it fails to load the DB. I've tried to use the app.getPath("userData") solution but that doesn't work either.

Any help would be appreciated. Thanks for helping out.

Upvotes: 1

Views: 1274

Answers (1)

tpikachu
tpikachu

Reputation: 4854

filename:path.join(__dirname, '/db/', 'database.sqlite')

You are storing the file inside the app resource which can't be. In the app package, we are not allowed to write or change the contents.

This is possible while you are developing your application but impossible after the package.

You have to store the database file somewhere. Normally as all applications do, you can store this in the application data directory. You can get the app data path by using app.getPath('userData')

Upvotes: 2

Related Questions