Using Svelte, Fable and Tauri

Question

I'm creating a Tauri app that uses Fable to compile F# to JS. And I want to use Svelte with it, too. So far, I have compiled my F# file to a .js file. I've created a .svelte file with the following contents (named App.svelte)

<script>
    import './App.fs.js'
</script>

<main>
    <p>{msg}</p>
</main>
<style></style>

My index.html:

<body>
    <script src="main.mjs"></script>
</body>

And my main.mjs:

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
});

export default app;

I run the program with npm run build. This compiles my F# files and they become ready. I run npm run tauri build -- --debug to compile my whole Tauri app and open it.

I do this, and nothing shows on screen. But when I look at the console, it says main.mjs cannot import.

Supposedly, I need to compile the Svelte files. But Svelte uses rollup and I think I need to use webpack to be compatible with Fable or Tauri.

All these files are in project/src.

I need to compile and use a Svelte file in an index.html

score 1 · Accepted Answer · answered May 12 '22 at 09:45

You should give us a reproducible example to show us how you configured your project and what you've tried to get it working.

I give you here in this answer a working example to study, more than answering your question as it miss a lot of details about your setup.

Basically, to npm run tauri build your app, you will want to configure your project in order to build the Fable code, then Svelte code and then bundle everything with Tauri.

Also, you are not required to use webpack. Rollup is good.

hint: if you really need webpack for some reason, just run it run it before rollup and you will find webpack svelte-loader on github

I published a working template project to answer your question that you could use/study to check what you are missing. It was just created by following this flow:

Project: https://github.com/flydev-fr/fable-svelte-tauri-app

create the Svelte app yarn create svelte-app
create the Tauri app yarn create tauri-app
create the Fable app

dotnet new --install Fable.Template
dotnet new fable

Then after that, it's just a mater of combining / merging everything, and adding Tauri to the Svelte app. Please check the project to see how I configured it

If you have more precise question, please make another question.

Using Svelte, Fable and Tauri

1 Answers1