Atlassian Connect Express - Error loading .js using React and an Application Load Balancer

Hey there folks,

I’m having an issue running my application in a production environment. When I use ACE in development and have ACE handle registration for me, my application works as expected without any issues.

However, when I host the application in AWS using ECS and an Application Load Balancer, I can get the application to install, and the HTML will render in the associated panel, but none of the related React Javascript works.

To provide an example, I ran the very minimal implementation of the Hello World application from the ACE demo.

All of the HTML renders and the proper links work. However, clicking on “Get Excited!” does not add exclamation points to Hello World! as expected from the demo.

When I host the application, I’m hosting it at: https://{api.endpoint}/jsm-timer-plugin

And installing it from: https://{api.endpoint}/jsm-timer-plugin/atlassian-connect.json

However, at some point, it appears that my service is trying to make a call to a JavaScript file at the wrong location. It is trying to access https://{api.endpoint}/hello-world.js, when it should be trying to access https://{api.endpoint}/jsm-timer-plugin/hello-world.js

I updated the base_url in the configuration to match the hosted atlassian-connect.json file.

{
    "key": "test-app",
    "name": "Test App",
    "description": "Testing React",
    "baseUrl": "https://{API.Endpoint}/jsm-timer-plugin",
    "authentication": {
        "type": "jwt"
    },
    "lifecycle": {
        "installed": "/installed"
    },
    "scopes": [
        "READ",
        "WRITE"
    ],
    "modules": {
        "generalPages": [
            {
                "url": "/hello-world",
                "key": "hello-world",
                "location": "system.top.navigation.bar",
                "name": {
                    "value": "Greeting"
                }
            }
        ]
    }
}

I tried adding a router to the app.js file to replace the default routing behavior, but I’m still running into the same error:

const router = express.Router();

router.get('/', (req, res) => {
  res.redirect('/atlassian-connect.json');
});

// This is an example route used by "generalPages" module (see atlassian-connect.json).
// Verify that the incoming request is authenticated with Atlassian Connect.
router.get('/hello-world', addon.authenticate(), (req, res) => {
  // Rendering a template is easy; the render method takes two params: the name of the component or template file, and its props.
  // Handlebars and jsx are both supported, but please note that jsx changes require `npm run watch-jsx` in order to be picked up by the server.
  res.render(
      'hello-world.jsx', // change this to 'hello-world.jsx' to use the Atlaskit & React version
      {
        title: 'Atlassian Connect'
        //, issueId: req.query['issueId']
        //, browserOnly: true // you can set this to disable server-side rendering for react views
      }
  );
});
// Add additional route handlers here...

router.get('/ping', (req, res) => {
  res.sendStatus(200);
});

app.use('/jsm-timer-plugin', router);

// Boot the HTTP server
http.createServer(app).listen(port, () => {
  console.log('App server running at http://' + os.hostname() + ':' + port);

  // Enables auto registration/de-registration of app into a host in dev mode
  // if (devEnv) addon.register();
});

Is there an additional setting I need to change to account for the pre-pended URL?

Can you post your config.json? (make sure to remove/censor any passwords/tokens/paths before posting)

What environment value your app sets on loading? Is there a corresponding entry in config.json?

Have/Can you try setting up baseUrl with trailing slash? Does it change anything?