CODEWITHSUNDEEP
vitesveltesveltekit
Damon Medek
Damon Medek

Reputation: 51

Merge One Sveltekit App into another Sveltekit App

I have two Sveltekit apps. A. Is a normal website app B. Exists inside electron

I want A the normal Sveltekit website, to import B Sveltekit app running in electron. Why? so any changes I make to electron app automatically syncs to web app and I don't need to manually update src folders in A.

In order for Sveltekit to compile correctly, it seems all files need to be in the src directory. I can place B, electron app, inside A, web apps src folder and it works. It compiles correctly when built and works great. However, On Localhost it takes 1 minute to spin up and I think its because localhost tries to load everything included in electron and that makes editing the website terrible and bloated with unnecessary files. I also tried syncing two folders in the operating system but on mac it seems impractical.

The performance suffers. Can I import a precompiled version of the electron app into the website through some server load function? Sveltekit and Vites backend system gets pretty hairy so any advice is greatly appreciated.

Upvotes: 1

Views: 189

Answers (1)

SimpleCoder
SimpleCoder

Reputation: 501

There is no simple answer to this question as it depends on what you do with your electron app however it can be put into three categories:

1. Port to sveltekit and run like that. (do you need electron?)

Remove electron overhead and port to sveltekit and run from web.

2. If you are already using a sveltekit + electron template or adapter

eg. https://github.com/ptkdev/sveltekit-electron-adapter

You can use that to run your electron app and prerender the site (eg. static)

Or build up the code with a different template.

3. Split the code or port to a template

If you need both electron and webapp split your code into svelte components that can be interchanged on build/runtime so you have your sveltekit package for web and electron package.

The electron/desktop reliant components are not included/rewritten or disabled for web and vice-versa.

Other components that can be interchanged/are both compatible with svelte and electron can be kept as is. Keep your main files as broad as possible and build both web and electron.

Something like: https://github.com/FractalHQ/sveltekit-electron

Or lastly port to sveltekit, have your electron app spin up a server like with:

npm run dev

then point to it.

For that use <webview> or BrowserView

browser view example:

// In the main process.
const { app, BrowserView, BrowserWindow } = require('electron')

app.whenReady().then(() => {
  const win = new BrowserWindow({ width: 800, height: 600 })

  const view = new BrowserView()
  win.setBrowserView(view)
  view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
  view.webContents.loadURL('https://electronjs.org')
})

Upvotes: 0

Related Questions