Getting Started With Tauri Mobile
The new alpha version of Tauri is here, and brings with it a new way to build cross-platform mobile apps!
If you’re already familiar with using Tauri, or at least some Rust & Web Dev experience, you’ll be happy to know that a new alpha version has been released that offers devs the ability to use the same code framework as their desktop applications…for mobile! Feel free to jump right into the example source code for the project used in this article to see the inner goodness of how it can be achieved!
What is Tauri
For those of you who have not yet become familiar with one of the newest development frameworks on the block, or perhaps are new to programming in general, allow me to give you a brief introduction!
Tauri is a toolkit that helps developers make applications for the major desktop platforms — using virtually any frontend framework in existence. The core is built with Rust, and the CLI leverages Node.js making Tauri a genuinely polyglot approach to creating and maintaining great apps.
First Steps
First things first, if you’ve never used Tauri for development, it’s probably a good idea to get it set up! Since I primarily do most of my development on Linux (Arch), that’s what I will outline here. You can find the entire documentation on Tauri’s website for your own system if it’s different:
sudo pacman -Syu sudo pacman -S — needed \ webkit2gtk-4.1 \ base-devel \ curl \ wget \ openssl \ appmenu-gtk-module \ gtk3 \ libappindicator-gtk3 \ librsvg \ libvips
Make sure Rust is installed as well using their installer script:
curl - proto '=https' - tlsv1.2 https://sh.rustup.rs -sSf | shFor Android Projects:
rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android
Another key application you need to install on your system is Android Studio. You can follow the installation instructions for your particular setup provided on their official website.
Since the development of the code for this article is being done on an Arch-based Linux system, it’s possible to simply utilize the Arch User Repository (AUR) as a quicker means of installing Android Studio and the related tools package:
#Using Yay for package management
yay -S android-tools android-studio
#Using Pacman
sudo pacman -S android-tools android-studioOpen up Android Studio and navigate to the SDK Management window:
Be sure to select, and click apply, to install the following components:
- Android SDK Platform
- Android SDK Platform-Tools
- NDK (Side by side)
- Android SDK Build-Tools
- Android SDK Command-line Tools
Once we have completed the initial setup, the only thing remaining to do is update our shell’s resource file to include a couple new environment variables. Open up your .bashrc, .zshrc, or config.fish and add the following new variables.
Note: Your NDK and Android Studio paths/versions may be different.
Make sure to source your new config before proceeding:
Project Setup
After getting all the dependencies installed, it’s time to move on to creating a new mobile project!
There are a number of different ways to generate the initial project structure, but for this example, we’ll stick with using the create-tauri-app installed using cargo.
At this point, you should have everything set up, so go ahead and navigate to the directory where you want your project to be and run the following to get started:
cargo install create-tauri-app cargo create-tauri-app --alpha --mobile
Follow each prompt and select how you plan to develop your new application:
Making Changes
At this point, everything that you need to develop your new application are in place! If you’re unfamiliar with using Tauri, you’ll find a src-tauri directory inside your project folder, which holds all of the Rust backend code that your app uses.
You’ll also see the standard src directory, which houses all of the code for the User Interface (comprised of files corresponding to the framework you chose to use during setup).
Let’s go ahead and open up the project and make some changes, and after that build and run our shiny new mobile app!
The create-tauri-app creates a basic application structure that’s already good to run and test out, but since we’re looking to create a mobile-focused app, let’s go ahead and add some additional React libraries from two excellent frameworks to create some new components.
This example takes advantage of the following React frameworks:
Both frameworks require only a couple steps to integrate into your project. Like most, the first step is to install them from the root directory of the project:
npm i mdb-react-ui-kit @fortawesome/fontawesome-free npm i @mui/material @emotion/react @emotion/styled npm i @mui/icons-material
Create Some Components
OK, I know it took a few steps to get here…but now we can create some awesome-looking components for our new mobile app! Let’s go ahead and take a look at the primary screen for this app to get a sense of how the different components fit together to form a working mobile interface.
Be sure to check out the source code for this example on GitHub for the entire project layout and component files!
Building the App
After creating some screens, adding your components, and styling everything to your liking…it’s time to build and run the new app! This can be done either on a physical device, or more conveniently, an emulated device using Android Studio.
We’ll go ahead and go with the latter for this example, but before we open up Android Studio, we need to have Tauri create the needed Android project directory for us first. To do this, simply run the following from the project root:
npm run tauri android init
That’s it! If you’re working on an iOS project, you’ll of course replace androidwith ios.
Everything is in place now to run the app on our emulator to test and see in action! The command to run the application in development mode is similar to any other Tauri app:
npm run tauri android dev [--open]
The — open switch is optional and can be used to open Android Studio if it’s not already running. Be sure to have an emulator device created in Android Studio before testing!
You can also run the following to simply develop your frontend without having to also connect to an emulator:
npm run tauri dev
Time to Install
After making some changes, adding some components, and testing your new interface out on an emulator or physical device…it’s time to compile a shiny new binary! In this case (since we are building the app for Android), the compilation process will output both a regular .apk file for installation on a device, as well as an .aab archive bundle. The latter of which is used by the Google Play Store for distribution, should you ever want to release your new mobile application for the rest of the world to experience!
The command to build a production-ready binary/bundle is basically the same as when testing, simply change the last argument of the command:
npm run tauri android build
After the build process finishes, you’ll see the full path of the build output displayed which you can then copy/upload to wherever. You can also use the direct path of the new .apk file to install it directly onto your emulator device to run via Android Studio:
npm run tauri android build && \
$HOME/Android/Sdk/platform-tools/adb -s emulator-'<device_number>' \
install $PROJECT_DIR/src-tauri/gen/android/$PROJECT_NAME/ \
app/build/outputs/apk/universal/release/app-universal-release-unsigned.apk
Next Steps
Congratulations! At this point, you should hopefully have a working mobile app that builds successfully and runs on a physical device and/or emulator! If you’ve hit a snag somewhere, don’t fret! There have been regular updates to the alpha repo as development continues, so be sure to check it periodically as well as update your `cargo` project dependencies!
Tauri Mobile has the potential to become a new player in mobile development.
I hope to have peaked your interest in this new, exciting feature that this awesome framework has been developing, and will only get better as more developers use it and provide critical feedback!
If you’re looking for other interesting programming articles, be sure to subscribe and follow me for alerts on any new articles when they come out!
The Code
Find all the source code for this article on Github:
