Building SAMA mobile client with Capacitor

How to turn a web app into a mobile app in just 3 clicks

We all used to dream about writing a code that could be replicated through all possible platforms so that we could write JS code for Web 💻 and then use it for native apps 📱 such as Android and iOS and now we are able to say it out loud — it came true.

🧰 Core of tools

Greet Capacitor that we utilized within SAMA client to create Web Native apps building web-first without sacrificing full access to native SDKs when they need it. Briefly, Capacitor is a software tool 🪛 developed by Ionic that helps developers to create cross-platform mobile applications. It allows the use of web technologies like HTML, CSS, and JavaScript to build applications that can run on iOS, Android, and even web browsers with a single codebase.

Capacitor by Ionic - Cross-platform apps with web technology

So we extended SAMA client with Capacitor integration and now it can be built 📲 for native platforms. As for adding Capacitor to the existing app, so it turned out straightforward enough and it only requires from you covering several minor steps 🔧 which can be done for a few minutes. Much more interesting is how it works on the native platforms and I will pass you through it explaining details of the Capacitor workflow.

🔹 Building process

First, as soon as you are ready to test your web app on a mobile device 📱, you will need to build your web app for distribution in order to use it with Capacitor 📦. Usually, you don’t need to worry about how to build your app, just follow ordinary steps you do every time to build 🔨 the web app. Using SAMA client repository this command will be:

npm run build

🔹 Code conversion

Second and the most fundamental, when you prepared your build, you will need to push ⬆️ your web code to the web native Capacitor application. To do this, you can use the command:

npm run capacitor:sync

This command will copy over your already built web bundle to both your Android and iOS projects as well as update the native dependencies that Capacitor uses. After syncing your web bundle to your native projects, you will be able to test your application on mobile devices.

🔹Result preview

To test a debug build of your Capacitor app on an iOS device run:

npm run ios

for Android:

npm run android

Once, you have tested your application, you will need to think through compiling your native binary to distribute to other mobile devices. As Capacitor doesn’t have any command that will help you with it, you will be in charge of opening your target platform’s IDE: Xcode for iOS and Android Studio for Android to compile on your own the final binary and then bring it to App Store and Google Play Store respectively.

📃 Conclusion

As you could notice the process of delivering the application with the same codebase to different platforms is easy enough and SAMA client did a step forward to provide you this opportunity. Now you are not limited with only SAMA Web application, it got more flexible and can be wrapped with Capacitor to build a robust mobile app that will be waiting to be published in corresponding stores.

📌 Try SAMA

To run SAMA server locally — follow https://github.com/SAMA-Communications/sama-server. Frontend app is available at https://github.com/SAMA-Communications/sama-client.

Discover, enjoy, and all feedback is welcome. We will be thankful a lot for every GitHub star, issue, or comment!

SAMA-Communications