Should You Use fetch() To Read Embedded Files?

[trymeouteh]

Is it OK to use fetch() to read files that are in the tauri-app/src/ folder? I want to store template files such as EJS template files in the tauri-app/src/ folder and be able to read them as a string in my JS code and then use the template rendering engine to render them onto the page.

This is my simple example code to reading the tauri-app/src/index.html

(async function () {
    const response = await fetch('index.html');
    const TEXT = await response.text();

    alert(TEXT);
})()

Is this a good idea to use fetch() to achieve this in Tauri, to use fetch() to read internal app files? I always referred fetch() as a way to retrieve something using HTTP GET and in this case I am doing that.

However this code does work in development and production (at least on Linux). And when examining further, Tauri in development runs on localhost:1430 and in production runs on tauri://localhost which I got when looking at location.

[FabianLars]

sure, that should be fine. I'd just recommend to not do the same for very large files. But that's more about bundling itself, not fetch because when you use https://v2.tauri.app/develop/resources/ for the large files you could still use fetch() to get them, just with a different url.

[trymeouteh]

I can use use https://v2.tauri.app/develop/resources/ to "bundle" files in the Tauri app and simply use fetch() to read those large bundle files?

Where is the $RESOURCE file in my Tauri app directory? And what would be the URL to access the resource folder using fetch()?

[FabianLars]

Where is the $RESOURCE file in my Tauri app directory?

This depends on the platform and may change unexpectedly. You usually use https://v2.tauri.app/reference/javascript/api/namespacecore/#convertfilesrc to ask tauri for the correct url. That url would also be ready for use in fetch()

[trymeouteh]

sure, that should be fine. I'd just recommend to not do the same for very large files

What would be considered a large file in this case? I was planning on using it for EJS template files, CSS stylesheets, and JS scripts file mostly.

Is there a way to achieve this without using the @tauri-apps/... import modules and instead use the __TAURI__ window object?

To make this work, I made a small HTML file named tauri-app/src-tauri/hello.html as my resource which simply contains a <h1> tag saying "Hello World". I added this script in the tauri-app/src/index.html to try and fetch the contents of tauri-app/src-tauri/hello.html...

(async function () {
    const RESOLVED_RESOURCE = await __TAURI__.path.resolveResource('hello.html');

    alert(RESOLVED_RESOURCE)

    const URL = __TAURI__.core.convertFileSrc(RESOLVED_RESOURCE)

    alert(URL)

    const response = await fetch(URL);

    const TEXT = await response.text();

    alert(TEXT);
})()

And these are the console logs I get from this...

[Error] Cross origin requests are only supported for HTTP.
	(anonymous function) (127.0.0.1:69)
[Error] Fetch API cannot load asset://localhost/%2Fhome%2Fjohn%2FDesktop%2Ftauri-app%2Fsrc-tauri%2Ftarget%2Fdebug%2Fhello.html due to access control checks.
	(anonymous function) (127.0.0.1:69)
[Error] Unhandled Promise Rejection: TypeError: Load failed
	(anonymous function) (127.0.0.1:69)

And if I cannot use the __TAURI__ window object. How do I load the @tauri-apps/... imports? Do I need to create a ESM or UMD bundle with the @tauri-apps/... packages using Rolldown/Rollup?

[FabianLars]

What would be considered a large file in this case? I was planning on using it for EJS template files, CSS stylesheets, and JS scripts file mostly.

that all sounds small enough for the normal src dir. I was thinking more like videos, audio, and large images. So files that are at least a few MB.

Is there a way to achieve this without using the @tauri-apps/... import modules and instead use the TAURI window object?

Yes, all apis in the npm package are exposed in window.__TAURI__. your code seems correct.

[trymeouteh]

I am still having issues accessing files that are resources, however I will keep tinkering with it.

Thank you for the feedback.

[FabianLars]

Yeah, trying to load them as html source will be tricky, the asset protocol may not set all the required headers for that (i think there's some open issue for that?). Let me know if you can't find a solution (but really need it) and we'll check when we can take a look.

[manimovassagh]

To answer your follow-up about using __TAURI__ without a bundler and loading resource files:

The CORS error with asset://localhost

The convertFileSrc function converts an absolute file path to an asset://localhost/... URL. In development mode, your app runs on http://localhost:1420, so fetching an asset:// URL triggers a cross-origin error. This only happens in dev — in production, both your app and asset URLs use the tauri://localhost origin, so it works.

Fix for dev mode: use the Tauri FS API instead of fetch

For reading resource files as strings, skip fetch entirely and use the fs plugin through __TAURI__:

<script>
async function loadTemplate() {
    const contents = await __TAURI__.fs.readTextFile('hello.html', {
        baseDir: __TAURI__.path.BaseDirectory.Resource
    });
    alert(contents);
}
</script>

Make sure you have the fs plugin enabled in your capabilities:

{
  "identifier": "fs:allow-read-text-file",
  "allow": [{ "path": "$RESOURCE/**" }]
}

And add your resource files in tauri.conf.json:

{
  "bundle": {
    "resources": ["hello.html"]
  }
}

Using __TAURI__ without a bundler

The __TAURI__ global is available automatically when you set "withGlobalTauri": true in your tauri.conf.json under app > withGlobalTauri. No bundler or npm imports needed — all the APIs are on the window object.

For your use case of loading EJS templates, CSS, and JS files — if they are part of your frontend source (src/), just use fetch('filename.ejs') directly. Those files are served by the dev server in dev mode and bundled into the app in production. The fetch approach you started with is fine for files in your frontend directory. Only use the resource/FS API for files that live outside the webview's served directory (like files in src-tauri/).