4

I am using tauri (1.2.5) with reactjs and I'm creating a splashscreen for my app. I've done this by creating a splashscreen.html file in the root directory (same dir as index.html) with this content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Elect</title>
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/splashscreen.tsx"></script>
  </body>
</html>

In splashscreen.tsx is the splashscreen design and reference to a splashscreen.scss for animation. The splashscreen window is refered to in the tauri.conf.json file like this:

{
    "width": 400,
    "height": 200,
    "decorations": false,
    "url": "splashscreen.html",
    "label": "splashscreen",
    "center": true,
    "transparent": true,
    "skipTaskbar": true,
    "alwaysOnTop": true,
    "title": "Elect"
}

Everything works when using dev mode (yarn tauri dev), but when I build the app, the splashscreen.html file is not included or compiled so is not found by the app when run (it seems to default to rendering index.html). I can't just copy the file into the dist dir as it includes a sass file.

Are there any solutions to this?

TEFOwen
  • 81
  • 5
  • Fair enough, but if the Rust code isn't the problem you don't need the Rust tag, and if it *might* be the problem you should probably post the relevant bits – Jared Smith May 04 '23 at 19:45
  • Yes it is a possibilty that the solution involves rust code as there are rust build scripts (auto generated by tauri) that compile the project. – TEFOwen May 04 '23 at 19:46

2 Answers2

1

The reason that the splashscreen.html file is not included in the dist could be that it's not being recognized as an entry point by the build system. You have to add an entry point for splashscreen.html in module.exports of your webpack.config.js file, which is used by Tauri to build your app:

// webpack.config.js

module.exports = {
  ...
  entry: {
    index: './src/index.tsx', // your main entry
    splashscreen: './splashscreen.html' // add this entry point
  },
  ...
};
Jishan Shaikh
  • 1,572
  • 2
  • 13
  • 31
1

The solution was editing vite.config.ts like this:

import { defineConfig } from "vite";

export default defineConfig(async () => ({
  ...
  build: {
    ...
    rollupOptions: {
        input: {
            index: "./index.html",
            splashscreen: "./splashscreen.html",
        },
    },
  },
}));
TEFOwen
  • 81
  • 5