How to Implement UI for Custom App connect Extension

Wappler General How To
#1

I been trying to get the Custom App connect UI working (.hjson), but for some reason, it doesn’t seem to be working for me, could someone please help with it, a simple example on how to get the custom app connect module visible on the app connect drawer would be of great help.

I have tried following the tutorial on Wappler Extensibility - Build Custom App Connect Extensions

  1. Created scr/example folder in the Project directory
  2. In Project settings, added new extension, selected folder path scr/example, hit save
  3. Added in a simple js file
  4. After that I edited the components.hjson file using the one shown in the above tutorial

Even after doing all the above, am not able to see the module in the drawer, Please let me know if am doing anything wrong

2 Likes
#2

This Works for Local Wappler Server Deployments, not working for Docker Deployements

#3

Firstly, from what I gathered so far, the custom app connect modules work as mentioned below:
When we create a new app connect extension from Project settings, e.g.: mapping to folder say “extensions”, the below line gets added to the project.json file located in .wappler folder.

"extensions": [
    {
      "name": "file:extensions"
    }
  ]

it then creates the app_connect/components.hjson and app_connect/package.json files in the extensions folder.
a shortcut gets created in node_modules folder which points to your chosen extension folder which in this case is “extensions”.

So basically when Wappler App connect module load-up in the Modules drawer, they pickup the extensions array from the project.json, and then fetch the modules from using shortcut, which basically points to node_modules/extensions folder.

In case of npm repo installed, it pulls them directly from node_modules

Now the issue:
In a Docker Deployment, there is no node_modules folder created on the host machine, so basically when you add a new extension or fetch from npm/github repo, it does all of the above but in the Container environment, as the docker-compose holds no volume mapping for the node_modules, it fails to render the module in the UI, as the wappler UI is operating on the host machine.

#4

Hi @Roney_Dsilva,

You find how to make it work?
I can’t make that Wappler UI load the module
Using Docker, I’m stuck here.

Thanks

#5

Hi @Alexander_Paladines,
The Workaround is that you create a node_modules folder and place your extension folder in it,
ex: wappler_ac_ag_grid

This is required when your creating the extension, after you published it, you can add to the project settings, and then run npm install (extension_name) to get it work on the UI