Running Capacitor in a VS Code DevContainer

Introduction

Recently I switched my OS from Windows 11 to Linux Mint. After switching I decided to do my coding only in the DevContainers extension in VS Code. For the first couple of projects everything worked well with the templates provided by the extension, but then I started a project with Capacitor and I wanted to be able to run the project on my physical mobile device for testing purposes but after researching I found it quite difficult in order to acomplish that. So after a day of struggling, I finally succeeded and now I'd like to share that knowledge with you.

Prerequisites

This is a list of the prerequisites you need to get going:

1. Docker. Currently running on 24.0.7
2. VS Code with the DevContainers extension
3. A Capacitor (5.6.0) Angular (17.0.9) project
4. An Android phone with USB debugging enabled

The Fun Stuff

With your Capacitor project open in VS Code, click the Open Remote Connection button at the very left of the bottom toolbar in VS Code.

This will open a command palette with a couple of options. Click on the option that says Reopen in Container. Then it will give you templates to choose from. Select the template Node.js & TypeScript.

Next it will ask you what Node.js version you want to run, choose the one that your Angular runs on.

Next it will ask you what features you would like to add. Select the following:

1. Angular CLI (via npm)
2. Android SDK Platform Tools
3. Java (via SDKMAN!)

Next it will ask you if you want to keep the default options for the features you chose. Choose Configure Options. Now it will ask you to Select boolean options for Java, just click Ok. It will then ask you what version of Java to install, select 17. Then it will ask what JDK Distribution you want to use, I just kept it with the default of ms. From here on you can just select the default options.

Now you wait for the docker container to be created.

Once created, your devcontainer.json should look like the following:

{
    "name": "Node.js",
    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
    "image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
    "features": {
        "ghcr.io/devcontainers/features/java:1": {
            "version": "17",
            "jdkDistro": "ms",
            "gradleVersion": "latest",
            "mavenVersion": "latest",
            "antVersion": "latest"
        },
        "ghcr.io/devcontainers-contrib/features/angular-cli:2": {
            "version": "latest"
        },
        "ghcr.io/akhildevelops/devcontainer-features/android-cli:0": {}
    }

    // Features to add to the dev container. More info: https://containers.dev/features.
    // "features": {},

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [],

    // Use 'postCreateCommand' to run commands after the container is created.
    // "postCreateCommand": "yarn install",

    // Configure tool-specific properties.
    // "customizations": {},

    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
    // "remoteUser": "root"
}

You can take out the following options from the Java feature as they are the default values:

1. jdkDistro
2. gradleVersion
3. mavenVersion
4. antVersion

Next at the bottom of the json file, uncomment the line that says remoteUser. (I know its bad to run as the root user but I couldn't figure out how to add the user to the special group plugdev).

Your devcontainer.json should now look like this:

{
    "name": "Node.js",
    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
    "image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
    "features": {
        "ghcr.io/devcontainers/features/java:1": {
            "version": "17"
        },
        "ghcr.io/devcontainers-contrib/features/angular-cli:2": {
            "version": "latest"
        },
        "ghcr.io/akhildevelops/devcontainer-features/android-cli:0": {}
    },

    // Features to add to the dev container. More info: https://containers.dev/features.
    // "features": {},

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [],

    // Use 'postCreateCommand' to run commands after the container is created.
    // "postCreateCommand": "yarn install",

    // Configure tool-specific properties.
    // "customizations": {},

    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
    "remoteUser": "root"
}

Next, connect your phone via usb and restart your docker for it to pick up your connected device.

Once docker has restarted and your VS Code window has reloaded, open a terminal and run the following command:
adb devices

This will start the adb daemon and it will attach your device.

Now you run the capacitor commands to get the app running and BOOM! it should be running on your phone.

Thanks for reading!