Webf Quickstart

WebF lets web developers build native apps using familiar web tools.

Step-by-Step Setup

1. Download WebF Go (For Testing Only)

WebF Go is a pre-built native app containing the WebF rendering engine. It's designed for development and testing purposes only - not for production deployment.

For Desktop Development:

• Download WebF Go for your OS (macOS, Windows, Linux)
• Get it from: https://openwebf.com/en/go

For Mobile Testing:

• iOS: Download from App Store
• Android: Download from Google Play

Remember: WebF Go is a testing tool. For production apps, you'll need to build a Flutter app with WebF integration.

Launch WebF Go - you'll see an input field ready to load your app.

2. Create Your Project with Vite

Open your terminal and create a new project:

npm create vite@latest my-webf-app

Vite will prompt you to:

1. Choose a framework: React, Vue, Svelte, etc.
2. Choose a variant (JavaScript or TypeScript)

3. Install Dependencies and Start Dev Server

# Move into your project
cd my-webf-app

# Install dependencies
npm install

# Start the dev server
npm run dev

Your terminal will show URLs like:

  VITE v5.0.0  ready in 123 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.100:5173/

4. Load in WebF Go

For Desktop:

1. Copy the http://localhost:5173/ URL
2. Paste into WebF Go's input field
3. Press Enter or click "Go"

For Mobile Device: ⚠️ IMPORTANT: Mobile devices cannot access localhost

You MUST use the Network URL instead:

1. Make sure your computer and mobile device are on the same WiFi network
2. Use --host flag to expose the dev server:

   npm run dev -- --host
   

3. Copy the Network URL (e.g., http://192.168.1.100:5173/)
4. Type it into WebF Go on your mobile device
5. Press "Go"

Your app will now render in WebF! 🎉

5. Verify Hot Reload

Make a quick change to your code and save. The app should automatically update - this is Vite's Hot Module Replacement (HMR) working with WebF.

6. (Optional) Setup Chrome DevTools

To debug your app:

1. Click the floating debug button in WebF Go
2. Click "Copy" to get the DevTools URL (devtools://...)
3. Paste into desktop Google Chrome browser
4. You can now use Console, Elements, Network tabs

Note: JavaScript breakpoints don't work yet - use console.log() instead.

Common Issues and Solutions

Issue: "Cannot connect" on mobile device

Causes & Solutions:

• ✗ Using localhost → ✓ Use Network URL (http://192.168.x.x:5173)
• ✗ Different WiFi networks → ✓ Put both devices on same network
• ✗ Missing --host flag → ✓ Use npm run dev -- --host
• ✗ Firewall blocking port → ✓ Allow port 5173 through firewall

Issue: "Connection refused"

• Dev server not running → Run npm run dev
• Wrong port number → Check terminal output for correct port
• Firewall blocking → Temporarily disable to test

Issue: App loads but doesn't update

• HMR not working → Refresh the page manually
• Dev server error → Check terminal for errors
• Network connection lost → Reconnect WiFi

Production Deployment

⚠️ WebF Go is NOT for production use. It's a testing tool for developers.

For Production Apps

When you're ready to deploy to end users, you need to:

1. Build Your Web Bundle

npm run build

2. Host Your Bundle

• Deploy to any web hosting (Vercel, Netlify, CDN, etc.)
• Your bundle will be accessible via URL (e.g., https://your-app.com)

3. Create a Flutter App with WebF Integration

You or your Flutter team needs to:

• Set up a Flutter project
• Add the WebF Flutter package to pubspec.yaml
• Configure the app (name, icon, splash screen, permissions)
• Load your web bundle URL in the WebF widget

Example Flutter Integration:

import 'package:webf/webf.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WebF(
      bundle: WebFBundle.fromUrl('https://your-app.com'),
    );
  }
}

4. Build and Deploy Flutter App

• Build for iOS and Android
• Submit to App Store and Google Play

Resources:

• WebF Integration Guide
• Flutter App Setup

Development vs Production

Next Steps

Now that you have a working dev environment:

1. Learn the #1 difference: WebF uses async rendering - see the webf-async-rendering skill
2. Check API compatibility: Not all web APIs work in WebF - see webf-api-compatibility skill
3. Add navigation: Multi-screen apps use WebF routing - see webf-routing-setup skill

Quick Reference

# Create new project
npm create vite@latest my-app

# Start dev server (desktop)
npm run dev

# Start dev server (mobile - with network access)
npm run dev -- --host

# Install dependencies
npm install

# Build for production
npm run build

Resources

• Getting Started Guide: https://openwebf.com/en/docs/developer-guide/getting-started
• WebF Go Guide: https://openwebf.com/en/docs/learn-webf/webf-go
• Development Workflow: https://openwebf.com/en/docs/developer-guide/development-workflow
• Download WebF Go: https://openwebf.com/en/go
• Full Documentation: https://openwebf.com/en/docs36:["$","$L3e",null,{"content":"$3f","frontMatter":{"name":"webf-quickstart","description":"Get started with WebF development - setup WebF Go, create a React/Vue/Svelte project with Vite, and load your first app. Use when starting a new WebF project, onboarding new developers, or setting up development environment."}}]