Deploying Updates

One of WebF’s most powerful features is its ability to support web-like “Over-the-Air” (OTA) updates. This allows you to deploy updates to your WebF application’s UI and logic instantly, without requiring users to download a new version from the app store.

The deployment workflow is nearly identical to deploying a standard website.

Step 1: Build Your WebF Application

First, create an optimized, static build of your WebF application using the standard build command from your build tool.


# For projects set up with Vite
npm run build

This will compile and minify your HTML, CSS, and JavaScript into a dist (or similar) directory.

Build Configuration

Make sure your build is optimized for production:

vite.config.js


import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
  plugins: [react()],
  build: {
    // Output directory
    outDir: 'dist',
    // Generate source maps for debugging
    sourcemap: true,
    // Minify for production
    minify: 'terser',
    // Target modern browsers
    target: 'es2015',
    // Chunk size warnings
    chunkSizeWarningLimit: 1000,
  },
});

Step 2: Deploy Your WebF App Assets to a CDN

Next, upload the contents of your build output directory (e.g., dist) to any static web hosting provider or CDN. Common choices include:

Vercel

Vercel provides zero-configuration deployment with automatic HTTPS.


# Install Vercel CLI
npm i -g vercel
 
# Deploy
vercel

Or connect your Git repository for automatic deployments.

Netlify

Netlify offers continuous deployment from Git with a simple setup.


# Install Netlify CLI
npm i -g netlify-cli
 
# Deploy
netlify deploy --prod

AWS S3/CloudFront

AWS S3 with CloudFront provides enterprise-grade hosting.


# Install AWS CLI
# Configure with: aws configure
 
# Sync to S3
aws s3 sync dist/ s3://your-bucket-name --delete
 
# Invalidate CloudFront cache
aws cloudfront create-invalidation \
  --distribution-id YOUR_DIST_ID \
  --paths "/*"

GitHub Pages

For open-source or public projects:


# Install gh-pages
npm i -D gh-pages
 
# Add to package.json
{
  "scripts": {
    "deploy": "vite build && gh-pages -d dist"
  }
}
 
# Deploy
npm run deploy

Custom Server

If using your own server:


# Build
npm run build
 
# Upload via SCP
scp -r dist/* user@your-server.com:/var/www/html/
 
# Or use rsync
rsync -avz --delete dist/ user@your-server.com:/var/www/html/

Step 3: Loading the URL in the App

The native host application (like WebF Go or your team’s custom app) is configured to load your WebF application from this public URL in a production environment.

For WebF Go

Open the WebF Go app
Enter your production URL (e.g., https://my-app.vercel.app)
Tap “Go”

For Custom Host Apps

If you’re working with a custom Flutter host app, the development team will configure the production URL in the app’s settings. This is typically done through:

Environment configuration
Remote config service
Hard-coded in the build

When a user opens their app, it will fetch and display the latest version of your WebF app assets from the deployed URL. To push an update, you simply repeat the process: build your WebF app, upload the new files to your host, and all users will get the update automatically the next time they launch the app.

Versioning and Rollback

Version Management

Consider adding version information to your builds:


// version.js
export const VERSION = process.env.npm_package_version;
export const BUILD_DATE = new Date().toISOString();

Display version in your app:


import { VERSION } from './version';
 
function Footer() {
  return (
    <footer>
      Version {VERSION}
    </footer>
  );
}

Implementing Rollback

Keep previous versions available for quick rollback:


# AWS S3 example - enable versioning
aws s3api put-bucket-versioning \
  --bucket your-bucket-name \
  --versioning-configuration Status=Enabled
 
# Deploy with timestamp
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
aws s3 sync dist/ s3://your-bucket/releases/$TIMESTAMP/

Cache Management

Proper cache management ensures users get updates promptly while still benefiting from caching.

Cache Headers

Configure your CDN/server to send appropriate cache headers:


# For HTML files - always check for updates
Cache-Control: no-cache, must-revalidate

# For JS/CSS with hashed filenames - cache forever
Cache-Control: public, max-age=31536000, immutable

# For images and other assets
Cache-Control: public, max-age=86400

Cache Busting

Vite automatically adds content hashes to filenames:


main.abc123.js
style.def456.css

This ensures users always get the latest version when files change.

Force Update Strategy

For critical updates that require native app changes, you’ll need to release a new version through the app stores. WebF cannot force reload or update the application runtime programmatically.

For WebF app content updates (HTML/CSS/JS): Users automatically get the latest version on next app restart if you’re using proper cache-busting strategies with file hashing.

Progressive Rollout

Roll out updates gradually to minimize risk:

Feature Flags

Use feature flags to control feature availability:


// config.js
export const features = {
  newCheckout: import.meta.env.VITE_FEATURE_NEW_CHECKOUT === 'true',
  betaFeature: import.meta.env.VITE_FEATURE_BETA === 'true',
};
 
// In your component
import { features } from './config';
 
function Checkout() {
  if (features.newCheckout) {
    return <NewCheckout />;
  }
  return <OldCheckout />;
}

A/B Testing

Implement A/B testing for new features:


function getVariant(userId) {
  // Consistent variant assignment based on user ID
  const hash = userId.split('').reduce((acc, char) =>
    ((acc << 5) - acc) + char.charCodeAt(0), 0
  );
  return Math.abs(hash) % 2 === 0 ? 'A' : 'B';
}
 
function App({ userId }) {
  const variant = getVariant(userId);
 
  return (
    <div>
      {variant === 'A' ? <FeatureA /> : <FeatureB />}
    </div>
  );
}

Monitoring Deployments

Error Tracking

Integrate error tracking to catch issues in production:


// With Sentry
import * as Sentry from "@sentry/react";
 
Sentry.init({
  dsn: "your-sentry-dsn",
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_APP_VERSION,
});

Analytics

Track deployment success:


// Track successful load
analytics.track('App Loaded', {
  version: VERSION,
  buildDate: BUILD_DATE,
  platform: navigator.platform,
});

Deployment Checklist

Before deploying to production: