My custom UI modal does not work outside of a tunnel

Hi All,
I’m having an issue with modal dialogs in a Forge Custom UI. Long story made short: My modals are working from within a debugging tunnel, but they do not work when I deploy them to the Forge cloud. Am I missing a configuration setting?

More detail:
I’m building a Forge app that displays a Jira issue panel using a custom UI written with React and Atlaskit. The app has a button that should open a custom UI modal dialog as a separate resource. When running through a tunnel, the modal displays and behaves exactly as expected. When running without a tunnel, a modal dialog is displayed, but it is empty. I can only dismiss the dialog by clicking on the blanket in the background. The issue panel is otherwise working as expected. When I look at the debug console in Chrome, I see several 403 errors that are not occurring when the tunnel is opened.

Here is the code that opens the modal:

const CreateSubprojectButton = (props) => {

    const modal = new Modal({
        resource: 'create-subproject-modal',
        onClose: (payload) => {
            if (payload) {
                props.onSubprojectCreated(payload);
            }
        },
        size: 'medium',
        context: {
            customKey: 'custom-value',
        },
    });

    return (
        <Button
            appearance="subtle"
            spacing="compact"
            iconBefore={<AddCircleIcon label="Add Item Icon" size="small" />}
            onClick={() => modal.open()}
        />
    );
};

This is the resources section of my Manifest file:

resources:
  - key: main
    path: static/jira-issue-panel/build
  - key: create-subproject-modal
    path: static/create-subproject-modal/build

When running with a tunnel, I see this output from Forge, and the modal is displayed as expected:

Serving file index.html for resource create-subproject-modal

When running outside of a tunnel, the modal displays as an empty frame, and I see these sort of errors in the Chrome debug console:

GET https://7cfd456b-33e7-488b-8a0e-c186e8e9125d.cdn.prod.atlassian-dev.net/static/css/2.8fdb5d1e.chunk.css net::ERR_ABORTED 403

Any insight or guidance would be appreciated. Let me know if any screen shots or logs or whatever would help. Thanks!

Have you configured the build for your modal app to use relative asset paths? The symptoms you describe are consistent with what happens if you use absolute paths, which will likely work locally with a tunnel, but not without.

See also Accessing static assets in the docs.

2 Likes

@jbrunton - Thanks! That was the issue. More specifically, I failed to add the homepage element to the package.json file of my modal dialog:

"homepage": "./"

So, the modal React app was compiling with absolute references instead relative. Thank you!

1 Like