What is

this repo use the pnpm monorepo.
it consist of the code for the main window in the root
the code for sub window in pages
some shared code in packages

the project structure is decided by electron-vite-react
use the block-note as the rich-text-editor.
use the drizzle-orm to interact with the sqlite
can run the hono-server in the service_workers(the author is too lazy to migrate)

Getting Started

Install

Install dependencies.

pnpm install

maybe the sub project under packages and pages need run this command

Build sub projects

Build the packages and pages

pnpm run build:packages

pnpm run build:pages

Initialize the drizzle

initialize the orm

pnpm run generate

pnpm run migrate 

better-sqlite3 uses a nodejs version which is different from yours electron environment, you can

pnpm run rebuild 

to rebuild the better-sqlite3 for the compatible version with electron
if you want to restore the better-sqlite3 to the origin version , you can run

pnpm run reset

generate key-pairs

pnpm run key:gen

Run

pnpm run dev

Lint

pnpm run lint

Typecheck

pnpm run typecheck

Build

pnpm run build

use rollup-plugin-visualizer analyze the size of dependency and optimize the bundle chunk.

then you can find the release application and installation executable in the release

Source

electron-vite-react
electron-react-vite-starter
samuelmeuli/mini-diary

Stack List

This project uses many tools like:

client:

• Vite
• ReactJS
• TypeScript
• Vitest
• Testing Library
• Tailwindcss
• Eslint
• Prettier
• mui
• shadcn-ui
• react-query
• tiptap
• BlockNote
• react-hook-form
• dndkit

backend:

• hono
• drizzle-orm
• electron
• winston

References

integrate-hono-with-openapi
create-a-monorepo-using-pnpm-workspace
managing-full-stack-monorepo-pnpm
pnpm-workspace-examples

Todo

• √ remove and
• √ optimize the , should have LinkButton to latest diary and today's diary.
• √ add navigation after sign-in success and sign-up success.
• √ add reset button for diary editor.
• √ supplement , implement the uploading feature.
• √ confirm dialog for import in sub window
• √ import all (verify all, tell about how they are differed, and use the modal for confirmation)
• √ can I use a simple *.html as the messageBox? so can I send message directly to sub window?
• √ when import, can choose combine content or override.
• √ complete
• √ Use the dnd-kit to operate the Todo Groups.
• √ solve the re-render-too-many problems in
• √ Highlight search text for Todos
• √ add fuse query for Diaries
• √ complete
• √ add support for eslint and prettier.
• √ complete the
• √ update any starter , includes electron, electron-sub-page, mui-vite .

Q & A

run in service_worker

vite.config.ts

build: {
    sourcemap,
    minify: isBuild,
    outDir: 'dist-electron/main',
    rollupOptions: {
        external: Object.keys(
            'dependencies' in pkg
                ? pkg.dependencies
                : {}
        ),
        input: {
            index: 'electron/main/index.ts',
            'worker':
                'electron/main/worker.ts',
        }
    },
},

run-worker

import path from 'node:path'
import { Worker } from 'node:worker_threads'

export const startScheduleWorker = () => {
    const worker = new Worker(
        path.resolve(__dirname, 'worker.js')
    )

    worker.on('message', (message) => {})
    worker.on('error', (err) => {
        console.error('Worker thread error:', err)
    })
    worker.on('exit', (code) => {
        if (code !== 0) console.error(`Worker stopped with exit code ${code}`)
    })
}