Skip to Content
DocsDeveloper GuideGetting Started

Getting Started

Getting started with WebF is designed to be as familiar as possible for a web developer. You will use your standard web development tools and a pre-built native shell app called WebF Go.

Prerequisites

To get started with WebF, you only need one tool you likely already have:

  • Node.js: Required to create and run your WebF app project with tools like Vite. We recommend the latest LTS (Long-Term Support) version from nodejs.org .

That’s it. You do not need to install the Flutter SDK, Xcode, or Android Studio to start building your app on your desktop.

Step 1: Download and Run WebF Go

The easiest way to see your application in action is with WebF Go, a pre-built native shell that contains the WebF rendering engine.

  • For Desktop Development: Download the WebF Go application for your desktop OS (macOS, Windows, or Linux) from the official website: https://openwebf.com/en/go

  • For Mobile Testing: Simply download the WebF Go app from the App Store (for iOS) or Google Play (for Android) directly onto your physical device.

Launch the WebF Go application. You’ll see a simple window with an input field, ready to load your project.

Step 2: Create Your WebF App Project with Vite

You can use any modern web build tool, but for this guide, we’ll use Vite.

To create a new WebF app project, open your terminal and run:

npm create vite@latest

Vite will prompt you to name your project and select a framework like React, Vue, Svelte, etc.

Step 3: Start Your Web Dev Server

Once your project is created, navigate into its directory, install the dependencies, and start the development server.

# Move into your new project folder
cd <your-project-name>
 
# Install dependencies
npm install
 
# Start the dev server
npm run dev

The terminal will output a local network URL for your running application, typically something like http://localhost:5173. Make sure you use the Network URL if you are testing on a physical mobile device.

Step 4: Load Your App in WebF Go

With your dev server running, the final step is to load it in the WebF Go app (on desktop or mobile).

  1. Copy the local Network URL from your terminal.
  2. Paste the URL into the input field at the top of the WebF Go app.
  3. Tap “Go”.

Your WebF application will now render inside the native WebF environment. Any changes you make to your code will instantly update in the app.

A Note for Hybrid Teams

While this guide focuses on the “WebF Go” app for rapid development, it’s important to know that WebF can be embedded into any new or existing Flutter application.

If you are a web developer collaborating with a Flutter team, they may provide you with a custom-built host app instead of using WebF Go. Your development workflow remains the same: run your WebF app project with npm run dev and load the local URL into the app they provide.

For more details on how WebF is integrated into a Flutter project from the native side, you can refer to our companion guide: Guide for Flutter Developers.

OverviewDevelopment Workflow