메뉴
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.
SOC 직업 분류 기준
| 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. |
Note: Building WebF apps is nearly identical to building regular web apps with Vite + React/Vue/Svelte. The only difference is you replace your browser with WebF Go for testing during development. Everything else - project structure, build tools, testing frameworks, and deployment - works the same way.
⚠️ IMPORTANT: WebF Go is for development and testing ONLY. For production, you must build a Flutter app with WebF integration. Do NOT distribute WebF Go to end users.
Get up and running with WebF in minutes. This skill guides you through setting up your development environment, creating your first project, and loading it in WebF Go.
Only Node.js is required - that's it!
WebF lets web developers build native apps using familiar web tools.
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:
For Mobile Testing:
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.
Open your terminal and create a new project:
npm create vite@latest my-webf-app
Vite will prompt you to:
# 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/
For Desktop:
http://localhost:5173/ URLFor Mobile Device:
⚠️ IMPORTANT: Mobile devices cannot access localhost
You MUST use the Network URL instead:
--host flag to expose the dev server:
npm run dev -- --host
http://192.168.1.100:5173/)Your app will now render in WebF! 🎉
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.
To debug your app:
devtools://...)Note: JavaScript breakpoints don't work yet - use console.log() instead.
Causes & Solutions:
localhost → ✓ Use Network URL (http://192.168.x.x:5173)--host flag → ✓ Use npm run dev -- --hostnpm run dev⚠️ WebF Go is NOT for production use. It's a testing tool for developers.
When you're ready to deploy to end users, you need to:
1. Build Your Web Bundle
npm run build
2. Host Your Bundle
https://your-app.com)3. Create a Flutter App with WebF Integration
You or your Flutter team needs to:
pubspec.yamlExample 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
Resources:
| Aspect | Development | Production |
|---|---|---|
| Tool | WebF Go | Custom Flutter app |
| Purpose | Testing & iteration | End-user distribution |
| Setup | Download and run | Build Flutter app |
| Distribution | Don't distribute | App Store/Google Play |
| Requirements | Node.js only | Flutter SDK required |
Now that you have a working dev environment:
webf-async-rendering skillwebf-api-compatibility skillwebf-routing-setup skill# 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
Develop custom WebF native plugins based on Flutter packages. Create reusable plugins that wrap Flutter/platform capabilities as JavaScript APIs. Use when building plugins for native features like camera, payments, sensors, file access, or wrapping existing Flutter packages.
Develop custom native UI libraries based on Flutter widgets for WebF. Create reusable component libraries that wrap Flutter widgets as web-accessible custom elements. Use when building UI libraries, wrapping Flutter packages, or creating native component systems.
Check Web API and CSS feature compatibility in WebF - determine what JavaScript APIs, DOM methods, CSS properties, and layout modes are supported. Use when planning features, debugging why APIs don't work, or finding alternatives for unsupported features like IndexedDB, WebGL, float layout, or CSS Grid.
Understand and work with WebF's async rendering model - handle onscreen/offscreen events and element measurements correctly. Use when getBoundingClientRect returns zeros, computed styles are incorrect, measurements fail, or elements don't layout as expected.
Create high-performance infinite scrolling lists with pull-to-refresh and load-more capabilities using WebFListView. Use when building feed-style UIs, product catalogs, chat messages, or any scrollable list that needs optimal performance with large datasets.
Develop custom WebF native plugins based on Flutter packages. Create reusable plugins that wrap Flutter/platform capabilities as JavaScript APIs. Use when building plugins for native features like camera, payments, sensors, file access, or wrapping existing Flutter packages.