/web-extension-template

Template for creating a Web Extension for Mendix Studio Pro

Primary LanguageTypeScriptMIT LicenseMIT

Studio Pro Web Extension Template

This repository contains a template for creating a web extension for Mendix Studio Pro. Use this template to kickstart your web extension development process.

Getting Started

Prerequisites

  • Node.js (LTS version recommended)
  • npm (usually comes with Node.js)
  • Mendix Studio Pro (version 10.21.0 or later)

Installation

  1. Clone this repository (or fork it to create your own copy):
   git clone https://github.com/mendix/web-extension-template.git
  1. Navigate to the project directory:
   cd web-extension-template
  1. Install dependencies:
   npm install

Building the Extension

To build the extension, run:

npm run build

The build output will be located in the dist/myextension directory.

Usage

  1. After building, copy the myextension directory from dist to the webextensions directory in your Mendix app project. The resulting structure should be as follows:
<app directory>/
  App.mpr
  ...
  webextensions/
    myextension/
      manifest.json
      main.js
      ...

  1. Rename the myextension directory to the actual name of your extension.

  2. Start Studio Pro with the --enable-extension-development feature flag.

  3. Open your Mendix app in Studio Pro and start using your web extension!

Development

We recommend using Visual Studio Code (VSCode) for developing your web extension. VSCode offers excellent support for JavaScript/TypeScript development and has a wide range of helpful extensions.