create-mobile-wrapper

Turn any website URL into a native iOS and Android app wrapper with push notifications.

🤖 Agent skill — npx skills@latest add https://github.com/OpenSourceAGI/dev-tools-starter-agent --skill web2mobile (what it covers)

💍One Code to rule them all — and in the cloud compile them.

Transform your website into a native mobile app in minutes. No coding required.

Why Your Website Needs a Mobile App

Boost Your SEO & Customer Discovery

App Store Presence = Free Marketing
- Your app appears in Apple App Store and Google Play Store searches
- Millions of users discover apps through app stores daily
- New discovery channel beyond Google search
Improved SEO Rankings
- Google favors websites with mobile apps in search results
- App deep links boost your website's domain authority
- Increased brand signals across multiple platforms (website + app stores)
Higher Customer Engagement
- Push notifications keep customers coming back (39% higher retention)
- Home screen icon = constant brand visibility
- Faster load times than mobile web browsers
Competitive Advantage
- Stand out from competitors who only have websites
- Professional appearance increases trust and credibility
- Capture mobile-first users who prefer apps over browsers
Additional Marketing Channels
- App Store Optimization (ASO) - like SEO for apps
- Get featured in app store categories
- Run app-specific promotions and campaigns

What This Tool Does

Web2Mobile creates a production-ready mobile app wrapper for your existing website using React Native and Expo. Your website loads inside a native WebView, giving users a seamless native app experience.

Perfect for:

E-commerce stores
SaaS products
Content websites & blogs
Online services
Portfolio & business websites
Any responsive website

Quick Start

Prerequisites

Node.js 18+ installed
Your website must be HTTPS (required for mobile apps)
A logo/icon image file (PNG, JPG, or SVG)

Installation

npm install

Configuration

Create a config.json file in the root directory:

{
  "name": "Your App Name",
  "url": "https://yourwebsite.com",
  "icon": "path/to/your/logo.png",
  "packageName": "com.yourcompany.app"
}

Configuration Options:

name: Your app's display name (shown on home screen) - Required
url: Your website URL (must be HTTPS) - Required
icon: Path to your logo/icon image (optional - will auto-detect if not provided)
packageName: Unique app identifier in reverse domain format - Required

Icon Auto-Detection:

If you don't specify an icon path, the tool will automatically search for common icon files in these locations:

Current directory: icon.png, logo.png, app-icon.png
assets/, public/, static/, images/, img/ folders
Supports: .png, .jpg, .jpeg, .svg formats

Generate Your App

npm run generate

Or directly:

node src/generate.js

This will:

Auto-detect your icon or use the specified path
Generate all required icon sizes (iOS, Android, web) in mobile-app/assets/
Create splash screens
Configure app settings in mobile-app/
Set up the WebView wrapper

All generated files are placed in the mobile-app/ directory.

Test Your App

npm start

Then:

Scan the QR code with the Expo Go app on your phone
Test on iOS: Press i to open iOS simulator
Test on Android: Press a to open Android emulator

Building for Production

The project includes built-in scripts for building and submitting your app using Expo EAS (Expo Application Services).

First-Time Setup

Create an Expo account at expo.dev
Login via CLI:

npx eas-cli login

Configure your project:

cd mobile-app
npx eas build:configure

Build Commands

From the project root, use these npm scripts:

Android Build:

npm run build:android

iOS Build:

npm run build:ios

Build Both Platforms:

npm run build:all

Production Build (with auto-increment):

npm run build:production

Submission Commands

After building, submit to app stores:

Submit to Google Play:

npm run submit:android

Submit to App Store:

npm run submit:ios

Submit to Both:

npm run submit:all

EAS Configuration

The mobile-app/eas.json file includes three build profiles:

development: For internal testing with development client
preview: For creating APK files for testing
production: For app store releases with auto-increment version

For detailed setup and store submission, follow the Expo EAS Build documentation.

Features

Built-in Capabilities

Full Website Functionality: All your website features work seamlessly
JavaScript Enabled: Interactive features, forms, and scripts work perfectly
Local Storage: User sessions and data persist across app launches
Native Performance: Optimized WebView with native app speed
Status Bar: Automatically styled for iOS and Android
Safe Areas: Respects device notches and home indicators
Responsive: Adapts to all screen sizes and orientations

Automatic Asset Generation

The tool automatically creates all assets in mobile-app/assets/:

App icons (1024x1024 for iOS and Android)
Adaptive icons for modern Android devices
Splash screens (2048x2048)
Favicons for web version (48x48)
Auto-detects icons from common locations
Creates placeholder icons if none found

Generated Files:

mobile-app/
├── assets/
│   ├── icon.png          (1024x1024 - iOS & Android)
│   ├── adaptive-icon.png (1024x1024 - Android adaptive)
│   ├── splash.png        (2048x2048 - Splash screen)
│   └── favicon.png       (48x48 - Web favicon)
├── App.js                (WebView wrapper)
├── app.json              (Expo configuration)
├── package.json          (Mobile app dependencies)
└── eas.json              (Build configuration)

SEO Benefits in Detail

App Store Optimization (ASO)

Having an app unlocks App Store Optimization, which works alongside your website SEO:

Keyword Rankings: Rank for keywords in app stores
Visual Search: Users discover apps through screenshots and icons
Category Placement: Get listed in relevant app categories
Ratings & Reviews: Social proof increases downloads
Update Visibility: Regular updates show active development

Cross-Platform Authority

Search engines recognize brands with:

A website
An iOS app
An Android app
Consistent branding across all platforms

This multi-platform presence signals legitimacy and boosts your overall SEO.

Mobile-First Indexing

Google prioritizes mobile experiences. A native app:

Loads faster than mobile web
Provides better user experience
Reduces bounce rates
Increases session duration

All of these signals improve your website's SEO rankings.

Customer Discovery Benefits

Reach New Audiences

App Store Users:

230+ billion app downloads annually
Users specifically browsing for solutions in app stores
High-intent users ready to engage

Referrals & Sharing:

"Download our app" is easier than "visit our website"
App links share cleanly on social media
Users share apps more frequently than websites

Offline Discovery:

App stays installed on home screen
No need to remember your URL
One-tap access increases usage

Brand Visibility

Home screen icon = 24/7 brand exposure
Push notifications (optional, can be added)
Badge notifications for updates
Native sharing capabilities

Customization

Modify the WebView Behavior

Edit mobile-app/App.js after generation to customize:

Loading states and progress indicators
Error handling and offline messages
Navigation behavior (back button, external links)
Custom HTTP headers
JavaScript injection scripts
User agent customization

Example customizations:

<WebView
  source={{ uri: 'https://yoursite.com' }}
  onLoadStart={() => console.log('Loading...')}
  onError={(syntheticEvent) => {
    const { nativeEvent } = syntheticEvent;
    console.warn('WebView error: ', nativeEvent);
  }}
  // Add custom headers
  injectedJavaScript={`
    // Custom JavaScript to run in the page
    console.log('Mobile app loaded');
  `}
/>

Change App Appearance

Edit mobile-app/app.json after generation to modify:

Splash screen background color
Status bar style (light/dark)
Orientation settings (portrait/landscape)
Platform-specific configurations
App name and slug

Modify Build Configuration

Edit mobile-app/eas.json to customize:

Build profiles (development, preview, production)
Auto-submit settings
Version management
Platform-specific build options

Common Use Cases

E-Commerce Stores

Convert your Shopify, WooCommerce, or custom store into an app for:

Push notifications for sales and promotions
Easy reordering from purchase history
One-tap checkout

SaaS Products

Give users a dedicated app for:

Professional appearance
Desktop-like experience on mobile
Better engagement metrics

Content Platforms

Blogs, news sites, and media companies benefit from:

Higher time-on-site
Push notifications for new content
Offline reading (with additional configuration)

Service Businesses

Restaurants, salons, gyms get:

Easy booking through the app
Loyalty program integration
Direct communication channel

Technical Details

Built With

React Native - Cross-platform mobile framework
Expo - Development and build platform
React Native WebView - Native WebView component
Sharp - Image processing

Requirements

Website must use HTTPS
Website should be mobile-responsive
Modern browsers supported

Limitations

Apps must comply with App Store guidelines
Some web features may not work (e.g., browser extensions)
Camera/location require additional configuration

Project Structure

web2mobile/
├── src/
│   ├── generate.js           # Main generation script
│   ├── App.template.js       # WebView template
│   ├── app.template.json     # Expo config template
│   └── eas.template.json     # Build config template
├── mobile-app/               # Generated app (created after running generate)
│   ├── assets/              # Auto-generated icons
│   ├── App.js               # Generated WebView wrapper
│   ├── app.json             # Generated Expo config
│   ├── package.json         # Mobile app dependencies
│   └── eas.json             # Build configuration
├── config.json              # Your app configuration
├── package.json             # Build scripts & dependencies
└── README.md                # This file