Project setup

To test your web component, use this repo. It contains the shell application for hosting the web component and a sample web component that can be modified to your specifications. The shell application enables you to test your web components locally. Alternatively, you can create a web component without using the template:

Initialise the project

Create a new folder for your web component:

mkdir my-acuitas-widget
cd my-acuitas-widget
npm init -y

Install dependencies

Install the required dependencies:

# Core dependencies
npm install lit @acuitas/shared

# Development dependencies
npm install -D @originjs/vite-plugin-federation typescript vite

Project structure

Create this project structure:

my-acuitas-widget/
├── package.json
├── tsconfig.json
├── vite.config.ts
├── index.html
├── src/
│   ├── index.ts
│   ├── my-widget.ts
│   └── vite-env.d.ts
└── public/
    └── vite.svg

Configure package.json

Update your package.json with this configuration:

{
  "name": "my-acuitas-widget",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port 9003",
    "build": "tsc && vite build",
    "preview": "vite preview --port 9003",
    "bp": "tsc && vite build && vite preview"
  },
  "dependencies": {
    "@acuitas/shared": "file:../acuitas-shared",
    "lit": "^3.3.0"
  },
  "devDependencies": {
    "@originjs/vite-plugin-federation": "^1.4.1",
    "typescript": "~5.8.3",
    "vite": "^7.0.4"
  }
}

Configure TypeScript

Create a tsconfig.json file:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "experimentalDecorators": true
  },
  "include": ["src"]
}

Configure Vite

Create a vite.config.ts file:

import federation from "@originjs/vite-plugin-federation";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    federation({
      name: "myAcuitasWidget",
      filename: "remoteEntry.js",
      exposes: {
        "./Component": "./src/index.ts",
      },
      shared: ["lit"],
    }),
  ],
  server: {
    port: 9003,
    cors: true,
  },
  preview: {
    port: 9003,
    cors: true,
  },
  build: {
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});