I am trying to create app connect extension but can not figure out how you install them (it is not on npm).
Is there step by step instructions anywhere? I have created a src folder and then added the files into this folder. I have then added the extension in the extensions tab and hit apply / save.
App connect extensions are a bit more involved than server connect extensions regarding installation. While Server connect files can just be put into the extensions folder, it's not that straight forward for App connect
Did you create the extension initially via the project manager,
I managed to get it installed removing the extension and then re-added it. I think the problem may have been something to do with iCloud and also my docker compose file. I am using timeseries postgres but when I run the install it puts the docker compose database back to normal postgres.
I got Claude to make the extension and have just tweaked it slightly and I can see the map components in Wappler.
I now have a error though that it cannot find the js file.
It does look to be there though and the script tag looks correct to me.
When I go to the script direct. It says it is not there. I have tried restarting the server (docker) and restarting Wappler. Have you any idea what I have missed?
I thought the issue may have been the icloud problem so I have moved it out of this folder.
I am trying to reinstall the extension but can not get it to install. I have clicked on the new extension button and added the src/wappler-mapbox-gl folder. I have then restarted and applied the changes. I just can’t now get this to install.
Please have a look at the June's Wappler Meetup video:
TL;TV
At the 30:35 mark, the widget has been created and is ready to be used.
This facilitates the installation method using the Extensions Manager. After installation, the folder can be removed. I usually place the folder in a different folder structure for safekeeping.
The installed widget is copied into the node_modules folder, while the HJSON file is translated into a JSON file and resides in the app/config folder. Any support files (JS and CSS) are place in the public folder.
When the widget is added using Wappler's UI, the link to the support files will be added to your document(s).
Disclaimer: The above is true if the widget is free from bugs.
I am definitely doing something wrong I just can figure out what. I have tried to follow the steps in the video but I am still missing something. I get this error.
It looks like Docker is the issue rather than the extension. Wappler installs the extension on your host, but if Docker doesn’t rebuild the container, the new files never make it inside — which is why you don’t see them in node_modules or app/config.
Quick checks:
1. Make sure Docker Desktop is running. If it’s not, Wappler can’t rebuild anything even though it looks like it’s publishing.
2. Check your Docker context:
Code
docker context ls
You want:
Code
default *
If the star is somewhere else, switch back:
Code
docker context use default
3. Rebuild the container in Wappler: Stop → Remove containers → Rebuild → Publish.
No need to mount src manually — extensions don’t work that way. Once Docker is rebuilding properly, the extension files will appear inside the container as expected.
I have just now used the DEMO Projects HQ project to try and make it work in there. I now get please select a file in your program path. On the left you can see the folder I am selecting.
Hi Jamie,
Why have you got a src directory in your root directory and why are you messing with Docker build configurations you should not have to do that? A directory called 'src' may have restrictions or be a reserved name? The Extension files should be in your public directory otherwise they are not accessible in the page/view. Regards to Docker all you need to do is build. There is no other required configuration (there shouldn't be by default anyway).
The src directory has no influence on the project, it is merely container for the local version of the extension. Once the extension has been installed, the src can be deleted from the project — read my post above.
Precisely why I suggested a new standard for installing Extensions (especially App Connect). No need for such messing around when it can be done with a single command. I digress.
Not necessary Ben but thank you. Personally I don't have any issues. I'd just like to see improvements made to make it easier for the end User. We'll continue to disagree on this and that so I'm out. Hope you get it resolved Jamie.
I have managed to get it working outside of docker on a test app
Why would it be it doesn’t work in docker though?
I did initially set this up as ‘Wappler own server’ then had a second target that was ‘docker’. I have since changed it to a docker in the project options.
I am also adding the database manually in the docker compose as timescale.
This is exactly why I abandoned Docker not long after it first appeared in Wappler — it introduces an extra layer of complications. Just ask Mr @Cheese.
That said, under pressure from my pear group, and even AI, I’m currently building one of my largest projects in Docker. And despite the headaches, I’ve managed to work through the issues or at least find reliable workarounds.
What you’re experiencing is very similar to the problems I’ve run into. With some persistence, all of them have been solvable.
My first recommendation is to publish the widget to NPM and install it from there. In my case, that has consistently resolved the issue.
If you don’t want the widget publicly available, you can delete it from NPM within a short window — I’m not sure of the exact timeframe. Alternatively, you can make the repository private so only you can access it.
I do like how simple docker makes to set things up and publish but this is all over my head.
I am quite happy to upload on NPM once it all works I guess my bet is build it in my test app. Upload it to NPM and then use the NPM for my docker project.