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).
capacitor.config.json and change the
webDir value from
build. Finally, let’s build and copy of our project to an Android-friendly environment.
$ ionic build $ npx cap copy $ npx cap add android
— Sorry to interrupt this program! 📺
Are you interested in learning Vue.js? If so, I highly recommend you try The Vue.js Master Class course by Vue School. Learning from a premium resource like that is a serious investment in yourself.
Plus, this is an affiliate link, so if you purchase the course you help Alligator.io continue to exist at the same time! 🙏
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
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
And there you have it.