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

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

`Usage`

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

`ts 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', // 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`

Description

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

Usage

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

ts
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',
    
    // 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. |