Jira Addon Deployment Fails in Production; Priority: Very High

[Chris Chuck]

We are running an addon on an express server that is very similar to the code found here. Except, instead of serving up handlebars files, we are running a React app. 

Locally, we can upload our app using ngrok just fine. When we run it on our production servers however, we get errors. Initially we were getting a 404 error when we attempted an upload. This was fixed when we added a `POST` to the `/installed` route, following suggestions from this issue. 

Unfortunately, after the 404 was fixed, we now get a 502 error when we try to upload our addon. Checking the traffic that's hitting our endpoint, I see a 200 from Atlassian hitting us at the `/atlassian-connect` endpoint, where we return our `atlassian-connect.json`. That is the only endpoint getting hit on our end and our server logs no errors. (See image below)

Again, if we run our app locally and use ngrok, none of these issues occur.

Relevant code below (with some values changed)

config.json: 

{
  "development": { 
    "port": 3000,
    "store": {
      "adapter": "sequelize",
      "dialect": "sqlite",
      "storage": "store.db"
    } 
  },
  "production": { 
    "errorTemplate": false,
    "localBaseUrl": "https://production.url",
    "whitelist": [ "*.jira-dev.com", "*.atlassian.net", "*.atlassian.com", "*.jira.com" ], 
    "store": {
      "adapter": "sequelize",
      "dialect": "sqlite",
      "storage": "store.db"
    } 
   }, 
   "product": "jira"
}

 credentials.json:

{ 
  "hosts": { 
    "https://my-instance.atlassian.net": {
      "product": "jira",
      "username": "my-email@email.com",
      "password": "generated-token" 
    } 
  }
}

atlassian-connect.json:

{ 
  "name": "Hello World",
  "description": "Atlassian Connect app",
  "key": "com.example.myapp",
  "baseUrl": "https://production.url", 
  "vendor": { 
    "name": "Example, Inc.", 
    "url": "http://example.com" 
  }, 
  "authentication": { 
    "type": "jwt" 
  },
  "apiVersion": 1,
  "lifecycle": {
    "installed": "/installed", 
    "uninstalled": "/uninstalled"
  },
  "scopes": [ "read", "write", "delete", "project_admin", "admin" ],
  "modules": { 
    "webPanels": [ 
      { 
        "url": "/widget", 
        "location": "atl.jira.view.issue.right.context", 
        "layout": { 
          "width": "100%", 
          "height": "400"
        }, 
        "weight": 11, 
        "name": { 
          "value": "Aisera Ticket Intelligence" 
        }, 
        "key": "my-web-panel"
       }
    ] 
  }
}

express server:

import "@babel/polyfill"
import express from 'express'
import cors from 'cors'
import path from 'path'
import http from 'http'
import ac from 'atlassian-connect-express'
import bodyParser from 'body-parser'
import compression from 'compression'
import cookieParser from 'cookie-parser'
import React from "react"
import { renderToString } from 'react-dom/server'
import template from '../client/template'
import App from '../client/app'

// standard express setup + usuage
const app = express();
app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser());
app.use(compression());

// Atlassian addon + config + express addon
const addon = ac(app);
const port = addon.config.port();
app.use(addon.middleware());

// static asset serving
app.use('/js',(req, res) => res.sendFile(path.join(__dirname, '../../dist/app.bundle.js')) );
app.use('/css', (req, res) => res.sendFile(path.join(__dirname, '../assets/styles.css')));

// sends atlassian connect.json
app.get('/atlassian-connect', (req, res) => { res.sendFile(path.join(__dirname, '../../atlassian-connect.json'))})
app.get('/', (req, res) => res.sendFile(path.join(__dirname, '../../atlassian-connect.json')));

app.get('/installed', (req, res) => res.send(200) )
app.post('/installed', (req, res) => res.send(200) )
app.get('/uninstalled', (req, res) => res.send(200) )
app.post('/uninstalled', (req, res) => res.send(200) )

// servers actual widget (SSR React App)
app.get('/widget', (req, res) => {
  const jsx = ( <App /> );
  const reactDom = renderToString(jsx);
  res.writeHead( 200, { "Content-Type": "text/html" } );
  res.end( template( reactDom ) );
})

// runs the server
http.createServer(app).listen(port, function(){
  console.log('Add-on server running at ' + port);
}) 

[Chris Chuck]

Nevermind, I forgot to change the my baseurl to the production url :(

[Taras]

Hello! Can you share your project template? I have some problems with implementing react without handlebars, this is become really frustrating to me :( Thanks!