Compose Multiplatform in Action: First Battle, Setting Up the CMP Environment
Introduction
The Compose Multiplatform (CMP) UI framework takes Kotlin code sharing capabilities to a new level
You can implement user interfaces once
and use them on all target platforms—including iOS, Android, desktop, and web
Today we'll start step by step with setting up the environment
Goal
We want to create a CMP project capable of producing multi-platform applications (Android, iOS, Web, Desktop)
So first we need to understand how to set up a CMP project
You can install based on the items listed below
Some are optional
You can choose what to install based on your own needs
- Android Studio
- Java and JDK
- Xcode
- Kotlin plugins
- (Optional) Kotlin Multiplatform plugin
- (Optional) CocoaPods
- (Optional) kdoctor
- (Optional) Browsers
CMP Environment Setup - Installing Essential Tools
It helps check if all necessary components in your environment are ready
Install kdoctor using the Terminal command
brew install kdoctor
Then simply run kdoctor to perform the check
For example, in my environment
it detected that I hadn't installed the Kotlin Multiplatform Plugin
kdoctor
In short
when you see all [v] marks
it means your environment is correctly set up
If kdoctor diagnoses any issues in your environment:
[x]: Any failed checks that need fixing
You can find problem descriptions and potential solutions after the * symbol.
[!]: Warning checks
These might be optional installations
Just reminders of what you could install
First, go to the Android Studio official website
to download the IDE
Then, if you're on MacOS, open the downloaded .dmg file
and drag the IDE to your Applications folder
If you're on Windows, run the .exe file and select the installation directory
(Image shows Mac installation)
so the Kotlin Plugin is essential
However, modern Android Studio versions come with it integrated
Once you install Android Studio, the Kotlin Plugin is already installed
(Newer IDE versions take care of this for you)
So you can proceed to open Android Studio
If you do encounter any issues
go to Tools > Kotlin > Configure Kotlin in Project
to let the IDE check if it's installed
Newer versions of Android Studio IDE already handle this for you
If you're unsure whether it's installed
the IDE has a built-in download option
You can check for JDK installation at:
Click Android Studio > Settings or use shortcut Command + ,
Navigate to Build, Execution Deployment > Build Tools > Gradle
Click the dropdown menu and select from existing options in your environment
or click Download JDK to download it
Additionally
I recommend using sdkman (Optional)
It allows you to manage SDKs in your environment via command line
Since we're focusing on CMP
I'll just introduce a few commonly used commands
Feel free to look up more online if interested
View currently configured sdk
sdk current
List available and downloadable Java SDKs
sdk ls java
Set JAVA environment (xxx name can be found using sdk ls above)
sdk using java xxx
we need to download the Kotlin Multiplatform plugin
Open Settings > Plugin > Marketplace
Click install
After completion, click Apply and then Restart the IDE
This enables Android Studio to automatically create basic KMP project content
when using Create New Project
It's like having a built-in template creator
For reference, see the KMM Plugin official Release
Additionally, for CMP specifically
there's an official online method for creating basic CMP projects
(If you forgot the difference between KMP and CMP, refer to Day 1 article, Compose Multiplatform in Action: Taking It Easy, An Introduction to CMP)
This is through the online webpage
which lets you create a project and import it into the IDE
The choice between methods comes down to:
KMP: Using the KMM plugin focuses more on Native UI + common logic development
CMP: Using the online KMM Wizard focuses more on Compose UI + common logic development for multiple platforms
That's all for this introduction
When we start detailed project development later
I'll explain how to use the Wizard
If you're on macOS
and want to run iOS apps
you'll need Xcode
The method is simple
Go to the App Store, search for Xcode
and download it
If you're using another operating system
you can skip this step
though you won't be able to build iOS apps
There might be workarounds?
But those probably won't follow the standard approach XD
If you anticipate using iOS frameworks, you can install this now
If not, you can wait until needed
Install CocoaPods using the command
brew install cocoapods
However, to install via brew
you'll need a newer version of Ruby
According to the official site, you need at least version 3.3.4
Depends on: ruby 3.3.4 Powerful, clean, object-oriented scripting language
You can check your environment's version with
ruby -v
If your version is too old
first reinstall it
brew reinstall ruby
Then use brew install cocoapods
If you want to create Web applications
you'll need a browser that supports Wasm garbage collection (GC).
Here's the official information
You need to check your OS's Browser version
The following environments are currently supported
Chrome and Chromium: Supported from version 119.
Firefox: Supported from version 120.
Safari/WebKit: Wasm GC is currently in development
Browsers like Safari might not fully support it yet
so you might not be able to run everything completely
If you need to develop Web apps
try following the information above
usually means you'll be unfamiliar with how to configure its environment
but with a little guidance
it becomes much easier to get started
Overall
you don't need prior experience with Compose Multiplatform, Android, or iOS
you can start from zero, gradually familiarize yourself with Kotlin, and then master CMP step by step
If you have any questions or issues, feel free to discuss in the comments section, and we can learn and grow together.
That's all for this article, thank you for reading and for your support!