Quick Start Guide

Quick Start Guide (3 Scenarios in 60 Seconds)

Follow step-by-step instructions to compile your first desktop or mobile application with WebToApp Studio Pro.

---

🎯 Select Your Scenario

• Scenario 1: Converting a Local Static Web App (React / Vue / Vite / HTML5)
• Scenario 2: Converting a Live SaaS Website URL
• Scenario 3: Packaging an HTML5 Game with Offline Audio

---

Scenario 1: Local Web Application

Ideal for React, Vue 3, SvelteKit, Angular, Next.js (Static Export), or plain HTML/CSS/JS folders.

1. Generate Static Build in Terminal:

   npm run build
   # Ensures relative paths in vite.config.js (base: './')

2. Launch WebToApp Studio Pro:
   • Select Windows (.exe) in the top platform pill selector.
   • In Tab 1 (Source), choose Local Files.
   • Click Browse Folder and select your project's dist/ or build/ directory.
   • Confirm that your Start File is index.html.
3. Configure Branding & Window:
   • In Tab 2 (Branding), enter your App Name and upload your logo (or let the automated initials generator create one).
   • In Tab 3 (Window), choose a window preset (e.g., Standard 1280×800 or Start Maximized).
4. Compile:
   • Click the green "Build & Export" button at the bottom right.
   • Your standalone 14MB .exe will be ready in dist/ in under 5 seconds!

---

Scenario 2: Live SaaS Website URL

Ideal for web apps, SaaS dashboards, customer portals, or remote stores.

1. Select Platform & Source:
   • In Tab 1 (Source), select Live Website URL.
   • Enter your live URL (e.g., https://dashboard.example.com).
2. Configure Offline & Security:
   • In Tab 4 (Security), add any external OAuth or API domains to Allowed Domains (e.g., accounts.google.com, api.example.com).
   • Enable Offline Auto-Reconnect Screen so users get a clean retry UI if internet drops.
3. Enable System Tray:
   • In Tab 3 (Window), check "Minimize to System Tray".
4. Compile:
   • Click "Build & Export". Your standalone wrapper is ready!

---

Scenario 3: Packaging an HTML5 Game

Ideal for Phaser 3, PixiJS, Godot Engine HTML5 exports, Construct 3, or RPG Maker MZ.

1. Select Local Game Folder:
   • In Tab 1 (Source), point to your exported game folder containing index.html and .wasm / .ogg files.
2. Configure Window Sizing:
   • In Tab 3 (Window), set your target game resolution (e.g., 1920 width × 1080 height).
   • Check "Fixed Dimensions (Prevent Resize)" to avoid stretching your canvas.
   • Check "Fullscreen (Kiosk Mode)" if creating an arcade or full-immersion game.
3. Protect Game Assets:
   • In Tab 4 (Security), check "AES-256 Vault Encryption" to encrypt your sprites, audio, and code into an un-hackable binary container.
   • Uncheck "Allow Developer Tools (F12)" and "Allow Context Menu" to prevent asset inspection.
4. Compile:
   • Click "Build & Export".
   • Run your standalone game executable with instant 60+ FPS hardware acceleration and unblocked offline audio!