Create Capacitor Android Mobile Application in Wappler, with Android Studio (GUIDE)

There has been recent discussion on replacing Cordova with Capacitor for building mobile and desktop applications, so thought I’d give it a go to see how simple it is to get an Android Application up and running using Wappler, Capacitor, and Android Studio.

Here is a simple guide to building your first Android application (I’m running Ubuntu but it should be pretty much the same for ALL Operating Systems).


Firstly lets start with a template starter Project.

We are going to use App from the Web Templates:

We’ll need to make a couple of changes to the directory structure.

We should have something that looks like this (obviously I have edited it to acknowledge a brand in the header bar and a new heading.

Next we are going to add Capacitor to our newly created application:

Run the following commands inside the terminal and the root of your Project

npm install @capacitor/core
npm install @capacitor/cli --save-dev

The directory structure and files will be updated to provision for Capacitor files.

We need to initialise Capacitor within the Project:

npx cap init

You will be requested to enter a couple of details about your application, so we are going to provide a name and an App Package ID. Name is simple, just call it whatever the name of your Project is, and App Package ID must begin with com. So we’ll use com.wappler.capapplication (example, you can change wappler and capapplication to whatever you want).

Add Android to the application:

npm install @capacitor/android
npx cap add android

Believe it or not you are DONE!

As Wappler has no way to execute the newly built application you will need to open Android Studio.

Wait for the application to by indexed and Gradle to complete its tasks.

Now click the Run App button (looks like a green play button). Wait a few minutes and your application will fire in to life.

You can now make changes to your application within Wappler and simply run (in a terminal):

npx cap run android

Which will update the design (you may see an error as Wappler currently has no way of opening a device/emulator to display the application within, BUT maybe that will come soon).

I hope you have found this helpful!

Happy Christmas!


Community Page
Last updated: