CODEWITHSUNDEEP
vitesveltekittaurimulti-window
ChaddRobertson
ChaddRobertson

Reputation: 643

I am getting an error of 404 stating that the page does not exist

I'm developing a desktop application using Tauri and Sveltekit, the latter requiring Vite.

When following the Tauri documentation (particularly the method of creating additional windows at runtime using Typescript), I am getting an error of 404 stating that the page does not exist.

Below is my project structure:

enter image description here

Where my vite.config.ts file contents are as follows:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
import { resolve } from 'path'

export default defineConfig({
    plugins: [sveltekit()],
    css: {
        postcss: {
          plugins: [
            tailwindcss(),
            autoprefixer(),
          ],
        },
      },
    build: {
        rollupOptions: {
            input: {
                main: resolve(__dirname, 'build/index.html'),
                settings: resolve(__dirname, 'build/settings.html'),
            },
        },
    },
});

Where I attempt to create a new window as described by the documentation like follows:

async function openNewWindow() {
    const newWindow = new WebviewWindow(Math.floor(Math.random() * 1000).toString(), {
      url: 'settings.html',
      width: 800,
      height: 600,
    });

    newWindow.once('tauri://created', () => {
      console.log('New window created successfully.');
    });

    newWindow.once('tauri://error', (e) => {
      console.error('Failed to create new window:', e);
    });
  }

This results in the following (the window in the foreground is the newly created one):

enter image description here

If I adjust the url of the new window to be the index.html, I am indeed able to create a new instance of my application, as demonstrated below:

enter image description here

I realise this has something to do with the files being references within my vite.config.ts file, as well as the files themselves within my build directory, but I'm not sure why the index.html file works whilst the settings.html file doesn't. I can confirm that I have both a settings.html and an index.html file in my build directory.

I am running the development server using npm run tauri dev, and am not running the application in a browser. Builds also succeed.

Another thing potentially worth noting is that I get the following warning on build:

The following Vite config options will be overridden by SvelteKit:

build.rollupOptions.input

My build directory contents are currently as follows:

enter image description here

Upvotes: 4

Views: 264

Answers (1)

Nyssance
Nyssance

Reputation: 341

With tauri 2.0 + sveltekit

1.

config /src-tauri/capabilities/default.json(If you have several json, such as desktop.json, config all of them)

  "windows": ["main", "theUniqueLabel"],
  "permissions": [
    "core:default",
    "core:webview:allow-create-webview-window"
  ]

theUniqueLabelis your create window id

2.

if you config /src/routes/+layout.js

export const prerender = true
export const ssr = false

So you keep vite.config.ts default, don't need add anything and just change you path xxx.html to /xxx

  const webview = new WebviewWindow('theUniqueLabel', {
    url: '/settings'
  })

Forget xxx.html, just use sveltekit routes.

Upvotes: 0

Related Questions