Question 137891 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Is there a way to compile and bundle another html file in tauri?

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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",
        },
    },
  },
}));

  2. 0

    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
  },
  ...
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search