I have a website I am bundling with Vite, and I have a subpage that is a Flutter web application. One of my directories holds a flutter web build, which is just an HTML/CSS/JavaScript bundle. When I build and preview my application, I receive errors in my web console with my manifest.json file.
My directory structure is as follows:
-vite.config.js src: - index.html - index.ts - app: - *All files in my flutter web build, but important ones listed below:* - index.html - flutter.js - flutter_service_worker.js - main.dart.js - manifest.jsonIn the index.html file of my Flutter web build (src/app/index.html), I have the base url set to '/app/`
<!--src/app/index.html--><head> <base href="/app/" /> ... </head>When running yarn dev, my website works as expected: navigating to localhost:3000/app/ shows the Flutter web build without error.
However, when building the project and then previewing the project, I receive a blank screen and warnings in my web console when navigating to localhost:4173/app/.
Below is my web console output:
data:application/js…:1 Manifest: property 'start_url' ignored, URL is invalid.data:application/js…:1 Manifest: property 'src' ignored, URL is invalid.data:application/js…:1 Manifest: property 'src' ignored, URL is invalid.Even by changing the start_url given by the Flutter build (".") to the URL of where my vite preview is hosted locally ("http://localhost:4173/app/") and remove the icon and src properties, I still get a blank screen when I go to localhost:4173/app/. This also results no errors or warnings in my web console or terminal, so I am not really sure where the error stems from.
Below is my vite.config.js:
// vite.config.jsimport { defineConfig } from "vite";import { resolve } from "path";export default defineConfig({ // makes so that all vite commands primarily act from the src directory root: "src", publicDir: "../public", build: { emptyOutDir: true, outDir: "../dist/web", rollupOptions: { input: { main: "src/index.html", app: "src/app/index.html", }, external: ["splash/style.css", "src/splash/style.css", "authCheck.js", "app/flutter.js", "flutter_service_worker.js", "main.dart.js", "loadDart.js","manifest.json"], }, }, resolve: { alias: { vue: "vue/dist/vue.esm-bundler.js", }, }, define: {"process.env": process.env, },});manifest.json:
{"name": "...","short_name": "...","start_url": ".""display": "standalone","background_color": "#0175C2","theme_color": "#0175C2","description": "...","orientation": "portrait-primary","prefer_related_applications": false,"icons": [ {"src": "icons/Icon-192.png","sizes": "192x192","type": "image/png" }, {"src": "icons/Icon-512.png","sizes": "512x512","type": "image/png" } ]}Is there anything that I have to add to my vite.config.js to ensure that the Flutter webpage scripts are being build and referenced correctly?
I followed the vite docs for creating a multi-page app, and set all paths as relative to the project root.