Add capacitor to ionic Install Capacitor. This course will guide you step by step, from getting started with Ionic and Capacitor Jan 4, 2024 · This tutorial will walk you through how to easily make API Calls in a Capacitor project using the HTTP plugin. After the Capacitor core runtime is installed, you can install the Android and iOS platforms. android. Jul 17, 2024 · This blog post is part of the second episode of the Out-Of-The-Box With Capacitor series on our YouTube channel and the second AR tutorial on the blog. Jul 11, 2024 · In this guide, we’ll walk through how to integrate Capacitor with a Next. The project files used to build the native iOS and Android binaries is a plain iOS app for Xcode and a plain Android app using Gradle. Jun 7, 2021 · I have been building ionic for android and ios successfully until suddenly today something is wrong. Because the Ionic team is already in charge of Capacitor's official plugins and their APIs, you can use the Capacitor plugins directly like normal through the Capacitor Official Plugin API Documentation. Oct 27, 2020 · Yes, it is possible to use Cordova plugins with Capacitor. Once the app is ready we can add our iOS platform and then install the App icon plugin: ionic start capacitorIcon blank -- type =angular --capacitor cd Capacitor is an open source native runtime for building Web Native apps. Now we begin by creating a blank new Ionic application with Capacitor enabled. May 5, 2023 · This easy-to-follow tutorial from Robin Genz will walk you through how to build an Ionic Barcode Scanner with Capacitor. Run npx cap open @capacitor-community/electron to start your app in electron. The Capacitor app must use TypeScript for configuration. Running npx cap add ios and npx cap add android will create an ios and android folder that contain ordinary native platform projects - with the native Capacitor libraries already installed. Apr 8, 2020 · With 2. Jul 26, 2025 · Learn How to Add Biometric Authentication (Face ID & Fingerprint) to Your Ionic App with Capacitor Biometric authentication—Face ID, Touch ID, and fingerprint scanning—is now the gold standard for securing apps. Adding the iOS Capacitor iOS Documentation Capacitor features a native iOS runtime that enables developers to communicate between JavaScript and Native Swift or Objective-C code. com Capacitor is a powerful tool for shipping to native platforms like iOS and Android, separate from or alongside your web app. Learn how Ionic Capacitor enhances hybrid app development by extending native functionality, allowing seamless access to device features. If the app isn't Finally, add the scheme attribute inside the ios object in the Capacitor configuration file. js you can easily add Capacitor to your project and build a native mobile app from one code base!🔥 The fastest way to learn Ionic: ht The Capacitor and Cordova Android Permissions plugins are designed to support Android's new permissions checking mechanism. #capacitor #ioniccapacitor #ionic4 In this tutorial, We will discuss How to add Capacitor Existing Ionic Project. There are great, open-source Capacitor community plugins being built and used every day. I think this should be possible with the Capacitor command too. It installs dependencies for you and sets up your project. npx cap init [appName] [appId] //where appName is the name of your app, and appId is the Learn why your Ionic app should be powered by Capacitor and: How Capacitor works How to add Capacitor to Ionic apps Using Capacitor Plugins Capacitor native app builds Cordova plugins in Capacitor Native app builds All days will be delievered directly to your inbox. android, ios) Options --no-build: Do not invoke an Ionic build Feb 3, 2023 · In this article we will see step by step implementation of Ionic Video Player for Mobile and Web using Capacitor Video Player plugin. $ ionic integration enable capacitor This command installs @capacitor/core and @capacitor/cli in your project and creates a template basic capacitor. Using Capacitor with Ionicwhere appName is the name of your app, and appId is the domain identifier of your app (ex: com. But this doesn’t mean that you need Ionic Framework to use Capacitor, we can use Capacitor with any application having any UI Framework or even if it doesn’t have any 🙂 Dependencies To use the Capacitor, there are few dependencies which need to be fulfilled The base requirements are Node v8. The Ionic team, who built and maintain Capacitor, maintain a list of official plugins which are free for everybody to use. You just need to enable it in your ionic app, and choose what platforms you want to support. We are Mar 4, 2018 · In this tutorial, we walk through how to create a custom Capacitor plugin that will allow us to run custom native code in an Ionic application. Ionic Capacitor offers tools to generate and customize app icons and splash screens, ensuring your app reflects your brand identity. Xcode 16. Jul 2, 2018 · In this tutorial, you’ll learn how to use Capacitor and cutting-edge web technologies such as Vue. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. ionic capacitor sync will do the following: Perform an Ionic build, which compiles web assets Copy web assets to Capacitor native platform (s) Update Capacitor native platform (s) and dependencies Install any discovered Capacitor or Cordova plugins platform The platform to sync (e. Capacitor Android Documentation Capacitor features a native Android runtime that enables developers to communicate between JavaScript and Native Java or Kotlin code. 70 is out now! Here are some of the major features added for Angular and Capacitor. Readyyyyy!! To migrate Cordova to Capacitor, you should have a Cordova project first (LAMMO 😂). This Google Maps plugin is the latest addition to the suite of officially supported Capacitor integrations. Ionic Vue Quickstart covers the basics of Vue and Ionic, including any Ionic-specific features. app). If you follow the steps given in the Appflow SDK installation guide within a Capacitor a Capacitor Supported Plugins are also available, but work a little bit differently than their Cordova counterparts. Mar 10, 2021 · How to create a hybrid app for Android and iOS with an existing Angular PWA by using Capacitor and the Ionic Framework. UI Components Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Add a native platform to your Ionic project. This React tutorial teaches the fundamentals of Ionic app development by creating a realistic app step-by-step. config. Capacitor Android apps are configured and managed through Android Studio. android, ios) See full list on capacitorjs. create a new directory in the root of the project called Layouts and add a newfile ionicapp. https Using Native Plugins with Capacitor Although we have the ability to write our own custom native code or plugins if we want, generally most of the time we will utilise Capacitor Plugins to access various native functionality. A Digital pass can be added to Apple Wallet in a Capacitor app by downloading the pass from your backend, and using a Capacitor plugin to add it. For example, this API emits events when the app enters and leaves the foreground, handles deeplinks, opens other apps, and manages persisted plugin state. When I use the command: npm init @capacitor/plugin plg-download-manager to create the plugin, only the Sources and Tests folders are created i… Feb 6, 2020 · A quick guide to using Ionic with Capacitor in Android Studio. more Capacitor offers a collection APIs that make adding native functionality to your Ionic app as simple as using any JavaScript library. Depending on your preference, you can either add Capacitor to an existing web application or create a new Capacitor application with the Ionic Framework. com. Integrate Auth Connect into your Ionic app and get Azure Active Directory (AD) B2C up and running with this demo app and configuration. Nov 23, 2021 · At Ionic, we love our open-source community. Feb 28, 2018 · In this short tutorial we have seen how to add Capacitor to an Ionic 3 project. Is there any way to do it and generate resources using Feb 21, 2023 · In this article I will walk you through the process of running a mobile application built with ionic 6 framework, angular 14 framework and capacitor, on your physical android mobile device. @nxtend/ionic-angular uses the @nxtend/capacitor plugin to add Capacitor support to an Ionic Angular application in an Nx workspace. Learn more about Capacitor: - Main documentation: https://ion. Mar 18, 2022 · Historically, when working with Ionic/Capacitor, the CLI is the main interface developers use to invoke various functions. Once the platforms have been added to your package. Jul 23, 2025 · We are using capacitor for converting into android app. This Angular tutorial teaches the fundamentals of Ionic app development by creating a realistic app step-by-step. First, install the @capacitor/android package. If you are using Next. 0 The Capacitor Http API provides native http support via patching `fetch` and `XMLHttpRequest` to use native libraries. Learn how to use Ionic and Capacitor to build native mobile applications in this full course for beginners. The good news is that it's installed by default with @nuxtjs/ionic. Add the following code in the new file. Note: Use the native IDEs to change these properties after initial configuration. Installing Cordova Plugins Capacitor plugins are installed using your regular package manager and then synced to the native project (s). Installing Capacitor There are two ways to start using Capacitor: adding Capacitor to an existing frontend project (recommended), or starting a fresh project. Add Capacitor Begin by opening your project in the terminal, then either follow the guides for adding Capacitor to a web app or adding Capacitor to an Ionic app. This tutorial demonstrates the fundamental structure of an Ionic application and prepares you to integrate custom designs for your icons and splash screens. Developing these types […] Mar 4, 2018 · In this tutorial, we walk through how to create a custom Capacitor plugin that will allow us to run custom native code in an Ionic application. ts Nov 8, 2024 · Learn to create native apps using Ionic and Capacitor with this expert guide, covering development techniques, tools, and best practices for seamless app creation. When users tap or click on a deep link, the user is sent directly into your app without routing through the device's web browser or website first. Additionally, we are dedicating more internal resources to Capacitor as it becomes a key part of the Ionic offering. After you are done with the implementation you will have an identity token from Apple that you could use to build a full authentication flow with e. Apr 16, 2020 · I also didn’t use Capacitor but with Cordova this is possible via ionic cordova <path-to-folder>. Capacitor iOS Documentation Capacitor features a native iOS runtime that enables developers to communicate between JavaScript and Native Swift or Objective-C code. link/capacitor Usage: #capacitor #ioniccapacitor #ionic4In this tutorial, We will discuss How to add Capacitor Existing Ionic Project. Android Studio comes with a handy wizard for configuring App Links. Read to learn more about Capacitor configuration. Firebase or your own custom backend! Apple App Configuration Before we do How To Use a Capacitor Plugin Ionic Portals uses Capacitor under the hood, meaning that you can use Capacitor Plugins in your Portals. Apr 7, 2020 · To make this process easy for you, we’ll go through all necessary steps together in order to implement this new sign in functionality in your Ionic app using Capacitor. Created in 2018 by us, the team behind Ionic, Capacitor was built initially to replace Cordova as the de facto tool that web developers use for mobile, and its role in our stack. This crash course is a FREE offer from the Ionic Academy and doesn't require a paid membership! Apr 21, 2020 · Conclusion With Capacitor and the available APIs it becomes really easy to add Electron support to your Ionic app. These steps and code needed are outlined below. example. Jun 16, 2021 · If you haven’t used Ionic before, now is the time to set up your environment and install the Ionic CLI. my. This means you can take advantage of our suite of Capacitor Core Plugins in your Portals, as well as any plugins made by the community. If you’d like to explore this in detail, read how Capacitor Apps are Native Apps. Adding the iOS Ionic Framework Ionic Framework is a mobile-focused UI kit and set of utilities that enable web developers using Capacitor to get a native-quality app experience that follows platform conventions. Configuring AndroidDeeplinks (aka Android App Links) For a Deep Links guide, see here. vue. I don’t know enough about ionic to understand if I can just install the ionic CLI to add a cordova plugin in my capacitor project, or if it requires more configutation changes to use some ionic features. Make sure you also run the build command before, because Capacitor will sync your web build to the native platform folder – which is part of the magic of Capacitor. Goto capacitor website for more details. If you follow the steps given in the Appflow SDK installation guide within a Capacitor a Oct 19, 2021 · [ERROR] Unable to find command: cap build android ionic cap - Capacitor functionality These commands integrate with Capacitor, Ionic's new native layer project which provides an alternative to Cordova for native functionality in your app. Mar 3, 2021 · With Capacitor, you can easily access native device functionalities inside your PWA or native app, and by adding a static site hosting to the mix you get a simple and reliable workflow for building hosting your Ionic PWA! Capacitor: Cross-platform Native Runtime for Web Apps Capacitor is a cross-platform native runtime that makes it easy to build performant mobile applications that run natively on iOS, Android, and more using modern web tooling. Add Capacitor to your project using the ng-app schematic Install Capacitor. The second argument is May 15, 2022 · Create A NuxtJS Layout For Ionic Framework The application needs to be wrapped in the IonApp component and since we don't have a router, we need to create a Layout that will wrap all of the pages in the application. The --project-id is generated from name unless explicitly specified. Feb 26, 2019 · Capacitor, a project built by the team behind Ionic, is a great way to take your JavaScript web applications and get them running on iOS, Android, desktop (via Electron) or the web platform. Capacitor is a… Feb 20, 2023 · Have you ever wished you could publish your existing web application as a mobile app? In this article I will provides a detailed guide for building cross-platform mobile and desktop applications using Ionic, Angular, Capacitor, and Electron. Once configured, the getLaunchUrl() method in the App API will provide any URL the app was launched with, and the 'appUrlOpen Apr 17, 2025 · Capacitor apps are native apps. Jun 12, 2025 · Cordova and Ionic SDK Installation In this article Cordova Ionic (Capacitor) Ionic (Cordova) FAQ Show 3 more Important Currently, Cordova/Ionic packages only support Android platform. However, you don't have to run ionic cordova plugin add cordova-plugin-name, since that will effectively initialize Cordova for your app, which is not what you want. Ionic Framework is a mobile UI toolkit for building cross-platform apps based on JavaScript. Oct 12, 2021 · Explore Ionic data storage options: Ionic Storage, Capacitor Storage, plain SQLite storage, and Ionic’s Secure Storage solution. This is a simple and effective way to provide a pleasing visual experience to the user while the app is loading. To enable deeplinking through Android App Links, follow the official Android guide on Adding Android App Links. You can find the previous video here and blog post here For the longest time, creating immersive, adaptive, and interactive experiences was a time-consuming process. Install the core packages and easily add them to your project. g. Learn how to build Vue apps using the Ionic CLI. ionic capacitor build will do the following: Perform ionic build Copy web assets into the specified native platform Open the IDE for your native project (Xcode for iOS, Android Studio for Android) Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Developing for iOS with Capacitor (Recommended) Learn the fundamentals you need to know to start building iOS apps with Ionic Framework and Capacitor. 6. Feb 10, 2023 · Capacitor makes it possible for any web developer to build native iOS, Android, Desktop, and Progressive Web Apps, all with a single standard web codebase. Deeplinks (aka Universal Links) For a Deep Links guide, see here. Jul 17, 2023 · We’ve just purely used capacitor plugin & the capacitor CLI so far. Ionic will probably add Capacitor to Ionic’s CLI as the default tooling for building native applications when Capacitor is stable enough and can support all the necessary use cases that are currently covered by Apache Cordova. In the diagram above Aug 29, 2023 · This plugin allows us to natively add Google authentication to our Ionic apps with Capacitor. Cordova Plugins When developing an app that uses Capacitor, it's possible to use Cordova plugins. In this post, I will show you how to configure and implement CapacitorGoogleAuth step-by-step. How To Use a Capacitor Plugin Ionic Portals uses Capacitor under the hood, meaning that you can use Capacitor Plugins in your Portals. js and Ionic 4 web components to build cross-platform mobile applications for Android and iOS. Deploying to iOS and Android is easy with Capacitor setup for Ionic Framework apps. app --capacitor This will create a new blank Ionic/Vue application project inside the folder “ myApp ”, by enabling capacitor on it. There are some base plugins that are needed to run the . I noticed there is a “Splash Screen” and “Status Bar”. /backgroundApp npm install @capacitor/background-runner ionic cap add ios ionic cap add android Next, we need to add a file that holds our background tasks, so simply create one at src/app/runners/runner. json, you can run the following commands to create your Android and iOS projects for your native application. Ionic comes stock with a number of components, including cards, lists, and tabs. There is no guarantee they will be fully compatible, but you can install and use them in your project. xml file: The app name can be found within the <name> element. Using Appflow's deploy feature involves installing and configuring the cordova-plugin-ionic plugin properly. Install the plugin, sync, and then finish any required native project configuration (see Using Native Plugins with Capacitor Although we have the ability to write our own custom native code or plugins if we want, generally most of the time we will utilise Capacitor Plugins to access various native functionality. Add Capacitor to your project and create a config for your app Mar 6, 2023 · The easiest way to get started with Ionic Capacitor with React is a one-liner via the Ionic CLI although doing so will scaffold a project using create-react-app. Some of the information you will be prompted for is available in the Cordova config. In this article, we will explore how to incorporate Capacitor into a ReactJS project to build native mobile applications. Splash Screen Configuration:Open the capacitor. In spirit, Capacitor and Cordova are very similar. The Camera API provides the ability to take a photo with the camera or choose an existing one from the photo album. Capacitor and Cordova differ in that Capacitor: takes a more modern approach to tooling and plugin development treats native projects as source artifacts as opposed to build artifacts is maintained by the Ionic Team 💙😊 See the docs for more details. Running ionic start without any arguments will prompt you for information about your new project. Find all permissions here. Capacitor was designed primarily to drop-in to existing frontend projects, but comes with a simple starting project structure if you'd like to start fresh. Jun 10, 2020 · I recently started using ionic 6 and capacitor(not cordova), and I don't know how to replace its default application icon and splash screen. Next we’ll see how to use Capacitor plugins to access native device features such as the Camera and Geolocation. Build your Ionic App You must build your Ionic project at least once before adding any native platforms. Use the Cordova and Capacitor Calendar plugins from Ionic to add events to the system calendar of the mobile device you are on. The App API handles high level App state and events. 0, we are starting to make Capacitor the default for all new Ionic React and soon Ionic Angular projects, and expect us to be recommending Capacitor for all new Ionic apps and increasingly for enterprise apps as well. ts file in the root directory and add the following “SplashScreen:” section to the plugins, or replace your entire capacitor. A web build creates the web assets directory that Capacitor needs (www folder in Ionic Angular projects). Android Support API 23+ (Android 6 or later) is supported, which represents around 99% of the Android market. json file. Jun 16, 2024 · Capacitor, a tool created by the team behind Ionic, offers developers a seamless way to create cross-platform native applications using their existing web technologies. Don't worry--you can always change this later. $ ionic integrations enable capacitor The above command will initialize and add basic capacitor libraries to your Cordova project. This development guide covers how to run and debug Ionic apps on Android emulators and devices. Goto capacitor website for more details. The platform to add (e. This means teams can add arbitrary native code to the app and invoke it from the Web View through the Capacitor Plugin API. ionic capacitor run will do the following: Perform ionic build (or run the dev server from ionic serve with the --livereload option) Run capacitor run (or open IDE for your native project with the --open option) When using --livereload with hardware devices, remember that livereload needs an active connection between device and computer. Recently, there’s been a wave of fresh attention on The Camera API provides the ability to take a photo with the camera or choose an existing one from the photo album. Ionic Framework is created by the same company that makes Capacitor and is designed specifically with Capacitor in mind. Go to your project directory and run the below command to add the Capacitor traces to your Cordova application. Want to build your app? Want to add a platform? What about deploying to the simulator? All this is made possible by Ionic and Capacitor CLIs. 0+ is required (see Environment Setup). js project to build cross-platform mobile apps. The first argument is your app's name. Apr 27, 2023 · In this tutorial, we will learn how to build Capacitor apps with VanillaJS to create powerful native iOS and Android experiences. Explore its benefits and usage. Capacitor iOS apps are configured and managed with Xcode and CocoaPods. Deep Linking with Universal and App Links Platforms: iOS, Android Universal links (iOS) and App Links (Android) offer the ability to take users directly to specific content within a native app (commonly known as deep linking). Building the App & Adding Platforms Before adding any native platforms to this project, the app must be built at least once. Jun 5, 2019 · Who maintains the Capacitor? The capacitor is an Open source project backed by Ionic Teams. Read to learn more about deployment in our Ionic Documentation. Add Capacitor to your project and create a config for your app Capacitor Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. iOS Support iOS 14+ is supported. Once you're familiar with the basics, refer to the API Index for a complete list of each component and sub-component. Feb 22, 2023 · Adding Native Platforms with Capacitor To build your Ionic app with Capacitor, we need to create a native project for iOS. Learn to run your first Ionic app with Angular. Nov 10, 2024 · 0 I am developing an Ionic Capacitor plugin on the macOS operating system. js and leave it empty for the moment. Learn to run your first Ionic app with React. Capacitor uses WKWebView, not the deprecated UIWebView. Oct 4, 2023 · ionic start backgroundApp blank --type angular cd . Learn how to install Android Studio to get started building. Read to learn more. By default, a Capacitor project will be generated that will allow you to compile your application as a native platform. Well, today we’re thrilled to announce a new extension for Visual Studio Code that handles all of this, and so much more! Getting Apr 12, 2021 · What happens if you run capacitor add ios --verbose? Do you get more information? Can you post the output here? Mar 7, 2023 · How To Create A Mobile App Using Vite, Vue and Ionic Capacitor In 8 Minutes Including Explanation # ionic # vite # vue # mobile Jan 11, 2019 · I have an ionic 4 app I’ve been working on and I just added Capacitor. Mar 12, 2024 · Ionic Visual Studio Code Extension v1. These plugins allow Portals to use native functionality with minimal configuration by the native developer or the web Aug 31, 2023 · This is a guest post from Simon Grimm, Ionic Developer Expert and educator at the Ionic Academy, an online school with 70+ video courses focused entirely on building awesome mobile apps with Ionic and Capacitor! Thanks to the advancements in web development, everyone can build powerful web applications with micro frontends (MFEs). I deleted android directory: rm -rf android I built my ionic project with no problems: ionic build --prod --release I try ionic cap add android, and get this output: $ ionic cap add android > npm i -E @capacitor/android@latest removed 1 package, and audited 1728 packages in 4s 1 package is Create a new projectThis command creates a working Ionic app. For this example we’ll be building a simple Ionic React app. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS. Initialize your app with Capacitor. By default, Capacitor configuration are added to new @nxtend/ionic-angular applications. Capacitor offers backward compatibility with a vast majority of Cordova plugins. Always make sure you get in the right mindset for desktop apps, since these will have a different size than a mobile app and need to be really responsive as well. Aug 11, 2020 · When you work with a framework like Capacitor, you should know how it works internally, and how you can overcome challenges even if there&#8217;s not a plugin out there for your needs. The installation process is the same for Cordova plugins in Capacitor. Instead, install the Cordova plugin and sync Capacitor: npm install Dec 18, 2021 · ionic start myApp blank --type=vue --package-id=io. In this post, I’ll explain the steps needed to scaffold a new Capacitor project with Vite. What is Capacitor? Install Capacitor. Apr 5, 2023 · Run npx cap add @capacitor-community/electron to initiate the platform, this will create the electron folder in your webapp project. Mar 1, 2023 · It's easy to add an iOS or Android splash screen into an Ionic Angular app using the @capacitor/splash-screen package. Set and print configuration values from project config files and the global CLI config file with Ionic CLI. Jan 23, 2022 · //New Ionic Project ionic start myApp tabs --capacitor cd myApp //Existing Ionic Project cd myApp ionic integrations enable capacitor //initialize Capacitor with your app information //Note: npx is a new utility available in npm 5 or above that executes local binaries/scripts to avoid global installs. Additional documentation about this change can be found at developer. Android 12+ In Android 12 and above Google changed the way Splash Screens are displayed, using a smaller icon with colored background instead of a full screen image that was possible with Android 11 and below. Then, add the Android platform. Do I need to remove the ionic native counterparts in favor for the capacitor ones? "@ionic-n… With the newly released @capacitor/google-maps plugin, you can add native Google Maps within your Ionic and Capacitor projects with ease.