Tauri is a new Rust-based framework that builds an x86_64 cross-platform application for Windows, macOS, and Linux.
In this tutorial, we'll use Tauri and Next.js to build a desktop-based cross-platform application and publish it to the Snap store and AppImage.
So why is building a cross-platform app, that works on Windows, Mac, and Linux, important these days? Well, it helps companies target a larger audience and increase their revenue, without having to build three separate apps.
Many companies and developers use Next.js as a front-end when building a website. In this tutorial, we'll use Next and Tauri to build a desktop-based cross-platform application that'll be available on Windows, macOS, and Linux.
Demo of the project
To build this cross-platform application, you need Tauri, markdown, Contentlayer, pnpm, and Next.js. If you check how my application looks, you can install the application with snap-cli, AppImage, or download the application via the link and install it.
Let's see what these tools do:
- we'll use Next.js for building the frontend part of the website
- the markdown npm package helps convert markdown files into HTML
- the Contentlayer npm package helps us manage markdown files in the project.
- we'll use Tauri to build the cross-platform application binary
- and finally, we'll use pnpm as our Node package manager.
Table of contents:
- What is Next.js?
- What is Tauri?
- Computer Architecture
- How to Create a New Project with Next.js and Tauri
- How to Build an Application with Tauri
- How to Build an Application for the Snap Store or Snapcraft
- How to Build a Cross-Platform Application with GitHub Actions
- How to Publish the App
What is Next.js?
Next is a framework base on React. It has many features that let you build a website and enhance the user experience.
To learn more about Next, you can read this helpful tutorial I found on freeCodeCamp written by Reed Barger.
What is Tauri?
Tauri is a new framework that helps you build cross-platform desktop applications. Tauri is built based on the Rust language. Rust is faster, more secure, and has fewer memory issues than other languages.
Tauri has many features, but I'll mention some of the important ones for a front-end developer.
- Tauri supports a lot of front-end frameworks and libraries, for example, React.js, Next.js, Vite, and Svelte kit.
- With Tauri, you don't need to learn GTK, GJS, and app build commands or AppImage builder.
- You can quickly build a cross-application bundler size with one command.
- Tauri provides an update handler to update older Tauri versions to the newest. You do not need to use other services and libraries to achieve the self-update functionality.
All these tools help you write code faster and create a production-ready app in less time. But the big thing Tauri provides is beginner-ready, easily understandable documentation.
GTK is a free and open-source cross-platform widget toolkit for creating graphical user interfaces for applications.
Every operating system comes with different architecture. Building cross-platform applications or performing cross-compilation is not easy. Based on the architecture, you can understand where the application is run. In other words, which architecture requires running our applications like i386, ARM, or x86_64?
Rust uses different types of architecture to install itself. In my case, my laptop hardware support x86_64 and I have Ubuntu installed. On Ubuntu x86_64, the default
stable-x86_64-unknown-linux-gnu Rust toolchain is used to build Tauri applications.
The Rust toolchain builds AMD (x86_64) applications. That is why Tauri builds cross-platform application (for Windows, macOs, and Linux distros) but does not build cross-architecture ones (builds applications for all ARM, i386, and x86_67 architecture).
How to check your architecture in Linux by command:
How to check which toolchain Tauri is using:
The toolchain is a utility provided by Rust itself. You can install different toolchains with the
You can use different types of Rust toolchains according to your computer's architecture. You can easily check which toolchain is installed in your operating system with the
In my project, I'm using pnpm to create a new project, so I use the
pnpm command. Again, based on the toolchain, we build apps for different architectures.
The default Ubuntu (x86_64) is based on the
stable-x86_64-unknown-linux-gnu toolchain. The Rust
stable-x86_64-unknown-linux-gnu toolchain builds only AMD-based applications.
The Rust toolchain is different according to the operating system and distro you're using. The default Rust toolchain is installed when you install Rust on your computer.
Here are the commands to check your architecture:
Tauri officially supports macOS, Windows, and Linux distros and you can't build mobile applications with Tauri (you'll face lots of issues, and after resolving them all you'll end up building your mobile app directly).
I found a great tutorial on the Rust toolchain as well as cross-compilation. The tutorial guides you and provides you with a deeper understanding of the Rust toolchain.
You can use the
rustup command to install a different type of toolchain if you'd like. To learn more about the Rust toolchain and the
rustup command, I'd suggest starting with the Rust toolchain docs.
How to Create a New Project with Next.js and Tauri
You can create a Tauri app with bash, cargo, PowerShell npm, yarn, or pnpm. We'll use pnpm to create a new Tauri set-up in this tutorial. pnpm is the new package manager for Node.js.
Create the UI template in Tauri
You can use different types of front-end frameworks for the Tauri app, for example, Vue, React, Svelte, Solid, Next.js, Preact, Angular, and Svelte. I've chosen to use Nextjs as the front-end template for our Tauri app in this tutorial.
Create a new application with pnpm
You can use any other node package manager to create a new app like yarn or npm. I choose the pnpm node package manager, because pnpm is fast compared to yarn and npm.
Now Tauri has created the my-demo app successfully. You can directly change the directory (folder)
cd my-demo with the change directory (cd) command. Then you can run the
pnpm install command to install all the dependencies required for the project. Finally, run the
tauri dev command to lunch a new Tauri application window.
After downloading and compiling the code, you can see a new window open in your system using the
pnpm tauri dev command.
The default Tauri folder structure comes with
pnpm create tauri-app:
- You use the
next.config.jsfile for Next.js configuration.
next-env.d.tsfile automatically generates for TypeScript
package.jsonfile contains all information for npm, yarn, and pnpm.
pnpm-lock.yamlfile is created by pnpm to store all package information with the version.
README.MDfile contains all the information about the project.
srcfolder contains all the Next.js code with pages, components, and CSS files.
- You use the
src-taurifolder for Rust and Rust configuration.
src-tauri/iconscontains all icons for the app.
src-tauri/Cargo.lockgenerated by cargo to store all package information.
src-tauri/Cargo.tomlgenerated by cargo and store all packages and confirmation for the project.
src-tauri/srcused to write the Rust code.
src-tauri/targetgenerated by the
pnpm tauri devcommand. It contains all the binary for the project.
tauri.config.jsonfile used for Tauri configuration.
Create the UI for the app with Next.js
First, I need to copy my old posts along with the public, components, and pages folders and paste them into the new Tauri project. Then I'll remove the bootstrap CSS, and use Tailwind CSS to design the application's layout.
I already explained the process step-by-step on how to install TailwindCSS with Next in this article. You can read and follow the same setup to install Tailwind if you don't have it installed already.
Generate an icon for the application
The icon is important for the application. The user will click on the icon to open your application in Windows, macOS, and Linux.
Generating icons for applications with various types and sizes can be complicated. You need icons for Windows, macOS, and Linux. Every operating system has its own guidelines for icons.
Tauri comes with a CLI tool that generates cross-operating system icons for applications based on icon configuration in Tauri. Here's the command to generate the icons:
You can use an online website to generate icons for Tauri, and then add all icons into the
You can change the icon configuration in the
How to Build an Application with Tauri
To build the application in Tauri, you need to run only one command in the terminal. Tauri automatically generates the build applications.
The first application is for the
.deb Debian-based distro and the second application is appImage. The application build file changes from operating system to operating system.
AppImage is a universal application distribution for the cross-Linux distro. So you create one AppImage and run your application on any distro.
The first time you run the
tauri build command, you may face a bundle identifier error in the terminal.
To solve the bundle identifier error, first open the
my-demo/src-tauri/tauri.conf.json file and find
identifier. Then change the
"identifier": "com.tauri.dev" value according to your app. Make sure the
identifier value is unique across the application.
After changing the
identifier in the
tauri.conf.json file, rerun the
pnpm tauri build command.
After successfully running the
tauri build command, Tauri generates two files:
The bot file binary works only for the amd64 architecture and doesn't work on the arm and i386 architecture.
The file extension tells us where we use it.
.debfile extension is used for Debian.
.AppImagefile extension is used for all Linux distros to install the app.
.dmgfile extension is used for macOS.
.msifile extension is used for Windows.
.snapfile extension is used for the Linux distro.
To test for both binary
my-demo_0.0.0_amd64.AppImage, first install them locally and check that everything is working fine.
❯ dpkg -i static-blog-app_0.0.2_amd64
Firstly add the file permission for executing and then run the file.
Step 1: run
chmod +x my-demo_0.0.0_amd64.AppImage
Step 2: run
./my-demo_0.0.0_amd64.AppImage hit enter to run
AppImage base binary.
Tauri automatically generates both
.AppImage files with their own file names.
Both files use the same naming conversion syntax all around the world. This file name conversion is not for Tauri. The Flatpak builder and Snapcraft also use the same kind of file naming syntax.
How to Build an Application for the Snap Store or Snapcraft
Snapcraft or the Snap store is a Linux application distribution. It helps distribute your applications across Linux distros. Users can install your application with one click and the use of a command line (Terminal).
Snapcraft is maintained and built by Canonical (Ubuntu). Canonical provides all Linux application distributions and does not work for macOS and Windows.
Before building a snap, first you need to install Snapcraft.
How to build an application for the Snap store
I will guide you with a simple way to generate the snap file for Snapcraft. The snap file is a binary file, similar to the
.deb file. The Snap store uses a special
.snap extension for the file. That indicates that it's a snap application installed on a linux distro.
You can also develop your first snap app quickly if you are a beginner – simply follow these steps (we'll go through each one by one):
- Install the tauri-snap-packager npm package
- Add configuration in the
- Build the snap
- Handle any errors
- How to fix the tauri-snap-packager takes too much time error
Install tauri-snap-packager npm package
Add configuration in the package.json file
After installation, complete the tauri-snap-package npm package. Now configure the
"tauri-snap": "tauri-snap-packager" tauri-snap-package script in the
Build the snap
Now you run the
pnpm tauri-snap command in your project folder.
tauri-snap automatically creates a snap folder in
src-tauri/target. Inside the snap folder
pnpm tauri-snap creates a new
snapcraft.yaml file with all the configurations. All the configuration is based on your Tauri configuration.
How to fix the errors
You'll get an error while validating
snapcraft.yaml with the
pnpm tauri-snap command.
Your application name may contain some words that are not allowed, like spaces, numbers, uppercase letters, and so on. For example, Static-blog-website does not allow you to use your name with a capital letter. Simply use a small case word for a name like static-blog-website.
You might also see an error
you need 'multipass' set-up to build snaps when running the
pnpm tauri-snap --trace-warnings command.
--trace-warnings Node.js flag helps debug or trace the error.
To solve the error, you must install the multipass package in Ubuntu. The tauri-snap-package uses the Snapcraft command as a background to build a snap file. So Snapcraft requires multipass to build a snap package.
Tauri-snap-packager takes too much time.
If the tauri-snap-packager takes too much time to build the snap binary or you feel your application is stuck and does not show any output in the terminal, then just stop the command. The tauri-snap-packager isn't working for you, so you can use the
This error means that the
pnpm tauri-snap the command is not working and it takes too much time. It's likely because the tauri-snap-package npm package isn't working correctly.
To solve this issue, run the snapcraft command in the same folder where your snap folder was created. Before running the snapcraft command, first, install the snapd command tool. Snapd is a REST API daemon for managing snap packages. To learn more about snapd, I found a great article written by Oyetoke Tobi Emmanuel.
After installation is complete, run the
snapcraft command in the
tauri-app/src-tauri/target folder. The
target folder is generated by the
pnpm tauri dev command.
You may get a snap "core18" has no updates available error with Snapcraft. But the core18 is not a big issue. Simply update your distro package with the
sudo apt-get update && sudo apt-get upgrade command, then restart your terminal or laptop. Here's a youtube tutorial that can help you solve your core18 error problem.
"Snapd has not logged" means that first, you need to login into your snapcraft account. For login run
After you solve the core 18 issue, now run the
snapcraft command again and build your snap binary file.
The Snapcraft creates a new binary
static-blog-app_0.0.0_amd64.snap file. Now the
static-blog-app_0.0.0_amd64.snap file is ready to publish on the Snapcraft website or snap store.
How to install static-blog-app_0.0.0_amd64.snap locally in the system
If you install the
static-blog-app_0.0.0_amd64.snap file locally with the following command, you might find the signatures metadata error.
Here's the error:
To solve this error, you need to run the snap command with the
How to Build a Cross-Platform Application with GitHub Actions
GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform or pipeline that allows you to automate tasks like building, testing, and deployment.
You can triage GitHub actions on certain events like somebody pushing new code to the GitHub repository and running tests on the code. If the test passes then the code gets added to the main or master branch.
If you want to build cross-platform applications for Windows, macOS, and Linux, the easiest way is using the GitHub actions workflow. This workflow runs on a specific event like push, pull, and so on.
To try this out, you'll need to create a new action in your project. First, create a new
.github/workflows folder. After in the
workflows, create a file with any name with a
The Tauri app provides a GitHub action configuration. With Tauri actions, you can quickly build cross-platform applications for Windows, macOS, and Linux distros with the GitHub workflow.
Following the GitHub action, you can build your application on every push after successfully building the application and show all files in the GitHub release assets section.
How to Publish the App
Publishing the package is the core of this article. A lot of people build their own Linux applications. But then they can't figure out how to submit the app on various distributions like Snapcraft, AppImage, and Homebrew.
So now I'll show how to submit a static-blog-app to Snapcraft and AppImage.
How to publish the app into the snap store or snapcraft
To publish a new package on the snap store, make sure you have a
.snap binary available. Otherwise, first, build the
.snap binary for the application (which we already went over above).
Go to the
target or whatever folder where you created the
.snp binary. Then run the
snapcraft command. Make sure you first log in with your Snapcraft account. For login, run
snapcraft login. Then run the following command with the argument I mentioned:
After successfully getting into your account, then you can add or change the information regarding your package icon, name, and so on.
devel mode, you'll see a message on the application installation page.
devel means development mode.
By default, your package publishes all the information collected by
src-tauri/target/snap/snapcraft.yaml in the edge release. To understand more about the Snapcraft release system, you can read the release documentation.
Make sure to use a banner image with a size of 720 x 240 for the snap.
How to publish your application on Snapcraft
When you upload your application to your Snapcraft account, your application is private. To change how it's published, drag your available release into one of the release channels.
Go to the dashboard> my snap> select your snap> releases, and according to your requirements, add your application to one of the provided releases. The default is edge release.
How to add an application to a stable release
To change the application to a stable release, go to the snap configuration
src-tauri/target/snap/snapcraft.yaml file and update your
grade: devel to
Now your application goes to stable release or channel and re-uploads your application.
Now you've successfully released your application in a stable release.
How to update your snap application
For updating the snap application, you need to make changes in the
tauri/target/snap/snapcraft.yaml file in the version section.
Now rebuild your application with the
After successfully building your application, re-upload your latest build, and your application will be updated on the snap store website.
How to publish applications in AppImage
AppImage helps you distribute your application across Linux distros. You don't need to install AppImage for it to work in your system.
Publishing the application on AppImage is a straightforward process. First, you need an AppImage URL and a GitHub account.
First, go to the appImage GitHub repository and click on this link.
After that, a new page is opened in the browser:
- Add your application name.
- Paste your image URL
- Add comment
- Click the new propose file button.
- Download the appimage.github.io repo in your GitHub account
- Create a new pull request into the appimage.github.io repository.
7. Add the comment and click the create pull request button.
Now your application is successfully submitted to the appimage.github.io repository. The appimage.github.io runs GitHub actions based on your application. Your application should pass all tests run AppImage. After that, your image should be successfully listed on AppImage so everybody can download your application.
If you submit an application on AppImage with a pull request, your GitHub action test will fail. You'll see the GLIBC_2.29' not found error.
I tried many ways to solve this issue, but I couldn't find a solution. If I do, I'll update my repository as well as this article.
If you're building the application with Tauri, do you have to code in Rust?
How do you build cross-platform architecture (cross-compilation) with Tauri?
You can build an application cross-architecture (cross-compilation) with Rust. Rust Toolchain helps you build cross-compilation applications.
What is the toolchain in Tauri?
The Rust toolchain helps you build an application on a different architecture. In rust, there are 86 toolchains available for a different architectures.
Can you use Tauri to build an Android or IOS application?
No, you can't use Tauri to build applications for Android and iOS. But there is a library that helps you build applications for mobile phones – I just haven't tested it yet. You can build applications with a toolchain. I'll soon write an article about this on my website.
Tauri provides a different type of API that helps enhance the user and developer experience. You can use the API to handle notifications, dialog, events, HTTP, and so on.
It's relatively easy to build cross-platform applications with Tauri. You can use any front-end framework for the application.
But other frameworks don't let you build various cross-architecture and cross-operating system applications, for example, Windows, macOS, and Linux distros.
Tauri comes with strong backend language support. With Rust, you can do anything you can with a low-level language. In addition, Rust provides memory safety, no garbage collector, and so on.
When building the Tauri application with Flatpak, I couldn't find a development and distribution solution. However, in the future, I will add it to the GitHub readme file.
I haven't covered how to distribute applications on Windows and macOS. I'm a Linux user and do not test applications on Windows and macOS. But there are lots of articles and videos on the internet you can check out to learn how to do that.
MacOS has a popular distribution platform called homebrew. The homebrew distribution system is similar to appimage.org. If you submit a new pull request for your application and pass all tests, your app shows on homebrew.
If you have any questions or suggestions related to developing and distributing a Tauri application, you can ask for help on the Tauri GitHub discussions.