Electron integration best practice

[kirkcola]

Hi,

I wonder if there are any best practices for integrating prisma with an electron app, connecting to a sqlite db. I was trying but found some problems.

a) Prisma client will detect its runtime environment and throws an error if it's been ran on a browser (fair enough, but is there any way to bypass/disable this?)

b) Calling prisma instance methods through IPC is definitely a solution, but could be a little bit inconvenient. (e.g using auto-generated types could be difficult)

[ryands17]

@kirkcola 👋

Option b is the only way here as Prisma will not work on the browser and you cannot bypass that for now. @madebysid can provide better insights on this though.

[kirkcola]

@ryands17 👋 Thanks for clarifying my doubt!

[sdnts]

Hey @kirkcola! I don't have a list of best practices for Prisma+Electron, but I can help you get set up if you can tell me what you're trying to do! Studio's electron app ships Prisma, so this is definitely possible.

The most relevant thing I could find was this discussion a while ago: #5200

Might I ask why you're trying to do (a)? You'll definitely need to run Prisma on the main process and then use Electron's IPC APIs to pass your data to your renderer process, since Prisma currently only runs on Node (this might not be 100% straight-forward because some Prisma types are not serializable, but I can help you figure this out). If your intention is to reuse types on your frontend, then you should be able to generate Prisma Client upfront (during your build process) and use the validator utility to type your IPC messages:
https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#prismavalidator
https://www.prisma.io/docs/concepts/components/prisma-client/advanced-type-safety/prisma-validator/

Let me know if this is unclear!

[kirkcola]

Hi @madebysid ! Much appreciated for your comprehensive answer!

The reason I was trying to do (a) is that I thought since electron supports exposing node modules to browser context, it would be much easier to call prisma instance methods directly so that I can get the marvelous auto-generated type just like writing a node app.

Thank you for advising me the validator utility function, it's very useful. As you answered, the IPC APIs definitely works, but electron doesn't accept unserializable data as payload for IPC, as you metioned. So no way to pass callbacks to manipulate prisma instance or any complex types like Date, hope you can help me about this!

I am also confused about reaching without writing too many boilerplate codes, currently my codes could be something like:

// renderer process
const foo = Prisma.validator<Prisma.FooCreateInput>()({
	bar: 'qaaz',
})
ipcRenderer.send(PrismaChannels.FOO_CREATE, foo);


// main process
ipcMain.on(PrismaChannels.FOO_CREATE, (e, foo: Prisma.FooCreateInput) => {
	  // ...
	  prisma.foo.create({ data: foo });
});

Sorry but I'm new to electron, I wonder if there are any better ways to reach rather than defining senders/listeners for all cases, which could be painful😂.

Again, thanks for your reply!

[Sepehr0011]

sorry for replying to an old comment on an old discussion
just wondering, what did you mean by "Studio's app" when you said "Studio's electron app" ?
were you talking about Visual Studio Code ?

[igolka97]

Hi @kirkcola

I am also confused about reaching without writing too many boilerplate codes, currently my codes could be something like:

You can expose prisma client to window object and use it right in renderer process. Electron security policy allow to do this without any danger, like this:

import { PrismaClient } from '@prisma/client'

import { contextBridge } from 'electron'

const prisma = new PrismaClient()

contextBridge.exposeInMainWorld('electronAPI', {
  prisma: () => prisma
})

and in the renderer process

window.electronAPI.prisma().user.create({
   data: { ... }
})

You also may would like some thing like this

// prisma.ts
const prisma = window.electronAPI.prisma()

export {
  prisma
}

and in case of that

import { prisma } from '.../prisma.ts'
window.electronAPI.prisma.user.create({
   data: { ... }
})

it's just to disclosure prisma dependency for other devs and improve readability.

Also I think you may stop thinking as "frontend" and "backend" during electron development and develop your app like an usual desktop app, in another words you may need do all you app stuff at "frontend", but electron js files leave alone and use it only for electron api management like windows or hardware.

It's all about i think, hope it helps, I just a newbie to electron development right now

But I still don't know how to generate prisma client during Electron build.

[rafaberaldo]

@igolka97 Did you manage to make it work with contextBridge?

When I follow your instructions I get An object could not be cloned. in renderer process ([email protected])

[malatin3]

@rafaelpimpa @igolka97 I'm also getting An object could not be cloned. following these instructions. Have you had any success figuring out a solution?

[rafaberaldo]

@malatin3 no success with contextBridge API, had to disable contextIsolation and expose the object itself (window.prisma = prisma).

[malatin3]

@rafaelpimpa Ah, that's unfortunate. I'm thinking of trying a different ORM to see if I have more luck or potentially downgrading Prisma to v3 which I was able to use via the contextBridge.

[rafaberaldo]

@malatin3 good luck, I did try TypeORM and MikroORM, both same error.

[Artrix9095]

Try the edge runtime maybe?

// prisma.ts
import { PrismaClient } from '@prisma/client/edge'

export default new PrismaClient()

[malatin3]

I tried it.. not sure I set up the URL correctly but I still seem to be getting that An object could not be cloned. with the edge client.

[Aaqu]

Where to store the sqlite database file?

[oenu]

Did you ever get an answer?

[Aaqu]

unfortunately not

[lemonpole]

You can store your SQLite file in process.resourcesPath, which on Windows, evaluates to %APPDATA%/<YOUR_APP>.

It's best to provide the database path at runtime so that you can leverage Electron and grab the correct path per platform.

const prisma = new PrismaClient({
  datasources: {
    db: {
      url: `file:${path.join(process.resourcesPath, 'databases/save_0.sqlite')}`,
    },
  },
});

This is a stripped down version of my database logic. What I do in my app is push a core database file to source control which contains the basic migrations and seeded data needed to run.

At runtime, I copy that database file over to process.resourcesPath and then connect to that.

[Venipa]

after seeing your solution i made adjustments to vite/nuxt/electron-nuxt config

// prisma.ts
import { PrismaClient } from "@prisma/client/index"; // !!! selecting index file is important, prevents "run in browser" error
import path from "path";

declare const global: Global & { prisma?: PrismaClient };

let prisma: PrismaClient;
const url = process.env.DATABASE_URL = `file:${path.join(process.resourcesPath, 'prisma/data.db')}`;
if (typeof window === 'undefined') {
  if (process.env['NODE_ENV'] === 'production') {
    prisma = new PrismaClient({
      datasources: {
        db: {
          url
        }
      }
    });
  } else {
    if (!global.prisma) {
      global.prisma = new PrismaClient({
      datasources: {
        db: {
          url
        }
      }
    });
    }
    prisma = global.prisma;
  }
}
export { prisma as DBClient };

// electron-builder-config.js
...
extraResources: [
    "prisma/data.db",
    "node_modules/.prisma/**/*",
    "node_modules/@prisma/client/**/*",
  ],
  async beforeBuild(ctx) {
    console.log("  APP_DIR:", ctx.appDir);
    spawnSync("yarn", { cwd: ctx.appDir, argv0: "prisma migrate generate" }); // generate prisma stuff before moving
  },
...

finally fixed... 💀