Skip to content
FreqKnow

Astro on Android with Tauri

This guide will walk you through how to setup a Astrojs Project primarily for Android Support using Tauri.

Guide is tailored to work on these Operating Systems and shells

OSDebianUbuntuAntixArch
ShellBashZSHFish

Prerequisites

  • You need to have an App Icon Ready in either .svg, .png or .jpg format in you [project]/public/ folder
  • As of today, tauri doesn’t fully support SSR mode in astrojs. so to be on the safe side, you need to be on the SSG mode for eveything

Tooling Setup

  1. Install Rust and System Depedencies

    Terminal window
    sudo apt update
    sudo apt install libwebkit2gtk-4.1-dev \
      build-essential \
      curl \
      wget \
      file \
      libxdo-dev \
      libssl-dev \
      libayatana-appindicator3-dev \
      librsvg2-dev
    curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh &&
    rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android

  2. Setup Android Studio

    Download and Install Android Studio

    Extract it into the /opt/ directory in linux

    Terminal window
    sudo tar -xvf ~/Downloads/android-studio-2024.3.1.14-linux.tar.gz -C /opt/

    run this to setup all your environment variables

    Terminal window
    cat << 'EOF' >> ~/.bashrc
    export PATH="$PATH:/opt/android-studio/bin"
    export JAVA_HOME=/opt/android-studio/jbr
    export ANDROID_HOME="$HOME/Android/Sdk"
    export NDK_HOME="$ANDROID_HOME/ndk/$(ls -1 $ANDROID_HOME/ndk)"
    EOF

    Now Open up Android Studio with this commnad

    Terminal window
    studio

    Open up SDK Manager from More Action > SDK Manager and install the following:

    1. SDK Platforms > Android <version> ("<Code>") (Adnroid 10.0 (“Q”) will work)
    2. SDK Tools > Android SDK Build-Tools <version>
    3. SDK Tools > NDK (Side by side)
    4. SDK Tools > Android SDK Command-line Tools (latest)
    5. SDK Tools > Android SDK Platform Tools

    Now, Add Android Studio as an Desktop Application that shows up in App Selection Menues Across the OS

    Terminal window
    # Step 1: Create the desktop entry directory if it doesn't exist
    mkdir -p ~/.local/share/applications
    

    cat > ~/.local/share/applications/android-studio.desktop << 'EOF'
    [Desktop Entry]
    Version=1.0
    Type=Application
    Name=Android Studio
    Comment=Android Studio IDE
    Exec=/opt/android-studio/bin/studio.sh
    Icon=/opt/android-studio/bin/studio.png
    Categories=Development;IDE;
    Terminal=false
    StartupWMClass=jetbrains-studio
    EOF
    

    chmod +x ~/.local/share/applications/android-studio.desktop
    

    update-desktop-database ~/.local/share/applications

Build Your AstroJs Android App!

I recommend initializing Tauri mannualy instead of using a Preconfigured Template because of several automation tricks built into the Tauri CLI that make your required configs easy to configure (eg. seeting up name, icons, etc). so this guide will assume that you have already initialized your astrojs project

  1. Initialize Tauri

    Terminal window
    bun add -D @tauri-apps/cli@latest &&
    bun tauri init

    Fill in the Options that it asks

    ✔ What is your app name? astrojs-tauri
    ✔ What should the window title be? astrojs-tauri
    ✔ Where are your web assets located? ../dist
    ✔ What is the url of your dev server? http://localhost:4321
    ✔ What is your frontend dev command? bun dev
    ✔ What is your frontend build command? bun run build

    Edit the Identifier Property in ./src-tauri/tauri.conf.json File with the project name without spaces like this

    {
      //...
      "version": "0.1.0",
     "identifier": "com.tauri.dev",
     "identifier": "com.<project-name>.dev",
      "build": {
        //...
      }
      //...
    }

  2. Setup Tauri for Android Support

    Initialize Android Target

    Terminal window
    bun tauri android init

    give it the Icon’s Path

    Terminal window
    bun tauri icon ./public/logo.svg

    Code Signing

    run this and fill out all all options correctly

    Terminal window
    /opt/android-studio/jbr/bin/keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

    Create a file named src-tauri/gen/android/keystore.properties and add content according to this template

    password=<password defined when keytool was executed>
    keyAlias=upload
    storeFile=<location of the key store file, such as /Users/<user name>/upload-keystore.jks>

    Edit the src-tauri/gen/android/app/build.gradle.kts file and do the following

    • Add the needed import at the beginning of the file: 
      import java.io.FileInputStream
    • Add the release signing config before the buildTypes block: 
      defaultConfig {
        ...
      }
      

      signingConfigs {
          create("release") {
              val keystorePropertiesFile = rootProject.file("keystore.properties")
              val keystoreProperties = Properties()
              if (keystorePropertiesFile.exists()) {
                  keystoreProperties.load(FileInputStream(keystorePropertiesFile))
              }
      

              keyAlias = keystoreProperties["keyAlias"] as String
              keyPassword = keystoreProperties["password"] as String
              storeFile = file(keystoreProperties["storeFile"] as String)
              storePassword = keystoreProperties["password"] as String
          }
      }
      

      buildTypes {
          ...
      }
    • Use the new release signing config in the release config in buildTypes block: 
      buildTypes {
          getByName("debug") {
              ...
          }
          getByName("release") {
              signingConfig = signingConfigs.getByName("release")
              ...
          }
      }

  3. Build the APK

    Terminal window
    bun tauri android build --apk --target aarch64

    APK will be present at ./src-tauri/gen/android/app/build/outputs/apk/universal/release cd and share it with Nemo File Explorer

    Terminal window
    cd "./src-tauri/gen/android/app/build/outputs/apk/universal/release"
    nemo .