Skip to main content

Frontend SDK

Browser-side SDK for building microfrontend applications.

Overview​

The Frontend SDK (@easy/appserver-frontend-sdk) provides everything needed to build microfrontends for Easy AppServer:

  • Session context access (user, roles, permissions)
  • App settings management
  • Authenticated HTTP fetch to AppServer APIs
  • Module Federation adapter
  • Iframe adapter
  • Vue 3 integration
  • Asset loading utilities

Quick Start​

npm install @easy/appserver-frontend-sdk

Vue 3 Integration​

import { createApp } from 'vue';
import { createAppServerPlugin } from '@easy/appserver-frontend-sdk/vue';
import App from './App.vue';

const app = createApp(App);

app.use(createAppServerPlugin({
  sessionContext, // Provided by Shell
  appSettings     // Provided by Shell
}));

app.mount('#app');

Using in Components​

<script setup>
import { useSession, useAppSettings, useFetch, useHasPermission } from '@easy/appserver-frontend-sdk/vue';

const { session } = useSession();
const { settings } = useAppSettings();
const { fetch } = useFetch();
const hasPermission = useHasPermission();

// Check permissions
if (hasPermission('invoice:write')) {
  // User can write invoices
}

// Make authenticated API call
const data = await fetch('/api/myapp/data');
</script>

<template>
  <div>
    <h1>Welcome, {{ session.userId }}</h1>
    <p>App Endpoint: {{ settings.apiEndpoint }}</p>
  </div>
</template>

Key Features​

Session Context​

Access user information:

  • User ID
  • Roles
  • Permissions
  • Session token

App Settings​

Access application configuration securely

Authenticated Fetch​

Make API calls with automatic authentication

Module Federation Adapter​

Seamless integration with Webpack Module Federation

Iframe Adapter​

Support for iframe-based microfrontends with postMessage

Asset Loading​

Utilities for loading scripts and stylesheets with:

  • Retry logic
  • Subresource Integrity (SRI)
  • Timeout handling

Documentation​

TypeScript Support​

Full TypeScript support with type definitions:

import type { SessionContext, AppSettings } from '@easy/appserver-frontend-sdk';

Examples​

TODO: Link to example microfrontends