Compose Multiplatform Deployment Guide in Jetpack Compose

Jetpack Compose, Google’s modern UI toolkit, has revolutionized Android app development. However, its capabilities extend beyond just Android. With Compose Multiplatform, developers can now build UIs that target multiple platforms, including Android, iOS, desktop, and web, from a single codebase. This capability significantly reduces development time and effort while ensuring UI consistency across different platforms.

What is Compose Multiplatform?

Compose Multiplatform is a declarative UI framework powered by Kotlin. It allows you to write UI code once and deploy it on multiple platforms, sharing a significant amount of code between them. This not only reduces redundancy but also helps in maintaining consistency and reducing bugs across platforms.

Why Use Compose Multiplatform?

• Code Sharing: Write UI code once and share it across Android, iOS, desktop, and web platforms.
• UI Consistency: Ensure a consistent look and feel across all your apps.
• Reduced Development Time: Develop faster with a single codebase, reducing the need for platform-specific UI development.
• Modern UI Framework: Benefit from the modern, declarative approach of Jetpack Compose.
• Kotlin Powered: Built on Kotlin, leveraging its concise syntax, null safety, and interoperability.

Setting Up a Compose Multiplatform Project

Before diving into the deployment process, it’s crucial to set up your project correctly. Here’s a step-by-step guide to creating a Compose Multiplatform project:

Step 1: Install Required Tools

Ensure you have the following tools installed:

• Java Development Kit (JDK): Version 11 or higher.
• Android Studio: Latest version with Android SDK.
• Kotlin Plugin: Latest version.
• Gradle: Latest version.
• Xcode: Required for iOS development on macOS.

Step 2: Create a New Project

Use the Kotlin Multiplatform wizard in IntelliJ IDEA or Android Studio to create a new project:

1. Open IntelliJ IDEA or Android Studio.
2. Click on “New Project.”
3. Choose “Kotlin” from the left menu.
4. Select “Compose Multiplatform Application.”
5. Configure the project name, location, and other settings.
6. Click “Create.”

Step 3: Project Structure

Understand the project structure generated by the wizard:

• commonMain: Contains the common UI code that will be shared across all platforms.
• androidMain: Contains Android-specific code.
• iosMain: Contains iOS-specific code.
• desktopMain: Contains desktop-specific code.
• jsMain: Contains web-specific code.

Step 4: Add Dependencies

Add the necessary dependencies to your build.gradle.kts file:

plugins {
    kotlin("multiplatform") version "1.9.21"
    id("org.jetbrains.compose") version "1.6.0"
}

group = "org.example"
version = "1.0-SNAPSHOT"

repositories {
    mavenCentral()
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
    google()
}

kotlin {
    androidTarget {
        compilations.all {
            kotlinOptions {
                jvmTarget = "11"
            }
        }
    }
    
    jvm("desktop") {
        jvmTarget = "11"
    }

    js("browser") {
        browser {
            commonWebpackConfig {
                cssSupport.enabled = true
            }
            testTask {
                useKarma {
                    useChromeHeadless()
                }
            }
        }
        binaries.executable()
    }
    
    iosX64()
    iosArm64()
    iosSimulatorArm64()
    
    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation(compose.runtime)
                implementation(compose.foundation)
                implementation(compose.material)
                @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
                implementation(compose.components.resources)
            }
        }
        val androidMain by getting {
            dependencies {
                implementation("androidx.appcompat:appcompat:1.6.1")
                implementation("androidx.core:core-ktx:1.12.0")
                implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.2")
                implementation("androidx.activity:activity-compose:1.8.2")
                implementation(compose.uiToolingPreview)
                implementation(compose.ui)
                implementation(compose.material)
            }
        }
        val iosX64Main by getting
        val iosArm64Main by getting
        val iosSimulatorArm64Main by getting
        val iosMain by getting {
            dependsOn(commonMain)
        }
        val desktopMain by getting {
            dependencies {
                implementation(compose.desktop.common.swing)
                implementation(compose.desktop.ui)
            }
        }
        val jsMain by getting {
            dependsOn(commonMain)
            dependencies {
                implementation(compose.html.core)
            }
        }
    }
}

dependencies {
    components.all(Action {
        if (it.name.startsWith("org.jetbrains.compose.desktop")) {
            include(group = it.module.group, module = it.module.name, version = it.module.version)
        }
    })
}

Make sure to sync the Gradle file to download the dependencies.

Deployment Strategies for Different Platforms

Once the project is set up, you can proceed with deployment to different platforms.

1. Android Deployment

Android deployment is the most straightforward, given that Jetpack Compose was initially designed for Android.

Step 1: Build the Android App

Build the Android app using Android Studio:

1. Open the project in Android Studio.
2. Select “Build” > “Build Bundle(s) / APK(s)” > “Build APK(s)” or “Build Bundle(s).”

Step 2: Deploy to Device or Emulator

Deploy the APK to an Android device or emulator for testing:

1. Connect an Android device to your computer or start an Android emulator.
2. Click on “Run” > “Run ‘app’.”
3. Choose the device or emulator from the list.

Step 3: Publish to Google Play Store

To publish your app to the Google Play Store, follow these steps:

1. Generate a signed APK or Android App Bundle (AAB).
2. Create a Google Play Developer account.
3. Upload your app to the Google Play Console.
4. Fill in the required information, such as app name, description, and screenshots.
5. Submit your app for review.

2. iOS Deployment

Deploying to iOS involves building the app using Xcode, which requires a macOS environment.

Step 1: Build the iOS App

Build the iOS app using Gradle:

./gradlew :iosApp:linkReleaseFrameworkIosX64
./gradlew :iosApp:linkReleaseFrameworkIosArm64
./gradlew :iosApp:packageReleaseFrameworkIosX64
./gradlew :iosApp:packageReleaseFrameworkIosArm64

Step 2: Open in Xcode

Open the generated Xcode project:

1. Navigate to iosApp/iosApp/ in your project directory.
2. Open iosApp.xcodeproj in Xcode.

Step 3: Configure Signing and Capabilities

Configure the signing and capabilities in Xcode:

1. Select your project in the Project Navigator.
2. Go to the “Signing & Capabilities” tab.
3. Add your Apple Developer account.
4. Configure the necessary capabilities, such as Push Notifications or iCloud.

Step 4: Deploy to Device or Simulator

Deploy the app to an iOS device or simulator for testing:

1. Connect an iOS device to your computer or select an iOS simulator.
2. Click on the “Run” button in Xcode.

Step 5: Publish to App Store

To publish your app to the App Store, follow these steps:

1. Create an Apple Developer account.
2. Archive your app in Xcode (Product > Archive).
3. Distribute your app using Xcode (Window > Organizer > Distribute App).
4. Upload your app to App Store Connect.
5. Fill in the required information, such as app name, description, and screenshots.
6. Submit your app for review.

3. Desktop Deployment

Compose Multiplatform also allows you to deploy your app to desktop platforms (Windows, macOS, Linux).

Step 1: Build the Desktop App

Build the desktop app using Gradle:

./gradlew :desktopApp:packageDistribution

Step 2: Locate the Executable

Locate the executable file in the desktopApp/build/distributions directory.

Step 3: Run the Executable

Run the executable file to launch your desktop application.

Step 4: Package for Distribution

For distributing your app, you can package it using platform-specific tools:

• Windows: Create an installer using Inno Setup or similar tools.
• macOS: Create a DMG package using Disk Utility or Packages.
• Linux: Create a DEB or RPM package using the respective packaging tools.

4. Web Deployment

Compose Multiplatform enables you to deploy your UI to the web using Kotlin/JS.

Step 1: Build the Web App

Build the web app using Gradle:

./gradlew :jsApp:browserDevelopmentRun

Step 2: Locate the Output Files

Locate the output files in the jsApp/build/dist/js/developmentExecutable directory.

Step 3: Deploy to a Web Server

Deploy the output files to a web server:

1. Copy the files to your web server’s document root.
2. Configure the server to serve the index.html file.

You can use web servers like Apache, Nginx, or cloud platforms like Netlify, Vercel, or AWS Amplify.

Code Snippets and Examples

Here are some code snippets illustrating how to write UI components that work across multiple platforms.

Example: Common UI Component

This example shows a simple greeting component that can be used on all platforms.

import androidx.compose.foundation.layout.Column
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun Greeting(name: String) {
    Column {
        Text("Hello, $name!")
        Text("Welcome to Compose Multiplatform.")
    }
}

You can then use this component in your platform-specific code.

Example: Platform-Specific Adjustments

Sometimes, you may need to make platform-specific adjustments. You can use conditional compilation for this.

import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun PlatformSpecificText() {
    Text(
        text = when {
            isAndroid() -> "Running on Android"
            isIos() -> "Running on iOS"
            isDesktop() -> "Running on Desktop"
            isWeb() -> "Running on Web"
            else -> "Unknown Platform"
        }
    )
}

expect fun isAndroid(): Boolean
expect fun isIos(): Boolean
expect fun isDesktop(): Boolean
expect fun isWeb(): Boolean

Implement the expect functions in each platform-specific source set.

Android Implementation

actual fun isAndroid(): Boolean = true
actual fun isIos(): Boolean = false
actual fun isDesktop(): Boolean = false
actual fun isWeb(): Boolean = false

iOS Implementation

actual fun isAndroid(): Boolean = false
actual fun isIos(): Boolean = true
actual fun isDesktop(): Boolean = false
actual fun isWeb(): Boolean = false

Conclusion

Compose Multiplatform offers a powerful solution for building UIs that target multiple platforms from a single codebase. By following the setup and deployment strategies outlined in this guide, you can efficiently build and deploy your applications on Android, iOS, desktop, and web platforms. This not only saves time and effort but also ensures a consistent user experience across all your applications. Embracing Compose Multiplatform can significantly streamline your development process and help you reach a wider audience with your applications.