Intro: From SvelteKit Web App to Desktop with Tauri
What's going on guys, it's Cooper Codes. In this video we are going to take this CodeShare SvelteKit application that I created in a previous video and we are going to turn it into a desktop application. In order to do this we are going to use a toolkit called Tauri, which allows you to build desktop applications from modern front-end frameworks such as SvelteKit, Next.js, and more. Tauri is built on Rust and allows us to create desktop applications for all major desktop platforms.
Why Tauri and What Features It Adds
Tauri has a bunch of features that allow you to expand upon your SvelteKit application to make it even better as a standalone application. For example, you have app storage so you can access a user's folder, native notifications, and things like that. We're not going to be getting into every single detail of Tauri in this video, but this is a great start for anyone who wants to develop desktop applications with SvelteKit. This tutorial is meant to be very general, so if you have a SvelteKit application right now you can do the exact same steps I do and you can just replace it with your own project.
If you want to create the exact project that I'm using for this video, I'm going to have this link in the description where you can copy this and then clone this repo and you'll have the exact same code as me. Just to show you guys, I have that entire GitHub repo I just showed you and it's in a folder on my computer and it's running locally over here. Now we can get started on setting up the prerequisites for Tauri. So I will make a very important point here: I'm going to show personally the setup for Windows. If you're using a different operating system you can go to the prerequisites link and scroll down and find the setup for your operating system. I'm on Windows, so I'm going to show you guys Windows. The first thing we need to install is the Microsoft Visual Studio C++ build tools. We can go to the link in the description and download the C++ build tools.
Installing WebView2 and Rust
You should get an exe like this. You can just run it and like anything else you can go through the installation process. If something comes up I'll tell you guys what to do. We want to make sure to check 'Desktop development with C++' and to be safe download the exact Windows SDK 10.0.19041 that they show. Those checked boxes should look something like that, then press install. Admittedly I'm destroying my watch time by doing this, but this download is going to take a while so go do something fun and hopefully you come back to the video. It has to install a good amount of stuff for desktop development. This one's going to take a while, but we can continue downloading the other prerequisites. The next thing we need is WebView2. This might already be part of your current version of Windows, but if not we can go to Microsoft's website. To make things simple, download the Evergreen Bootstrapper which will get the correct file for WebView2. Press download and accept whatever Microsoft asks. If your computer already has it, it will say you're good to go. If not, run the simple download and you'll be on your way. Finally, we have to download Rust because Tauri is based on Rust. Go to rust-lang.org/tools/install and download rustup-init.exe for 64-bit, run the file, press 1 to proceed, and press enter. Rust will install everything. If you run into issues with path variables not recognizing packages, restart your computer; sometimes a restart fixes path problems.
Configuring SvelteKit for Static Generation
At this point we've installed everything needed to work with Tauri and create desktop applications. Now we are going to do two different things: change our SvelteKit application a little bit so it's ready to be a desktop application, and make a small Rust project that helps us run our actual desktop application. Don't worry, this isn't a Rust tutorial; we are just going to get everything configured. For now let's configure our SvelteKit project. The first thing we are going to do is make a change with something called SSG, which means static site generation. When we work with desktop applications we don't need server-side rendering because this isn't going to be hosted on a web server; that is why we have to enable SvelteKit to be a statically generated site. To get this adapter, run npm install as a dev dependency: --save-dev @sveltejs/adapter-static. Then open svelte.config.js and change the imported adapter from adapter-auto to adapter-static. Save the file. Inside your main +layout.ts that covers the entire app, set export const prerender = true and export const ssr = false. If your project doesn't have a +layout.ts, create it and add those exports. This is a preference; check adapter docs if you prefer SPA-like behavior instead of pre-rendered static output.
Initializing Tauri, Running Dev, and Building
Now we are going to create the Rust part of our project. Rust gets involved because it's how our SvelteKit application communicates with Windows. SvelteKit by itself does not understand Windows, so Tauri helps translate SvelteKit code into something that runs as a native desktop application. The Rust project will live side-by-side inside our SvelteKit project; it creates a folder to hold all the Tauri functionality. In your SvelteKit project, open package.json because we want the keyword 'tauri' recognized by npm. In scripts you can set 'tauri': 'tauri' if desired. In order to use Tauri on the command line we need the Tauri CLI: npm install --save-dev @tauri-apps/cli. After installing the CLI, run npm run tauri init. Name the app 'codeshare', set the window title to 'CodeShare', and for the build folder point to ../build instead of ./public because that's where the static-built project outputs. For the dev frontend command use npm run dev, and for build use npm run build. The init creates a src-tauri folder with Rust and Tauri configuration. Now run npm run tauri dev. The first time, it may download and compile Rust dependencies and take a while. At the end it will compile and build the application and you will have a real Windows application running. You can still use all app features like creating and deleting snippets. To produce a distributable executable, run npm run tauri build. You need a unique identifier for your project; I used 'cooper.codes.code.share.video' in tauri.conf.json under src-tauri. The build process will generate a target folder; inside target/release you'll find codeshare.exe. Run that file without a dev server and the app runs standalone. I found Tauri super cool, although I ran into some issues with documentation for building with SvelteKit. Hopefully this video helps someone with that process. Let me know in the comments if you find Tauri interesting; I might do more videos. I'm just scratching the surface here. Hope you have a great time building applications with Tauri, and hopefully this has been helpful. Thanks so much for watching.
