--- description: Step-by-step guide to wrap an existing Angular web app into a native iOS and Android app using Capacitor, Ionic, and Firebase. title: How to Wrap an Angular App with Capacitor and Firebase - Capawesome image: https://capawesome.io/docs/assets/images/social/blog/how-to-wrap-an-angular-app-with-capacitor-and-firebase.png --- [ Skip to content](#how-to-wrap-an-angular-app-with-capacitor-and-firebase) [ 🎉 Introducing **Capawesome Platform** — one platform for Live Updates, Native Builds, App Store Publishing, and Insider SDKs.](https://capawesome.io) * [ Formbricks ](/docs/plugins/formbricks/) * [ Geocoder ](/docs/plugins/geocoder/) * [ Google Sign-In ](/docs/plugins/google-sign-in/) * [ libSQL ](/docs/plugins/libsql/) * [ Live Update ](/docs/plugins/live-update/) * [ Managed Configurations ](/docs/plugins/managed-configurations/) * [ Media Session ](/docs/plugins/media-session/) * [ ML Kit ](/docs/plugins/mlkit/) * [ NFC ](/docs/plugins/nfc/) * [ OAuth ](/docs/plugins/oauth/) * [ Pedometer ](/docs/plugins/pedometer/) * [ Photo Editor ](/docs/plugins/photo-editor/) * [ PostHog ](/docs/plugins/posthog/) * [ Printer ](/docs/plugins/printer/) * [ Purchases ](/docs/plugins/purchases/) * [ RealtimeKit ](/docs/plugins/realtimekit/) * [ Screen Orientation ](/docs/plugins/screen-orientation/) * [ Screenshot ](/docs/plugins/screenshot/) * [ Secure Preferences ](/docs/plugins/secure-preferences/) * [ Speech Recognition ](/docs/plugins/speech-recognition/) * [ Speech Synthesis ](/docs/plugins/speech-synthesis/) * [ Share Target ](/docs/plugins/share-target/) * [ Square Mobile Payments ](/docs/plugins/square-mobile-payments/) * [ SQLite ](/docs/plugins/sqlite/) * [ Superwall ](/docs/plugins/superwall/) * [ Torch ](/docs/plugins/torch/) * [ Wifi ](/docs/plugins/wifi/) * [ Zip ](/docs/plugins/zip/) * [ Cloud ](/docs/cloud/) * [ Live Updates ](/docs/cloud/live-updates/) * Advanced * Integrations * [ Native Builds ](/docs/cloud/native-builds/) * [ Configuration ](/docs/cloud/native-builds/configuration/) * [ Environments ](/docs/cloud/native-builds/environments/) * Guides * [ Sample Projects ](/docs/cloud/native-builds/sample-projects/) * [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/) * [ Automations ](/docs/cloud/automations/) * [ Assist ](/docs/cloud/assist/) * Account * Organizations * [ Organization and User Management ](/docs/cloud/organizations/memberships/) * [ Single Sign-On (SSO) ](/docs/cloud/organizations/sso/) * [ Teams ](/docs/cloud/organizations/teams/) * [ Two-Factor Authentication ](/docs/cloud/organizations/two-factor-authentication/) * [ Integrations ](/docs/cloud/integrations/) * [ License Keys ](/docs/cloud/license-keys/) * [ Webhooks ](/docs/cloud/webhooks/) * [ Pricing ](https://capawesome.io/pricing/) * [ FAQ ](/docs/cloud/faq/) * [ Support ](/docs/cloud/support/) * [ Contributing ](/docs/contributing/) * [ LLMs ](/docs/llms/) * [ Insiders ](/docs/insiders/) * [ License ](https://capawesome.io/legal/eula/) * [ Support ](/docs/insiders/support/) * [ FAQ ](/docs/insiders/faq/) * [ Blog ](/blog/) * Categories * [ Add Capacitor to Your Angular Project ](#add-capacitor-to-your-angular-project) * [ Set Up Your Own Firebase Project ](#set-up-your-own-firebase-project) * [ Integrate Firebase with Capacitor ](#integrate-firebase-with-capacitor) * [ Adding Native Features ](#adding-native-features) * [ Production Delivery with Capawesome Cloud ](#production-delivery-with-capawesome-cloud) * [ Try Capawesome Cloud ](#try-capawesome-cloud) * [ Conclusion ](#conclusion) * Related links # How to Wrap an Angular App with Capacitor and Firebase[¶](#how-to-wrap-an-angular-app-with-capacitor-and-firebase "Permanent link") If you already have an Angular web app, you can wrap it into a native iOS and Android app without rewriting your entire codebase. In this guide, we use a real demo app called **Trip Expenses** to walk through the full process with Capacitor, Ionic, Firebase, and a handful of native plugins. Get the code The complete source code is available on [GitHub](https://github.com/capawesome-team/capacitor-angular-starter-guide), free to clone and adapt for your own project. The demo covers the parts most production apps need: trip and expense management, receipt attachments as images or PDFs, image compression before upload, profile pictures via the device camera, and custom icons and splash screens for both platforms. The stack is Angular 21 with Ionic 8 for the UI, Capacitor 8 for the native runtime, and Firebase (Cloud Firestore and Cloud Storage) for data and files. On the Capacitor side, we rely on the [Camera](https://capacitorjs.com/docs/apis/camera) and [Splash Screen](https://capacitorjs.com/docs/apis/splash-screen) plugins from the Capacitor team, together with the [File Picker](/docs/plugins/file-picker/), [File Compressor](/docs/plugins/file-compressor/), [Firebase Cloud Firestore](/docs/plugins/firebase/cloud-firestore/), and [Firebase Cloud Storage](/docs/plugins/firebase/cloud-storage/) plugins from Capawesome. Note The example uses Angular, but the same concepts apply to any web project — Capacitor is framework-agnostic. ## Important Definitions for Your First Capacitor App[¶](#important-definitions-for-your-first-capacitor-app "Permanent link") Before jumping into the code, let's clarify a few concepts and answer some common questions, especially if this is your first time working with Capacitor. ### What Is Capacitor?[¶](#what-is-capacitor "Permanent link") Capacitor is an open-source runtime developed by the Ionic team that lets you run your web app as a native iOS and Android app. It wraps your built web assets in a native shell, so your Angular code still powers the UI and business logic. You keep a single codebase for most features, access native device APIs through plugins as you need them, and ship updates through the standard app store workflow — adding native capabilities progressively over time. ### Angular Web vs Mobile Runtime: Key Differences[¶](#angular-web-vs-mobile-runtime-key-differences "Permanent link") Before you start, it helps to know what changes when your Angular app runs inside Capacitor. The app runs inside a native `WebView` rather than a browser tab, which means iOS and Android permission models now apply (`Info.plist` and `AndroidManifest.xml`). File handling looks different too: native paths like `file://` and `content://` enter the picture, and memory constraints matter more than they do on the web. And instead of a web deploy, releases involve native binaries and the regular app store workflow. Your Angular code still drives most of the product, but the quality of the native integration directly affects reliability, UX, and performance. ### What Is a Capacitor Plugin?[¶](#what-is-a-capacitor-plugin "Permanent link") A Capacitor plugin is the bridge between your TypeScript code and native iOS and Android APIs. It typically ships a TypeScript API along with native iOS and Android implementations, plus an optional web implementation so the same code path works in the browser. In this project, that means using native integrations where they matter most — camera, file picking, Firebase on device — while keeping a single Angular codebase. ### Is Ionic Required?[¶](#is-ionic-required "Permanent link") No, Ionic is optional. It's a [mobile UI toolkit](https://ionicframework.com/docs/components) that gives you production-ready components and app-like UX patterns out of the box, but if your team already has a design system, you can use Capacitor with plain Angular. ## Add Capacitor to Your Angular Project[¶](#add-capacitor-to-your-angular-project "Permanent link") Install the Capacitor core and CLI packages, then initialize the project: `[](#%5F%5Fcodelineno-0-1)npm install @capacitor/core@latest [](#%5F%5Fcodelineno-0-2)npm install -D @capacitor/cli@latest [](#%5F%5Fcodelineno-0-3)npx cap init ` The CLI will prompt you for your app name (e.g. `Trip Expenses`), app ID (e.g. `io.tripexpenses.app`), and web output directory (`www` or your Angular `dist/` directory) — use your own values here. Next, add the iOS and Android platforms: `[](#%5F%5Fcodelineno-1-1)npm install @capacitor/ios@latest @capacitor/android@latest [](#%5F%5Fcodelineno-1-2)npx cap add ios [](#%5F%5Fcodelineno-1-3)npx cap add android ` That's it. Your Angular web app is now wrapped in a native shell and ready to run on both platforms. ### Build, Sync, and Run[¶](#build-sync-and-run "Permanent link") The Capacitor development workflow takes a couple of tries to get used to, but the loop is short. Whenever you change web code, rebuild and sync the changes into the native projects: `[](#%5F%5Fcodelineno-2-1)npm run build [](#%5F%5Fcodelineno-2-2)npx cap sync ` To open the native projects in Xcode or Android Studio: `[](#%5F%5Fcodelineno-3-1)npx cap open ios [](#%5F%5Fcodelineno-3-2)npx cap open android ` Or run directly on a simulator or device: `[](#%5F%5Fcodelineno-4-1)npx cap run ios [](#%5F%5Fcodelineno-4-2)npx cap run android ` ### Generate App Icons and Splash Screens[¶](#generate-app-icons-and-splash-screens "Permanent link") You can generate icons and splash screens for both platforms with the [@capacitor/assets](https://github.com/ionic-team/capacitor-assets) tool. Install it as a dev dependency, drop your own `icon-only.png` and `splash.png` into the `resources/` folder, and let the CLI do the rest: `[](#%5F%5Fcodelineno-5-1)npm install -D @capacitor/assets@latest [](#%5F%5Fcodelineno-5-2)npx capacitor-assets generate --ios [](#%5F%5Fcodelineno-5-3)npx capacitor-assets generate --android ` This produces all the required platform assets. The tool has more configuration options if you need finer control — check its README. ## Set Up Your Own Firebase Project[¶](#set-up-your-own-firebase-project "Permanent link") If you clone the [demo app](https://github.com/capawesome-team/capacitor-angular-starter-guide), you'll need to create your own Firebase project before running it. ### 1) Create Firebase Resources[¶](#1-create-firebase-resources "Permanent link") In the [Firebase Console](https://console.firebase.google.com/), create a new project and enable both **Cloud Firestore** and **Cloud Storage**. ### 2) Register App Clients[¶](#2-register-app-clients "Permanent link") Under the same Firebase project, register a Web app for the Angular runtime, an Android app with package name `io.tripexpenses.app`, and an iOS app with bundle ID `io.tripexpenses.app`. Replace those identifiers with your own. ### 3) Configure Web Firebase Values[¶](#3-configure-web-firebase-values "Permanent link") Add your Web SDK config to `src/environments/environment.ts` and `src/environments/environment.prod.ts`. ### 4) Configure Native Firebase Files[¶](#4-configure-native-firebase-files "Permanent link") When you registered the Android and iOS apps in step 2, you had the option to download the native config files. Place `google-services.json` at `android/app/google-services.json` and `GoogleService-Info.plist` at `ios/App/App/GoogleService-Info.plist`, then run: `[](#%5F%5Fcodelineno-6-1)npx cap sync ` ## Integrate Firebase with Capacitor[¶](#integrate-firebase-with-capacitor "Permanent link") With your Firebase project ready, the next step is wiring it into the app. We use native Firebase plugins rather than the web SDKs, which gives us better reliability inside the WebView, native file upload paths, and noticeably better performance with large files. To install them, see the [Installation](/docs/plugins/firebase/cloud-firestore/#installation) section of the Firebase Cloud Firestore plugin and the [Installation](/docs/plugins/firebase/cloud-storage/#installation) section of the Firebase Cloud Storage plugin. ## Adding Native Features[¶](#adding-native-features "Permanent link") The demo app includes a couple of native feature touchpoints to make the migration realistic. ### Profile Picture Upload[¶](#profile-picture-upload "Permanent link") On the profile screen, users can update their profile picture by taking a photo or picking one from the gallery. The Angular UI stays exactly the same — the [Camera](https://capacitorjs.com/docs/apis/camera) plugin from the Capacitor team takes care of calling the native camera on iOS and Android, and ships a web fallback so the same code path works in the browser too. ![Capacitor Camera Plugin Example](/docs/assets/images/screenshots/capacitor-camera-plugin.png) Upload Profile Picture ### Expense Attachment Flow[¶](#expense-attachment-flow "Permanent link") When creating an expense, users can attach a receipt image or PDF. Three plugins work together for this flow: the [File Picker](/docs/plugins/file-picker/) plugin handles native file selection, the [File Compressor](/docs/plugins/file-compressor/) plugin shrinks images before upload, and the [Firebase Cloud Storage](/docs/plugins/firebase/cloud-storage/) plugin uploads the result on device. All of the related code lives in `src/app/core/services/storage.service.ts`. ![Capacitor File Picker Example](/docs/assets/images/screenshots/capacitor-file-picker.png) File Picker For a deeper look at file handling on Capacitor — including memory pitfalls and best practices — see [Capacitor File Handling: The Complete Guide](/blog/capacitor-file-handling-guide/). That covers everything needed to bring your Angular app to mobile. The rest is just Angular and Ionic UI to build out your product. ## Production Delivery with Capawesome Cloud[¶](#production-delivery-with-capawesome-cloud "Permanent link") Once the app runs reliably on real devices, the next step is automating delivery. Capawesome Cloud handles the parts that would otherwise eat your time: [Native Builds](/docs/cloud/native-builds/setup/) produces reproducible iOS and Android binaries in a consistent environment, [Live Updates](/docs/cloud/live-updates/setup/) ships fixes and improvements to the web layer without going through app store review every time, and [App Store Publishing](/docs/cloud/app-store-publishing/) delivers builds straight to TestFlight or Google Play. A pattern that works well in practice is combining the two release tracks — ship stable native builds through the stores, and use Live Updates for fast iteration on the web layer in between. Wire it all into your repo with the [GitHub integration](/docs/cloud/integrations/github/) and your pipeline triggers builds and deployments automatically on commit, branch, or tag. [ ![Build and deploy your Capacitor app with Capawesome Cloud](../../assets/external/cloud.capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.69628c3f.png) ](https://cloud.capawesome.io/) See the [Capawesome Cloud documentation](/docs/cloud/) for setup details, or browse the [video walkthroughs](https://www.youtube.com/@capawesomeio) for each step. ## Try Capawesome Cloud[¶](#try-capawesome-cloud "Permanent link") Stop fighting with manual builds and slow release cycles. Capawesome Cloud handles native builds, live updates, and app store publishing for your Capacitor apps in one place. [Try Capawesome Cloud Free](https://cloud.capawesome.io) ## Conclusion[¶](#conclusion "Permanent link") Wrapping an Angular app for iOS and Android with Capacitor isn't a rewrite — it's an extension of what you already have. Your Angular code keeps powering the UI and business logic; you just add native capabilities where they matter and ship through the regular app store workflow. This means your team can move faster, reduce duplication, and ship features consistently across web, iOS, and Android without the overhead of maintaining separate apps. Once you have this setup in place, you can start extending your app with more advanced features, such as adding [push notifications](/blog/capacitor-push-notifications-guide/) to keep users engaged, implementing [in-app purchases](/blog/tips-for-setting-up-in-app-purchases-with-capacitor/) to monetize your app, or building secure authentication flows using OAuth and [biometrics](/blog/exploring-the-capacitor-biometrics-api/). For a deeper look at how to roll out updates safely once you're in production, see [Capacitor App Updates: The Complete Guide](/blog/capacitor-app-update-guide/). If you have questions, join the [Capawesome Discord server](https://discord.gg/VCXxSVjefW) and connect with the community. To stay up to date on the latest news, subscribe to the [Capawesome newsletter](https://cloud.capawesome.io/newsletter). May 16, 2026 Back to top