Skip to Content
DocsDeveloper GuideBuild Tools

Using with Web Build Tools

Following the core principle of Ecosystem Compatibility, WebF is designed to work with the modern web development toolchain, including your preferred build tool.

The Development Workflow

The development workflow is straightforward:

  1. Use a build tool to start a local development server for your WebF application.
  2. Load the URL of that server into the WebF Go app.

This means that any web build tool that can create a local dev server is compatible with WebF. No special plugins or complex configuration are required to get started.

While you can use any tool, Vite is highly recommended for the best development experience due to its fast startup time and excellent Hot Module Replacement (HMR) support, which integrates seamlessly with WebF.

Vite  is the recommended build tool for WebF projects due to its:

  • Lightning-fast cold start
  • Instant hot module replacement (HMR)
  • Built-in support for TypeScript, JSX, CSS pre-processors
  • Optimized build output
  • Native ES modules support

Creating a Vite Project

npm create vite@latest my-webf-app
cd my-webf-app
npm install
npm run dev

Vite will start a dev server (typically at http://localhost:5173) that you can load in WebF Go.

Webpack

Webpack  is a mature, highly configurable bundler that works well with WebF when used with webpack-dev-server.

Basic Setup

npm install --save-dev webpack webpack-cli webpack-dev-server

Starting the Dev Server

npx webpack serve --mode development

The dev server will typically run at http://localhost:8080 and can be loaded in WebF Go.

esbuild

esbuild  is an extremely fast JavaScript bundler and minifier. You can use its built-in serve API for development.

Basic Setup

npm install --save-dev esbuild

Creating a Dev Server

You can create a simple build script that uses esbuild’s serve API:

// build.js
const esbuild = require('esbuild');
 
esbuild.serve(
  {
    servedir: 'public',
    port: 3000,
  },
  {
    entryPoints: ['src/app.js'],
    bundle: true,
    outfile: 'public/bundle.js',
  }
).then(() => {
  console.log('Server running at http://localhost:3000');
});

Rollup

Rollup  is a module bundler that is often used with development server plugins.

Basic Setup with Dev Server

npm install --save-dev rollup @rollup/plugin-serve

You can configure Rollup with a development server plugin to create a local URL that WebF Go can load.

Advanced Styling

WebF’s compatibility with the standard web toolchain means you can use any modern CSS framework, pre-processor, or methodology you are familiar with.

The general process is always the same:

  1. Follow the official setup guide for the styling tool to integrate it with your build tool (e.g., Vite).
  2. Your build tool will process your styles (e.g., converting Sass to CSS, or processing Tailwind directives) and bundle the final CSS.
  3. WebF will render the resulting CSS just like a browser.

Example: Using Tailwind CSS

Tailwind CSS  is a popular utility-first CSS framework that works great with WebF.

Important: WebF is currently compatible with Tailwind CSS v3. You must follow the setup instructions specifically for this version.

To add Tailwind CSS v3 to a Vite project, follow the official guide on their v3 website:

Install Tailwind CSS v3 with Vite

The process involves:

  1. Installing the v3 packages: 
    npm install -D tailwindcss@^3.0 postcss autoprefixer
npx tailwindcss init -p
  2. Configuring your tailwind.config.js to scan your source files.
  3. Adding the @tailwind directives to your main CSS file.

After this setup, you can use Tailwind’s utility classes in your components, and they will be correctly processed by your dev server and rendered in WebF.

// Example of a React component using Tailwind CSS utility classes
function TailwindCard() {
  return (
    <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
      <div>
        <div class="text-xl font-medium text-black">WebF App</div>
        <p class="text-slate-500">You're using Tailwind!</p>
      </div>
    </div>
  );
}

Using Sass/SCSS or PostCSS

The same principle applies. For example, to use Sass, you would simply install the sass package (npm install -D sass) and then create .scss files in your project. Vite has built-in support for processing them automatically.

Next Steps

Now that you understand build tools and styling, explore:

Web FrameworksOverview