How to Use Static Files in Mendix Pluggable Widget Development Without NPM Libraries?

0
Question I'm developing a Mendix pluggable widget using React and I'm trying to include static files within the widget. After building with `npm run build`, the files are not accessible. Context I've tried using `extraDependencies` (which I've since learned is for Native only) and `copy-webpack-plugin`, but both methods didn't work due to Rollup errors. Issue I'm looking for the correct approach to copy static folders into the Mendix runtime.
asked
2 answers
0

Hi Rama,

Can you please explain in more detail what exactly you want to do inside the static folders, such as images or other items?

answered
0

Mendix pluggable widget tools in version 8.x used Webpack to create the bundle. From Mendix 9.x, the pluggable widget tools started using roll-up to create the bundle.

It means the webpack config won't get called, and instead you need `rollup.config.js`. In that file, you can inject your copy logic.

 

Example:

// rollup.config.js

import { join, dirname } from "path";
import json from "@rollup/plugin-json";
import command from "rollup-plugin-command";
import copy from "recursive-copy";

export default args => {
    const outDir = join(__dirname, "dist/tmp/widgets/mendix/MY_WIDGET");
    const extraFilesPath = join(__dirname, "src/resources/MY_EXTRA_FILES_TO_BE_COPIED");
    const result = args.configDefaultConfig;

    return result.map((config, index) => {

        if (index === 0) {
            config.plugins = [...config.plugins, copy_MY_EXTRA_FILES(extraFilesPath, outDir)];
        }

        config.plugins.push(json());
        return config;
    });
};

function copy_MY_EXTRA_FILES(extraFilesPath, outDir) {
    return command([async () => copy(dirname(extraFilesPath), outDir, { overwrite: true })]);
}

 

answered