Prerequisites
- Windows os (not tested on macos or linux)
- rust environment
- node environment
- NVM for Windows (recommended)
Create tauri app with svelte
https://tauri.studio/en/docs/getting-started/intro
Run below command
yarn create tauri-app
And you will see below logs:
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.2: The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > eslint-config-react-app@5.2.0" has incorrect peer dependency "eslint-plugin-flowtype@3.x".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
success Installed "create-tauri-app@1.0.0-beta.4" with binaries:
- create-tauri-app
We hope to help you create something special with Tauri!
You will have a choice of one of the UI frameworks supported by the greater web tech community.
This should get you started. See our docs at https://tauri.studio/
If you haven't already, please take a moment to setup your system.
You may find the requirements here: https://tauri.studio/en/docs/getting-started/setup-windows/
Press any key to continue...Presse any key and set up project as below:
? What is your app name? svelte-on-tauri
? What should the window title be? Svelte on Tauri
? What UI recipe would you like to add? (Use arrow keys)
> Svelte (https://github.com/sveltejs/template)
? Add "@tauri-apps/api" npm package? (Y/n)
? Enable Typescript? (Y/n)
...Now it create an tauri app with Svelte template.
When app is created run app with below command:
cd svelte-on-tauri
yarn install
yarn tauri devIf you see 'HELLO WORLD' in read on a windows app, it runs successfully.
Set up counter UI
Add material ui on svelte using svelte material ui library
yarn add @smui/buttonEdit App.svelte to add a button to increase counter
<script lang="ts">
export let name: string;
import Button from "@smui/button";
let counter = 0;
function handleIncreaseClicked() {
counter++;
}
</script>
<main>
<h1>Hello {name}!</h1>
<p>
Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn
how to build Svelte apps.
</p>
<Button on:click={handleIncreaseClicked}>Increase</Button>
<p>Counter: {counter}</p>
</main>
<style>
...
</style>Re-run and you can see the increase button and Counter value.
Set up material theme
Add svelte-material-ui package
yarn add -D svelte-material-ui smui-theme
npx smui-theme template src/theme
yarn buildEdit index.html
...
<head>
...
<link rel="stylesheet" href="build/smui.css" />
...Edit package.json to add below script and re-run
...
"scripts" {
...
"prepare": "smui-theme compile public/build/smui.css -i src/theme"
...
},
...Run app
yarn tauri dev
Set up dark theme
This is optional.
Edit package.json
...
"scripts" {
...
"prepare": "npm run smui-theme-light && npm run smui-theme-dark",
"smui-theme-light": "smui-theme compile public/build/smui.css -i src/theme",
"smui-theme-dark": "smui-theme compile public/build/smui-dark.css -i src/theme/dark"
...
}
...Edit public/index.html
...
<head>
...
<link rel="stylesheet" href="/build/smui-dark.css" />
...Run added command and run app
yarn smui-theme-dark
yarn tauri dev
Done!
The whole source is shared on https://github.com/yeoupooh/svelte-on-tauri.
