Giter Club home page Giter Club logo

electron-prisma's Introduction

Prisma electron integration example

Integrate prisma in a secure and scalable manner.

Based on https://github.com/electron-react-boilerplate/electron-react-boilerplate. All initial work was done by Ayron Wohletz: https://dev.to/awohletz/an-electron-app-architecture-32hi

I highly recommend his articles.

Install

Install project dependencies with npm install. Run npm run prisma:init for initial migration and prisma client generation. Then run npm install again to run the postinstall script (or you can run the postinstall script directly).

Build

You need to understand the double package.json structure used by above boilerplate. Native modules go to release/app/package.json. So prisma and @prisma/client is added there. The prisma cli will also install this in the root package.json.

The output of the prisma client generated from prisma/schema.prisma needs to go to ../release/app/node_modules/@prisma/client in order to get handled by the native binaries. Inside prisma/schema.prisma you can select the target binaries, depending on your compilation target: binaryTargets = ["native", "windows"]

Electron builder config takes care that these files are included in the build, outside the ASAR:

"files": [
      "dist",
      "node_modules",
      "package.json",
      "prisma/**/*",
      "resources/**/*",
      "!**/node_modules/@prisma/engines/introspection-engine*",
      "!**/node_modules/@prisma/engines/migration-engine*",
      "!**/node_modules/@prisma/engines/prisma-fmt*",
      "!**/node_modules/@prisma/engines/query_engine-*",
      "!**/node_modules/@prisma/engines/libquery_engine*",
      "!**/node_modules/prisma/query_engine*",
      "!**/node_modules/prisma/libquery_engine*",
      "!**/node_modules/prisma/**/*.mjs"
    ],
    "extraResources": [
      "./assets/**",
      "prisma/**/*",
      "node_modules/@prisma/engines/migration-engine*",
      "node_modules/@prisma/engines/query*",
      "node_modules/@prisma/engines/libquery*"
    ],

Electron integration / IPC

Prisma is exposed via ContextBridge to the renderer. In the main process we need to bootstrap the DB and set some IPC handlers to get our binary paths.

// src/main/preload.js
const { PrismaClient } = require('@prisma/client');

const dbPath = ipcRenderer.sendSync('config:get-prisma-db-path');
const qePath = ipcRenderer.sendSync('config:get-prisma-qe-path');

const prisma = new PrismaClient({
  datasources: {
    db: {
      url: `file:${dbPath}`,
    },
  },
  // see https://github.com/prisma/prisma/discussions/5200
  __internal: {
    engine: {
      // @ts-expect-error internal prop
      binaryPath: qePath,
    },
  },
});

Prisma startup times

A postinstall script in chore/post-install.js is run to fix the prisma cold start time problem. Read more about it here: prisma/prisma#8484

DB Setup

If no db exists in the packaged app, the db from prisma/dev.db will be copied to the app's user data folder.

TODO

Migrations/updates

Resources

electron-prisma's People

Contributors

florianbepunkt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

electron-prisma's Issues

Prisma integration with the newest version of electron-react-boilerplate

I have been trying to integrate prisma with electron-react-boilerplate with the help of your template but I'm not successful so far.

In the newest version of erb they use different way of handling channels in a file called preload.d.ts. It also uses sandboxed BrowserWindow which doesn't allow you to access node API through renderer (to be exact you have access to a limited number of node API).

More on that here: https://stackoverflow.com/questions/58653223/why-does-preload-js-return-error-module-not-found

But even with sandbox off I haven't had any success:

 mainWindow = new BrowserWindow({
    show: false,
    width: 1024,
    height: 728,
    icon: getAssetPath('icon.png'),
    webPreferences: {
      sandbox: false,
      preload: app.isPackaged
        ? path.join(__dirname, 'preload.js')
        : path.join(__dirname, '../../.erb/dll/preload.js'),
    },
  });

here's the error I get:
Screenshot 2022-10-02 at 20 08 55

and if I leave the sandbox option on (default) theres a different error I get:
Screenshot 2022-10-02 at 20 11 06

here's a repo Ive been working on this weekend:
https://github.com/reza-azimi-dev/electron-react-prisma.git

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.