Tutorial

Ionic, Capacitor and Android Studio

Published on February 7, 2020
    Default avatar

    By Vincent Medina

    Ionic, Capacitor and Android Studio

    While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

    Preparing your mobile app for an emulator can seem like an overwhelming task at first. However, once the specifics are laid out, it’s actually a fairly painless process and an exciting time for any developer. With Android Studio being OS independent, it’s not only a great starting point for us to begin, but also just as useful for seasoned mobile app developers as well.

    For the example in this post, we’ll be making use of React for our Ionic app, but this would work just as well using Angular.

    Getting Started with Ionic and Capacitor

    To begin, we’ll assume the Ionic CLI is installed, and let’s create a sample app.

    $ ionic start ionic-cra blank --type=react --capacitor
    

    Now if you’ve already created an app, or began coding, there’s nothing to worry about. Let’s move onto our next step, which is initializing Ionic and Capacitor.


    Enter the following command, enter a name for your project, and select @ionic/react as your project type.

    $ ionic init
    

    Next, let’s add Capacitor to our app:

    $ npm i --save @capacitor/core @capacitor/cli
    

    These next steps are surprisingly fast and will lead us right to Android Studio.

    $ npx cap init
    
    • App name: Your App (likely your project name),
    • App package: com.yourapp (domain extension followed by your website’s name)
    • npm client: either is okay (for mobile apps I use npm to be safe).

    Now, edit capacitor.config.json and change the webDir value from www to build. Finally, let’s build and copy of our project to an Android-friendly environment.

    $ ionic build
    $ npx cap copy
    $ npx cap add android
    

    Android Studio

    Open Android Studio to the android folder we’ve created in the root directory of your project during the previous steps.

    Once the project has fully synced, you may need to setup your virtual device. If needed, press “Ctrl + Shift + A” and search for AVD Manager to get started.


    Hopefully, you’ve made it this far and are ready to run your project by selecting the run drop down in your toolbar and, you guessed it, select run 'app'.

    Now if you receive the following error while using Ubuntu/Linux, no worries.

    Grant current user access to /dev/kvm

    Simply edit permissions for /dev/kvm by opening terminal and entering this next command:

    $ sudo chmod 777 /dev/kvm
    

    Problem solved.

    And there you have it.

    App screenshot example

    Thanks for reading and see you next time! ⏰

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors
    Default avatar
    Vincent Medina

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel