Vue-cli-plugin-electron-builder: How to use a local database (SQLite or NeDB) after build?

Created on 10 Sep 2018 · 11Comments · Source: nklayman/vue-cli-plugin-electron-builder

I'm trying to use a local database in my electron app, it works in development but when i bundled the app (I only tested in mac os bundle), the database is not connecting anymore, so maybe the bundle is not moving my database to a folder with the right permissions, but i dont know in what folder i can put my database file, i don't find nothing in the docs too, can someone help me with this?

Source

renatomattos2912

Most helpful comment

The reason it doesn't work is because all of your files get packed into an asar archive. This archive is read only, preventing a database from working. To fix this, you need to have the database file/folder not packed into the archive:

Note: change src/database.txt to the path of your database file/folder

// vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        extraResources: ['src/database.txt']
      }
    }
  }
}

// Wherever you use the database
import path from 'path'

const isBuild = process.env.NODE_ENV === 'production'

const pathToDbFile = path.join(
  (isBuild ? __dirname : __static),
  (isBuild ? '../../' : ''),
  '../src/database.txt'
)

pathToDbFile is equal to PROJECT_ROOT/src/database.txt.

UPDATE:
Issue #275 reports that the path to access the file has changed. If the original answer does not work for you, try this instead:

const pathToDbFile = path.join(
  isBuild ? __dirname : __static,
  '../src/database.txt',
);

nklayman on 10 Sep 2018

👍10 🚀2 ❤1

All 11 comments

Note: change src/database.txt to the path of your database file/folder

// vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        extraResources: ['src/database.txt']
      }
    }
  }
}

// Wherever you use the database
import path from 'path'

const isBuild = process.env.NODE_ENV === 'production'

const pathToDbFile = path.join(
  (isBuild ? __dirname : __static),
  (isBuild ? '../../' : ''),
  '../src/database.txt'
)

pathToDbFile is equal to PROJECT_ROOT/src/database.txt.

UPDATE:
Issue #275 reports that the path to access the file has changed. If the original answer does not work for you, try this instead:

const pathToDbFile = path.join(
  isBuild ? __dirname : __static,
  '../src/database.txt',
);

nklayman on 10 Sep 2018

👍10 🚀2 ❤1

Man, you are a life saver, thank you so much.

renatomattos2912 on 10 Sep 2018

@nklayman Thanks for this great plugin! I'm having a similar issue where I'm trying to use child_process.fork, but it doesn't seem to work in the bundled app. It only works from electron:serve.

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      symlinks: false
    }
  },
  pluginOptions: {
    electronBuilder: {
      extraResources: [
        "src/imdone-repo-worker.js"
      ]
    }
  }
}

// forking the worker
    const pathToWorker = path.join(
      (isDevelopment ? __static : __dirname),
      (isDevelopment ? '' : '../../'),
      '../src/imdone-repo-worker.js'
    )

    workers[this.path] = this.worker = fork(pathToWorker, {silent: true})

Any idea why this won't work?

piascikj on 29 Dec 2018

@piascikj have you tried placing the script in the public folder and running it inside the archive? Also, try just reading the contents of the file, or the parent directory. In addition, can you tell me where the worker file ends up in your built app? Thanks!

nklayman on 30 Dec 2018

Thanks a bunch @nklayman! Moving imdone-repo-worker.js to public/ and using path.join(__static,'imdone-repo-worker.js') did the trick.

piascikj on 30 Dec 2018

👍1

Thank you for this note! Is there any way this information could be made more visible or linked to in, for example the following page?

https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#native-modules

Thanks!

nathansalwen on 14 Jun 2019

@nathansalwen Added a link to the above comment in that section, the updated docs should be live now.

nklayman on 23 Jun 2019

I see the comment. I think that is an improvement. In my case, the "extraResources" configuration was necessary for ffi-napi to find external libraries. Perhaps, the following text would be useful for others in my situation.

"If files need to be present in an unpacked form, such as library files for ffi-napi or database files for MySQL or MongoDB, additional configuration is needed. See Issue #76 (comment) for usage of builderOptions->ExtraResources in vue.config.js."

Again, thank you for an awesome tool!

nathansalwen on 23 Jun 2019

hi @nklayman, i'm having problems on building, can you be more specific about the configuration to use mysql?
thank for this awesome project by the way!

douglast2t on 1 Aug 2019

@douglast2t use mysql as if you are creating a regular nodejs script, but follow the instructions in https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/76#issuecomment-420060179 for determining the location of your database file/folder. The mysql code should go in src/background.js.

nklayman on 3 Aug 2019

this worked for me

in vue.config.js

module.exports = { chainWebpack: config => { config.externals({ "nedb":"commonjs nedb" }) } }

these could also be helpful for you

https://stackoverflow.com/questions/40650701/nedb-not-loading-or-storing-to-file

https://github.com/louischatriot/nedb/issues/329