How to Build Cross-Platform Applications with Nx, Angular, and Capacitor

Disclaimer:

This setup works on Windows. If you are using WSL2, just know that you are making your life very difficult. At first, I tried to make this work in WSL2 but I quickly gave up as there are simply too many issues. I might go back at it once I have a completely working setup on Windows and also once I understand how all the pieces interact with each others.

Step 1: Install the Nx workspace

Nx can be installed using many different presets. Here we use a Angular Monorepo as we might later add other applications like a Nest.js backend.

npx create-nx-workspace@latest my-workspace --appName=frontend --preset=angular-monorepo

We name our Angular application frontend but you can change that to any other name. During the process, you will be asked a few questions, feel free to answer however you want as it doesn’t change much of what we are doing here.

Add @nxext/capacitor

This step is optional as the @nxext/capacitor package provides generators for configuring and running the Capacitor plugin, but you can also run the Capacitor commands directly. It will just work the same.

npm install --save-dev @nxext/capacitor

Configure Capacitor

After we added @nxext/capacitor, we use its generator to configure our Capacitor application.

npx nx generate @nxext/capacitor:configuration --project=frontend

After the generator has finished its work, you can show the different targets that were added to your project:

npx nx show project frontend

We will later use these commands to generate the application itself. The generator also created the capacitor.config.ts file under apps/frontend. You can open that file and see what it contains.

Step 2: Build the application on the Android platform

Requirements:

You need Android Studio already installed and properly configured. Also, you need to add CAPACITOR_ANDROID_STUDIO_PATH to your environment variables. This variable should point to the Android Studio executable. As I install Android Studio via Jetbrains Toolbox, on my machine it is installed here: %LocalAppData%\Programs\Android Studio\bin\studio64.exe. Your location might be different.

After Android Studio is installed, you also have to create a Virtual Device that later will be used to run the application.

Build the web application

Before anything, we build the frontend application. This creates it under dist/apps/frontend/browser. The Capacitor plugin looks for the web application in that folder.

npx nx build frontend

Add the Android platform

Adding the Android platform creates a new folder: apps/frontend/android. This folder contain the Android host application.

npx nx run frontend:add:android

Sync the Android application

This step finally synchronizes the assets of the Android application with what you have in the dist directory. After the command finishes you can check the apps/frontend/android/app/src/main/assets/public and it should be identical to what you have in the dist folder.

npx nx run my-app:sync:android

Step 3: Open, Run, Test your application

That’s pretty much it. You should now be able to open, and run the application.

Open in Android Studio

npx nx run frontend:open:android

Run the application on your web browser

npx nx run frontend:serve

Main issues

You can configure this with the CAPACITOR_ANDROID_STUDIO_PATH environment variable.

Add the CAPACITOR_ANDROID_STUDIO_PATH in your system environment variable and open a new PowerShell.

ERROR: JAVA_HOME is not set and no ‘java’ command could be found in your PATH.

Add the JAVA_HOME in your system environment variable and open a new PowerShell. My Java home is located in the Android Studio directory: %LocalAppData%\Programs\Android Studio\jbr.

Could not install Gradle distribution from … Reason: java.io.IOException: Incorrect function

Make sure your Gradle home is properly set and pointing to the .gradle directory in your Windows home directory and not to your WSL2 home directory.