Have you already built a web application and wish users could simply install it from the Google Play Store or Apple App Store?

Good news—you don't need to rewrite your application using Flutter, React Native, Kotlin, or Swift.

Instead, you can wrap your existing web application inside a native mobile application using Capacitor, the official runtime developed by the Ionic team.

By the end of this guide you'll have a production-ready Android (and optionally iOS) application built from your existing website.

What You'll Learn

By the end of this tutorial you'll know how to:

• What Capacitor is
• How Capacitor works
• Requirements before starting
• Connect any existing web app
• Configure Android
• Configure iOS
• Add native device features
• Handle icons and splash screens
• Build production APKs
• Generate Android App Bundles (.aab)
• Prepare for Play Store release
• Keep your mobile app updated

What is Capacitor?

Capacitor is a native runtime that allows web applications to run inside Android and iOS applications.

Think of it like this:

Instead of rebuilding your project, Capacitor simply packages it inside a native application.

Advantages of Capacitor

✅ One codebase

✅ Native Android app

✅ Native iPhone app

✅ Access Camera

✅ GPS

✅ Push Notifications

✅ Biometrics

✅ File System

✅ Bluetooth

✅ NFC

✅ Contacts

✅ Offline support

What Can You Convert?

Almost any modern web application.

Examples:

• Next.js
• React
• Vue
• Angular
• Svelte
• Vite
• Astro
• Laravel
• Django
• Express
• Plain HTML websites

Requirements

Before beginning install:

• Node.js
• npm or pnpm
• Android Studio
• Java JDK
• Git

For iPhone development you'll also need:

• macOS
• Xcode

Project Structure

Let's assume your project looks like this:

Step 1 — Install Capacitor

Inside your project run:

npm install @capacitor/core @capacitor/cli

or

pnpm add @capacitor/core @capacitor/cli

Step 2 — Initialize Capacitor

Run:

npx cap init

You'll be asked:

Example:

Next:

Example:

Your App ID should never change after publishing.

Step 3 — Build Your Web App

Capacitor doesn't package your source code.

Instead it packages the production build.

React:

npm run build

Next.js:

npm run build

Vite:

npm run build

Understanding the Build Folder

React produces:

Next.js Static Export:

Other frameworks may use:

This folder contains your final website.

Step 4 — Configure Capacitor

Open:

Example:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.tatualabs.app',
  appName: 'Tatua Labs',
  webDir: 'out'
};

export default config;

If using React Vite:

Step 5 — Install Android

Run:

npm install @capacitor/android

Then:

npx cap add android

You'll now have:

This is the native Android project.

Step 6 — Copy Your Website

Whenever your website changes:

npm run build

Then:

npx cap copy

or

npx cap sync

Sync is recommended because it also updates plugins.

Step 7 — Open Android Studio

Run:

npx cap open android

Android Studio opens automatically.

Understanding Android Studio

Inside Android Studio you'll see:

Don't panic.

You rarely edit these files.

Most of your work still happens inside your web project.

Step 8 — Run on an Emulator

Click:

Choose an Android emulator.

Your website now opens as a native Android application.

Congratulations!

Step 9 — Run on a Physical Phone

Enable:

Developer Options

USB Debugging

Connect your phone.

Android Studio will detect it automatically.

Click:

Your app installs instantly.

Step 10 — Live Reload During Development

Instead of rebuilding every change, Capacitor supports live reload.

Example:

npm run dev

Then:

npx cap run android -l --external

Now every code change instantly appears on your phone.

This dramatically speeds up development.

Next.js Users

If you're using Next.js with Server Actions or authentication, Capacitor can load your live server instead of a static export.

Example:

server: {
  url: "http://192.168.1.5:3000",
  cleartext: true
}

Replace the IP with your computer's local IP address.

Both your computer and phone must be on the same Wi-Fi network.

For production, remove this server configuration so the app loads bundled files or your deployed website, depending on your architecture.

Access Native Device Features

Install Camera:

npm install @capacitor/camera

Sync:

npx cap sync

Use:

import { Camera } from '@capacitor/camera';

const image = await Camera.getPhoto({
  quality: 90
});

That's all.

No Java.

No Kotlin.

No Swift.

Useful Capacitor Plugins

Some of the most popular plugins include:

App Icons

Install:

npm install @capacitor/assets --save-dev

Create:

Run:

npx capacitor-assets generate

Icons for every Android and iPhone device are automatically generated.

Splash Screen

Capacitor automatically supports native splash screens.

You can customize:

• Background color
• Logo
• Duration
• Fade animation

Handling Authentication

If your app uses:

• Better Auth
• Clerk
• Auth.js
• Firebase
• Supabase

Ensure cookies and redirect URLs are configured for mobile.

For OAuth providers (Google, GitHub, etc.), you may need deep linking or custom URL schemes.

Handling File Uploads

Good news.

Existing upload libraries usually continue working:

• UploadThing
• Cloudinary
• AWS S3
• Firebase Storage

If you want to upload directly from the camera, combine them with the Camera plugin.

Push Notifications

Install:

npm install @capacitor/push-notifications

Then configure:

• Firebase Cloud Messaging (Android)
• Apple Push Notification Service (iOS)

Your web application can now send native notifications.

Offline Support

To make your app work without internet:

• Cache API responses
• Store user data locally
• Use service workers where appropriate
• Synchronize data when the connection returns

Offline support greatly improves the user experience.

Permissions

Android requires permissions for sensitive features.

Examples include:

• Camera
• Location
• Microphone
• Storage
• Notifications

Capacitor plugins typically guide you through the required configuration.

Always request only the permissions your app truly needs.

Building a Release APK

Inside Android Studio:

Create a new keystore.

Store it somewhere safe.

Never lose it.

You'll need the same keystore for every future update.

Build an Android App Bundle (.aab)

Google Play recommends uploading an App Bundle.

Android Studio:

This produces:

Testing Before Release

Before publishing:

• Test on multiple screen sizes
• Test portrait and landscape modes (if supported)
• Test authentication flows
• Test offline behavior
• Test file uploads
• Test camera access
• Test notifications
• Verify deep links
• Check performance

Preparing for Google Play

You'll need:

• Privacy Policy
• App Icon (512×512)
• Feature Graphic
• Screenshots
• App description
• Content rating
• Data Safety information
• Signed App Bundle (.aab)

Publishing

Upload:

Complete:

• Store Listing
• Pricing
• Countries
• Content Rating
• Privacy Policy
• Release Notes

Submit for review.

Google usually reviews apps within a few days, though timelines may vary.

Updating Your Mobile App

When your web application changes:

npm run build

Then:

npx cap sync

Open Android Studio:

npx cap open android

Generate a new signed App Bundle and upload it as an update in the Play Console.

If your app loads content from a hosted website instead of bundling it, some content changes can appear without releasing a new app version, but changes to native plugins or bundled assets still require a new build.

Common Problems

White Screen

Usually caused by:

• Wrong webDir
• Missing build
• Incorrect asset paths

Plugin Not Working

Run:

npx cap sync

Build Errors

Delete:

Recreate:

npx cap add android

Authentication Fails

Check:

• HTTPS configuration
• Redirect URLs
• Cookie settings
• Deep links
• Allowed origins

Production Best Practices

✔ Keep Capacitor updated

✔ Keep Android Studio updated

✔ Use environment variables

✔ Minify production builds

✔ Compress images

✔ Use HTTPS

✔ Handle offline scenarios

✔ Monitor crashes

✔ Request only necessary permissions

✔ Test every release before publishing

Final Thoughts

Capacitor is one of the easiest ways to transform an existing web application into a native mobile app without rewriting your codebase.

Whether you're using React, Next.js, Vue, Angular, or another modern framework, Capacitor lets you reuse your existing frontend while gaining access to native mobile capabilities such as the camera, GPS, notifications, and local storage.

For most business applications—dashboards, e-commerce platforms, school systems, CRMs, booking platforms, and SaaS products—Capacitor offers an excellent balance between development speed and native functionality.

Instead of maintaining separate Android, iOS, and web codebases, you can focus on a single application and deliver it across multiple platforms.

If you're looking for the fastest path from a web app to the Google Play Store or Apple App Store, Capacitor is one of the best tools available today.

Happy coding! 🚀