Introduction to Garfish

Garfish is a powerful tool for managing micro-frontends, enabling seamless integration and operation of multiple frontend frameworks within a single application. It facilitates effortless integration, rendering, and lifecycle management of multiple micro-applications.

Getting Started with Garfish

  // Install Garfish
  npm install --save @garfish/cli
  // Initialize Garfish
  const Garfish = require('@garfish/core');
  const garfish = new Garfish();
  garfish.run({
    basename: '/',
    apps: [
      {
        name: 'app1',
        activeWhen: '/app1',
        entry: 'http://localhost:3001',
      },
      {
        name: 'app2',
        activeWhen: '/app2',
        entry: 'http://localhost:3002',
      },
    ],
  });

API Examples

Register App

  garfish.registerApp({
    name: 'app3',
    activeWhen: '/app3',
    entry: 'http://localhost:3003',
  });

Mount and Unmount Apps

  // Mount app manually
  garfish.mount('app1');

  // Unmount app manually
  garfish.unmount('app1');

Load App Resources

  // Preload app resources
  garfish.loadApp({
    name: 'app2',
    entry: 'http://localhost:3002',
  });

Set Global Configurations

  garfish.setGlobalOptions({
    basename: '/base',
  });

Example Application

  const Garfish = require('@garfish/core');
  const garfish = new Garfish();

  garfish.run({
    basename: '/app',
    apps: [
      {
        name: 'home',
        activeWhen: '/',
        entry: 'http://localhost:4000',
      },
      {
        name: 'dashboard',
        activeWhen: '/dashboard',
        entry: 'http://localhost:5000',
      },
    ],
  });

  // Register additional app
  garfish.registerApp({
    name: 'settings',
    activeWhen: '/settings',
    entry: 'http://localhost:6000',
  });

  // Mount the dashboard app manually
  garfish.mount('dashboard');

With these powerful API capabilities, you can integrate and manage your micro-frontends more efficiently using Garfish.

Hash: 388b067cf228d49b27558f1938eb92b810a1c797696d4579b824babf28d9f40d