Hi,
I’m trying to migrate a Connect app to Forge. My current app is composed with Vite.js and it has multiple entry points configured, so it produces several html files for different parts of the app.
For example, it produces an index.html for the main interface, but then it builds a settings.html for the settings page, and an options.html for a Dialog modal.
When trying to migrate to Forge, the modules section of the manifest must be pointed to a resource key. But the resource key must only be a directory. The intention here is for each resource to be a different static app, but that would mean a lot of duplication, having several vite apps, and a huge overhead…
I’ve seen that there are hacks that detect the module loaded and some other data from view.getContext() in order to load different apps or parts of the app, but the problem with this approach is that it generates one huge bundle that gets loaded every time. So all the code for the settings page gets loaded (but not used) on the main app and on the dialog modal app. Which is such a waste…
So… is there a way to cleanly point a resource to a specific file? How would you resolve this?
Thanks!
2 Likes
One thing I tried and forgot to mention, is to make Vite produce its output as folders (similar to Astro): dist/main/index.html, dist/settings/index.html, dist/options/index.html.
The idea here would be to use different resource configurations, pointing to the various folders that are still being built by a single process.
There are two problems with this approach:
- The tunnel for local development is broken. When the tunnel is used, it completely replaces the entire resource path with the localhost:port url, and assumes all files are at the root. So, all resources end up pointing at the same entry point for local development. Which is not what we want.
- Even if we dismiss this, and develop entirely by using
forge deploy, since the whole point of this is to have a single build and shared resources, the bundles are compiled to a dist/assets directory. But since this directory sits one level above the declared path for the resoruces (dist/settings), Forge does not allow that and it errors out with 403.
Any other ideas that might work?
1 Like
I came here to post this exact same question.
In my case, I’m using webpack not vite (not that it matters), and the reason why I’m generating multiple entry points from a single bundle is that I’m building a Confluence macro that uses Custom UI for both the macro itself, as well as the (relatively recent) ability to use Custom UI for the macro config as well.
So ideally I want my Webpack bundle to generate a static/index.html for the macro UI, and a static/config.html for the config UI. But as noted above, Forge expects the resources[].path in the manifest to point to a directory containing an index.html file.
And similarly to @martin.peverelli , I also tried outputting into discrete subdirectories such as static/macro/index.html and static/config/index.html and ran into the same 403 issue when these HTML files try to include shared JS/CSS resources from the parent static/* directory.
I can understand (sort of) the limitation on referencing assets in parent directories (to avoid a potential path traversal attack), but I don’t quite understand the arbitrary restriction that only files named index.html are allowed and that resources[].path must be a directory.
Yet again, Forge can’t seem to get out of its own way and allow us the flexibility to use existing, tried and true practices for building frontend UIs. There always seems to be some weird hoops that Forge makes us jump through that just aren’t there with P2 or Connect app development.
2 Likes
Grappling with this at the moment. Is the best approach then really to have every entry point, whether that be macros, or other kinds, built separately (individually)?