fe-tool-boilerplate

Vue 3 + Vite + TypeScript + Vitest + ESLint

This template will help you quickly start developing tools with Vue 3, Vite, TypeScript, Element Plus and Tailwind.

Project Setup

yarn

Compile and Hot-Reload for Development

yarn dev

Type-Check, Compile and Minify for Production

yarn build

Run Unit Tests with Vitest

yarn test:unit

Lint with ESLint

yarn lint

Using This Template with Degit

You can scaffold a new tool project based on this boilerplate using degit:

npx degit CroudTech/fe-tool-boilerplate croud-tool
cd croud-tool
yarn install
yarn dev

Recommended next steps:

Rename croud-tool to desired tool project name.
Update package.json with new tool project name.

(Optional) Re-init git:

git init
git add .
git commit -m "Initial commit"

Exposing Views for Module Federation

To enable Module Federation and allow this app to expose specific views (or any modules) to a host application, follow these steps:

1. Configure `vite.config.ts`

Open your vite.config.ts file and set up the federation plugin with the views you want to expose:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: 'fe_tool',
      filename: 'remoteEntry.js',
      exposes: {
        './DashboardView': './src/views/DashboardView.vue',
        './NewRunView': './src/views/NewRunView.vue',
        './ResultView': './src/views/ResultView.vue',
      },
      shared: ['vue'],
    }),
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false,
  },
})

2. Build the Remote App

Run the build command to generate the remoteEntry.js file that a host app can consume:

yarn build

This sets up the app as a remote module, exposing DashboardView, NewRunView, and ResultView to be used in a host app via Module Federation.

CroudTech/fe-tool-boilerplate