Riplet
Good news! If you’ve built a web app with Replit, you can now turn it into a real mobile app for the App Store and Google Play using BuildNatively — no coding required.
Replit helps you create and host your web apps, while BuildNatively wraps your project into a mobile app and unlocks powerful native features like push notifications, deep links, in-app purchases, geolocation, and more.
This guide will walk you step by step through everything you need to do in Replit and in BuildNatively, so your app works perfectly on iOS and Android.
What You’ll Need Before You Start
A Replit web app (already created and running).
A secure HTTPS link to your Replit app.
A BuildNatively account.
Optional but recommended:
An Apple Developer account ($99/year).
A Google Play Developer account ($25 one-time).
Part 1 — Prepare Your Replit App
Before connecting to BuildNatively, make sure your Replit app is set up correctly.
1) Publish with HTTPS
Replit apps must run over https:// (Replit provides this automatically for public web apps).
Make sure every resource (images, scripts, APIs) also uses HTTPS.
Apps that load http:// resources will not work in iOS/Android.
2) Use a Single Domain
Keep all of your app’s pages on one domain (the Replit-provided domain or a custom domain you’ve set).
Avoid switching between multiple subdomains for important flows like login or checkout.
If you must use an external domain (for payments, external services), you’ll mark it as external in BuildNatively later.
3) Create Stable URLs for All Important Pages
Every key part of your app (login, signup, profile, checkout, dashboard, orders, messages) should have its own clean, shareable URL.
Examples:
/login/signup/profile/orders/123
These stable URLs are essential for deep links, notifications, and navigation.
4) Avoid Popups for Critical Actions
Popups or modals for login, signup, or checkout don’t generate unique URLs.
This breaks deep linking, push notifications, and return flows after login.
Instead, create dedicated pages for these flows in your Replit app.
5) Test in a Mobile Browser
Open your Replit app on both iPhone (Safari) and Android (Chrome).
Check that:
Text and buttons fit the screen.
Forms work without zooming.
Pages scroll smoothly.
Images and videos load quickly.
Fix any layout issues directly in Replit before moving forward.
6) Plan Your Login System
Email/password login: If it works in mobile browsers, it will work in the app.
Social login (Google, Apple, Facebook):
Requires deep links (Universal Links/App Links) so users are returned to your app after login.
You’ll configure this in BuildNatively later.
Make sure your login flow redirects back to your Replit domain.
7) List Your External Links
Identify any external sites your app uses (Stripe, PayPal, YouTube, Calendly, Help Docs, etc.).
You’ll mark these as external in BuildNatively so they open in the device’s browser instead of inside the app.
8) Optimize Performance
Compress images and videos to reduce load times.
Avoid very heavy scripts that slow down startup.
Keep your homepage lightweight so the mobile app loads fast.
Part 2 — Create Your Mobile App in BuildNatively
Log in to your BuildNatively dashboard.
Click Create New App.
Enter your app’s name.
Paste your Replit app’s HTTPS URL.
Save — your Replit app is now connected to BuildNatively.
Part 3 — Customize Your App
App Icon: Upload a 1024×1024 PNG (no transparent background).
Splash Screen: Upload a 2048×2048 PNG (shown while your app loads).
Error Screen: Upload another 2048×2048 PNG (shown if the network fails).
Navigation: Choose between Bottom Bar, Top Bar, or no navigation. Configure tabs if using Bottom Bar.
Colors & Style: Adjust background, theme, and accent colors.
Permissions: Add clear, user-friendly descriptions for any native features you enable (e.g., “We use your camera to let you upload photos”).
Part 4 — Configure Links
Add your Replit domain as an internal link so it stays inside the app.
Add any external services (Stripe, PayPal, Calendly, YouTube, external docs) as external links so they open in the device’s browser.
This prevents errors or users getting “stuck.”
Part 5 — Enable Native Features
You can enable these anytime. Rebuild your app if you make changes.
Push Notifications: Use OneSignal or Firebase. Include deeplinks so users land on the right screen when tapping a notification.
Deep Links: Allow users to open specific screens (e.g.,
/orders/123) directly from links or notifications. Required for social login.Social Login: Enable Google, Apple, or Facebook login by turning on Social Auth + Deep Links.
In-App Purchases: Use RevenueCat for digital subscriptions or content.
Other Features: Enable geolocation, camera, QR scanning, contacts, analytics, and more as needed.
Part 6 — Preview Your App
Install the BuildNatively Preview App on your phone.
Log in and preview your Replit app inside it.
Use this to check layout, navigation, and styling.
Remember: push, deep links, social login, in-app purchases, and some native features only work after a full build.
Part 7 — Build & Publish
Build for iOS and Android inside your BuildNatively dashboard.
For iOS:
Connect your Apple Developer account.
Test in TestFlight.
Submit to the App Store.
For Android:
Connect your Google Play Developer account.
Upload the APK/AAB to Google Play Console.
Publish to the Play Store.
Part 8 — After Publishing
Update your Replit app anytime — changes appear instantly in your mobile app (no rebuild needed).
If you change native features (push, payments, deep links, navigation), rebuild in BuildNatively.
Use push notifications and deep links to engage users.
Track analytics if enabled.
Troubleshooting: Common Issues
Login & Auth
Problem: Login opens in browser and doesn’t return.
Fix: Enable Deep Links + Social Auth, rebuild app.
Problem: Blank screen after login.
Fix: Make sure login redirects to a full page with a URL, not a popup.
Payments
Problem: Stripe/PayPal checkout doesn’t work.
Fix: Mark checkout pages as external in BuildNatively.
Problem: Apple rejected app for payment handling.
Fix: Use In-App Purchases for digital goods/subscriptions.
Notifications & Deep Links
Problem: Notification arrives but does nothing.
Fix: Add a unique deeplink to the notification payload (e.g.,
/messages/123).Problem: Notifications don’t arrive.
Fix: Check push config, rebuild app, and test again.
Layout & Display
Problem: Pages cut off on small screens.
Fix: Adjust layout in Replit for mobile-first design.
Problem: iOS zooms in on forms.
Fix: Use at least 16px font size on input fields.
App Store & Play Store Rejections
Problem: “Just a website” rejection.
Fix: Add native features like push notifications, deep links, or camera.
Problem: Missing permission descriptions.
Fix: Add clear permission texts in BuildNatively before rebuilding.
Problem: Performance issues.
Fix: Optimize images/videos in Replit and reduce heavy scripts.
Quick Start Checklist
Replit app is live with HTTPS.
Each important screen has a unique URL (no popups for login/checkout).
Layout tested on real phones for mobile friendliness.
External links (Stripe, YouTube, Calendly) listed and configured as external in BuildNatively.
App icon (1024×1024 PNG) and splash/error screens (2048×2048 PNG) ready.
Optional: Push notifications, deep links, and social login configured.
Preview app tested, then full builds created.
Submitted to App Store and Google Play.
Why This Works Well for Replit Users
Replit gives you a fast way to build and deploy web apps. BuildNatively takes those apps and makes them installable mobile apps with powerful native features and app store distribution. Together, they let you go from idea to a live mobile app — without needing advanced coding or app development tools.
Last updated
Was this helpful?