App Connect Extensions Install Help Please :)

Hi,

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.

I have then restarted wappler. When I look at the components though it is not showing and there is nothing in the extensions folder.

Is there anyway to debug why this is not working?

Thanks,

Hey Jamie you can find the documentation for installing Extensions here

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,

if you created the extension in your project, no need to install it, it's already there

Thanks both :slight_smile:

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.

image

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?

Thanks,

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.

Is there any obvious step I am missing.

Thanks,

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.

Thanks @ben .

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.

image

Looking at it the files have not made it into the docker container I do not think.

Do I need to add - '../../../../src:/opt/node_app/src' into this to make sure the files are copied across?

Thanks,

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.

Thanks @ben .

I first got

Then this changed to

image

Now I can’t run the project at all though.

Really not to sure what I have done :thinking:

I think I have managed to revert it back now.

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.

I am completely lost.

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.

Maybe an idea to watch June's Meetup???

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 think that the problem with Docker may go away if the extension is installed from a remote repository like NPM.

No need, it is perfect as it is — which you will see after watching the video. The problem is Docker

Thanks both :slight_smile:

Would you suggest to try and getting it working outside docker first on a test project just to rule that out?

I have managed to get it working outside of docker on a test app :slight_smile:

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.

Could any of these be the cause of the issue?

Thanks,

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.

PS: See the video on how to publish to NPM

Thanks @ben, glad it’s not just me :sweat_smile:

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 :slight_smile: I guess my bet is build it in my test app. Upload it to NPM and then use the NPM for my docker project.

Thanks,

1 Like

I have managed to get it working quite easily when not working with Docker and using ‘own server’.

Uploaded to NPM. Can now install via the NPM and works great in docker.

If it’s of use to anybody the link is:

https://www.npmjs.com/package/wappler-mapbox-gl

This has been completely built by Claude. There is still bit’s that need fixing.

Thanks,

2 Likes

Hi Jamie,

Thank you for publishing this Docker extension. Mapbox appears to be a viable alternative to Google Maps for the project I am currently working on.