vite-preset-tchmi

A Vite configuration preset for developing Beckhoff TwinCAT HMI (TcHmi) Framework Controls.

Disclaimer

This is not an official Beckhoff product. This project is a community-maintained tool. "TwinCAT" and "Beckhoff" are registered trademarks of Beckhoff Automation GmbH & Co. KG.

Description

This preset enables the use of Vite as a bundler for TcHmi Framework Controls. It facilitates the development process by providing:

• Third-Party Libraries: Allows the integration of external libraries via npm or other package managers.
• HMR (Hot Module Replacement): Enables a faster development workflow through HMR.
• TcHmi Integration: Configures the necessary environment to build controls compatible with the TcHmi framework.

Installation

npm install vite-preset-tchmi --save-dev

Usage

Create a vite.config.ts (or .js) in your project root and use the preset:

import { defineConfig } from 'vite';
import { tchmiPreset } from 'vite-preset-tchmi';

export default defineConfig(tchmiPreset({
    // The URL of the TcHmi LiveView (mandatory)
    liveviewUrl: '[http://127.0.0.1:3001/liveview.html](http://127.0.0.1:3001/liveview.html)',
    
    // The namespace of your TcHmi project/controls (mandatory)
    namespace: 'MyNewControls',
    
    // Optional: Port for the Vite dev server (default: 5173)
    port: 5173,
    
    // Optional: Source directory for your controls (default: 'src')
    sourceDir: 'src',
    
    // Optional: Build format 'es' or 'umd' (default: 'es')
    format: 'es'
}));

Options

| Option | Type | Description | | :--- | :--- | :--- | | liveviewUrl | string | Full URL to the running TcHmi Liveview. Used for proxying and HMR injection. | | namespace | string | Your HMI Namespace (matches the folder structure in TcHmi). | | port | number | The port the Vite server will run on. | | sourceDir | string | The directory where your control sources are located. | | format | 'es' \| 'umd' | The module format for the build. |