DEV Community

Dayana Jabif
Dayana Jabif

Posted on

Convert Your Lovable App to mobile iOS & Android Apps

#lovable #mobile #productivity #beginners

You described your app to Lovable, watched it appear in the browser, and now it works. Great. But it lives at a URL, and what you actually want is an icon on someone's home screen and a listing on the App Store and Google Play.

The good news: you don't need to rewrite anything, and you don't need to learn Swift or Kotlin. Capacitor wraps the web app you already have into real native iOS and Android projects.

In this post I'll cover the first stretch of that journey — the part you can finish in about 15 minutes on any OS:

  1. Get your Lovable code into GitHub and onto your machine
  2. Add Capacitor and generate the native iOS/Android projects
  3. Avoid the two mistakes that bite almost everyone (SSR output and .gitignore)

At the end I'll point you to the full guide (and companion video) that continues all the way to a signed build running on a real iPhone — without owning a Mac.

⚠️ First, a gotcha: SSR apps and native shells don't mix

This is the single most important thing to know before you start.

Capacitor works by bundling a static web build — a folder with an index.html plus JS/CSS — inside the native app. That bundle runs in a WebView on the device. There is no server on the phone.

Why does this matter for Lovable specifically? Since May 2026, new Lovable projects default to TanStack Start with server-side rendering. SSR is great for SEO on the web, but an SSR app expects a server to render each request — which a native shell can't provide.

Two ways to handle it:

  • Starting a new project? Ask Lovable explicitly for a single-page app (SPA) / no SSR. You'll get a client-rendered React + Vite app that builds into a static dist/ folder — exactly what Capacitor wants.
  • Already on TanStack Start? You don't have to start over. Configure it to pre-render / output a static SPA. The only hard requirement is the end result: a build folder containing an index.html.

If you remember one thing: Capacitor needs a static build folder, and for a Vite SPA that folder is dist.

Step 1 — Export your Lovable app to GitHub

Lovable can push your project to a GitHub repo for you: in the editor, open the GitHub integration, authorize your account, and connect the project. Lovable creates the repository and keeps pushing your changes to it.

Once that's done, clone it and confirm it runs locally:

git clone https://github.com/YOUR-USERNAME/your-app.git
cd your-app
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Open the local URL the terminal prints (Lovable apps usually use port 8080). If your app renders, you're ready.

Step 2 — Add Capacitor and the native platforms

Install the Capacitor core and CLI, then initialize:

npm install @capacitor/core @capacitor/cli
npx cap init
Enter fullscreen mode Exit fullscreen mode

npx cap init asks three things:

  • App name — what appears under the icon.
  • Package ID — reverse-domain style, e.g. com.yourcompany.yourapp. Choose carefully: it must be globally unique across both stores and can't change after publishing in the stores. Base it on a domain you actually control.
  • Web assets directory — dist for a Vite SPA. (www for Angular)

With your answers, a new file capacitor.config.json will be created.

Now build the web app (Capacitor needs the Web assets directory folder, such as dist to exist) and generate the native projects:

npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync
Enter fullscreen mode Exit fullscreen mode

That's it. Your repo now contains an ios/ folder (a full Xcode project) and an android/ folder (a full Android Studio project), with your built web app copied inside each one. No CocoaPods step needed anymore — Capacitor 8 uses Swift Package Manager under the hood.

your-app/
├── android/          ← native Android project
├── ios/              ← native iOS project
├── dist/             ← your built web app
├── src/              ← your Lovable code
├── capacitor.config.ts
└── package.json
Enter fullscreen mode Exit fullscreen mode

Step 3 — Check your .gitignore before pushing

Common trap: accidentally keeping the native projects out of Git.

  • ios/ and android/ must be committed — they're source, not build output. (The .gitignore files Capacitor drops inside them already exclude the actual build artifacts.)
  • dist/ and node_modules/ should stay ignored — any build pipeline regenerates them.

Then push the milestone:

git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push
Enter fullscreen mode Exit fullscreen mode

Run git status first if you want to double-check the native folders show up as tracked.

Where this goes next

At this point you have real native projects, but not yet an app on a phone. The rest of the journey is: signing certificates, developer accounts, building the iOS app (traditionally: a Mac with Xcode — though cloud build services let you skip that entirely and build from Windows or Linux), installing on a device via TestFlight, adding native features like the camera, and shipping OTA fixes with live updates so a CSS tweak doesn't cost you a week of app review. And of course the same for Android.

I wrote the full step-by-step (all 17 steps, including the errors we hit and how we fixed them) here:

🎥 Video: Turn Your Lovable App into a mobile app all the flow recorded in real time, breakages included.
📖 Guide: Convert Your Lovable App to iOS & Android Apps

Disclosure: I'm a Developer Advocate at Capawesome, where the full guide is published.

Questions? Drop them in the comments — happy to help you get unstuck. 🚀

Top comments (0)