Can Capacitor be simply dropped-in to any stack to create a native Android/iOS app?

[ajaypillay]

Hello, before I actually take a deep dive into Capacitor this I have a few high-level questions I'd like some clarification on, so I know what to expect:

1. I ​read that Capacitor can be dropped in to any project as long as there's a package.json file. I am currently running a Meteor/React/Express/Apollo/MongoDB stack. Meteor comes bundled with Cordova to compile for Android and iOS already, but if Capacitor can be dropped in as a replacement would I be facing any problems with it?

2. That being said, I am looking to migrate from Meteor to a NextJS/Express/React/Apollo/MongoDB stack (or some other combination of frameworks) instead. Would I be able to drop Capacitor in the same way to get up and running easily?

3. I don't quite understand why there's a PWA/Web section in the docs. Aren't all apps that are compiled through Capacitor essentially PWAs? They should work fine as PWAs just that they're compiled into native apps to be available on the respective app stores. Of course as an app they're not called PWAs because they're not available by navigating to some URL in a mobile browser.

Appreciate any insights, thank you.

[mlynch]

Hey @ajaypillay, a few thoughts:

1. That's correct, it takes a standard web app and wraps it up for iOS/Android/Electron. However, can't speak to how well Meteor would work with that change given it's a more opinionated framework, so you'd need to give it a try to know for sure.
2. Yep! Here's one example of a Next.js + Tailwind + React app doing that: https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter
3. Capacitor has plugins that work on iOS, Android, and the web (PWA), so a lot of this has to do with the fact that you can program against one standard set of APIs, and then the app will work without modification on native mobile and web. So we call out PWAs to make sure people know they can do that and that this is a first-class experience. For PWAs, Capacitor isn't "compiling" them, it's just a library that you program against in your app to enable it to be cross-platform.

[ajaypillay]

That's correct, it takes a standard web app and wraps it up for iOS/Android/Electron. However, can't speak to how well Meteor would work with that change given it's a more opinionated framework, so you'd need to give it a try to know for sure.

Oh wow I wasn't aware of it wrapping it up for Electron too. That's very nice. I didn't explicitly see this mentioned anywhere in the docs but I've found the Capacitor-Electron repo.

Yep! Here's one example of a Next.js + Tailwind + React app doing that: https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter

Neat example, thanks for this. I will definitely be using this for reference.

Capacitor has plugins that work on iOS, Android, and the web (PWA), so a lot of this has to do with the fact that you can program against one standard set of APIs, and then the app will work without modification on native mobile and web. So we call out PWAs to make sure people know they can do that and that this is a first-class experience. For PWAs, Capacitor isn't "compiling" them, it's just a library that you program against in your app to enable it to be cross-platform.

Okay this makes sense! Is my understanding correct that fundamentally, what Capacitor does is wrap the app in a "lite" browser, embeds all files located in the public/ folder into the app (so these aren't transmitted over the wire) and from then on everything else works the same - database queries hit the database URL, and authentication, etc is done through my server URL? So having SSR in my application won't break anything and still serves its performance benefit?