el3um4s/memento-svelte-electron-typescript

Template to create a desktop app with Svelte, TailwindCSS, Electron and TypeScript (with electron-updater, electron-reload and electron-builder)

MEMENTO - Svelte, TailwindCSS, Electron and TypeScript

Template to create a desktop app with Svelte, TailwindCSS, Electron and TypeScript (with electron-updater, electron-reload and electron-builder)

Get Started

This is a project template for Svelte and Electron apps. It lives at https://github.com/el3um4s/memento-svelte-electron-typescript.

To create a new project based on this template using degit:

npx degit el3um4s/memento-svelte-electron-typescript svelte-app
cd svelte-app

Then install the dependencies with

npm install

Note that you will need to have Node.js installed.

Command

For development purpose:

• npm run nodemon: auto restart Electron on change
• npm run dev: auto reload the web page when you change Svelte files

For publish purpose:

• npm run out:win: create an exe file for Windows
• npm run publish:win: publish the app on GitHub

For test purpose:

• npm run test: test the app
• npm run test:show-trace: open the saved testing trace using Playwright CLI

Notes

I'm blogging about the development process in these posts:

• Svelte, Electron & TypeScript
• Electron and TypeScript: how to use ipcMain and ipcRenderer
• SvelteKit & Electron

memento-svelte-electron-typescript's Issues

ERROR:sandbox_linux.cc(374)] InitializeSandbox() called with multiple threads in process gpu-process

Hi!
I've found your awesome project and I'd like to work with it, but after running npm start, and the npm run nodemon, I'm having the next error message:

ERROR:sandbox_linux.cc(374)] InitializeSandbox() called with multiple threads in process gpu-process

System Information: 
Kubuntu 20.04
OS-TYPE; 64 byte
Node version: 14.18.1
Npm version: 6.14.15

After reading some documentation I've uninstalled Google Chrome from my SO, but still the same.

Thanks in advance.

"Unable to load preload script" error

Hi,

I'm trying to convert an existing (and fully working) Electron + Svelte project to use TypeScript, so I decided to follow your tutorial on Medium.

Problem is, when I launch the executable I get the error in the title, like the path is incorrect.
I'm not sure what the problem is.

This is my folder structure:

.
├── dist/
│   └── public/
│       ├── build/
│       ├── index.html
│       ├── global.css
│       └── favicon.png
├── src/
│   ├── electron/
│   │   ├── bridge.ts
│   │   ├── index.ts
│   │   ├── preload.ts
│   │   └── tsconfig.json
│   ├── svelte/
│   └── server/
├── package-lock.json
├── package.json
├── rollup.config.js
├── svelte.config.js
└── tsconfig.json

I load the preload script from src/electron/index.ts:

mainWindow = new BrowserWindow({
    webPreferences: {
      contextIsolation: true,
// notice the path, `preload.js` should be in the same folder as `index.js`, so I don't know what's wrong
      preload: join(__dirname, "preload.js"), 
    },
  });

This is my root tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "ES2022",
    "module": "CommonJS",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "useUnknownInCatchVariables": false
  },
  "exclude": ["node_modules", "dist/public", "out/**", "src/svelte/**"],
  "include": ["src/electron/**/*"]
}

I had to change the rootDir to src and not just src/electron like in your example, because I import some stuff from server to electron/index.ts.

Here's the tsconfig.json inside src/electron:

{
  "include": ["./**/*"],
  "compilerOptions": {
    "target": "ES2022",
    "module": "CommonJS",
    "sourceMap": true,
    "strict": true,
    "useUnknownInCatchVariables": false,
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

This is my package.json, omitting irrelevant properties:

{
  "main": "dist/electron/index.js",
  "build": {
    "appId": "xxx",
    "productName": "xxx",
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "directories": {
      "output": "output"
    }
  },
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "npm run build && electron .",
    "dist": "cross-env ROLLUP_WATCH=true npm run build && tsc && electron-builder build"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "@rollup/plugin-typescript": "^11.0.0",
    "@tsconfig/svelte": "^3.0.0",
    "cross-env": "^7.0.3",
    "electron": "^22.0.0",
    "electron-builder": "^22.10.3",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "svelte-check": "^3.0.3",
    "svelte-preprocess": "^5.0.1",
    "tslib": "^2.5.0",
    "typescript": "^4.9.5"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "dexie": "^3.2.2",
    "sirv-cli": "^2.0.0"
  }
}

Notice main is set to dist/electron/index.js, I think that's correct, since after building, the file actually ends up there.

Do you have any idea what I'm doing wrong here? Stack Overflow hasn't been much help.

This is what I get in the console when Electron launches:

Inside src/electron/index.ts I'm also logging __dirname, join(__dirname, "preload.js") to the console, and this is what I get when I launch: C:\Users\Lucas\Javascript\[APP NAME]\output\win-unpacked\resources\app.asar\dist\electron C:\Users\Lucas\Javascript\[APP NAME]\output\win-unpacked\resources\app.asar\dist\electron\preload.js
That seems correct to me.

Any advice you could give would be much appreciated.

If the window is too small, the icons overlap the text

If the window is too small, the icons overlap the text