Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

atlassian-connect-express 4: typescript, react and atlaskit


In this article we will add Typescript, React and Atlaskit to our atlassian-connect-express app.

Our code will be based on this article.

You can find the source code for this article here.

You can find the video for this article here.

In the previous articles we had the following output for our Example Page menu:


In this article we will add Typescript, React and Atlaskit to the output and the page will look like this:

Screenshot 2021-05-09 at 07.32.23.png

To create this output we will move all files which we have to the backend folder and create a new folder called frontend. As a result our app source code will look like this:

Screenshot 2021-05-09 at 07.37.39.png


Now let’s see how our frontend folder looks like:

Screenshot 2021-05-09 at 07.39.25.png

Let’s start to explore the files.


This file contains typescript, astlaskit, react, eslint and webpack dependencies for our project.

  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@atlaskit/section-message": "^5.2.0",
    "@atlaskit/page": "^12.0.6",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-scripts": "4.0.3",
    "webpack": "^4.44.2",
    "styled-components": "^3.2.6"
  "scripts": {
    "build": "webpack --mode production",
    "prodbuild": "webpack --mode production --no-watch",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src/** --fix"
  "eslintConfig": {
    "extends": "react-app"
  "browserslist": {
    "production": [
      "not dead",
      "not op_mini all"
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/preset-env": "^7.14.1",
    "@babel/preset-flow": "^7.13.13",
    "@babel/preset-react": "^7.13.13",
    "@babel/preset-typescript": "^7.13.0",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^13.1.8",
    "@types/react": "^17.0.5",
    "@types/react-dom": "^17.0.3",
    "babel-loader": "^8.2.2",
    "eslint": "^7.26.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "@typescript-eslint/eslint-plugin": "^4.22.1",
    "@typescript-eslint/parser": "^4.22.1",
    "fibers": "^5.0.0",
    "node-sass": "^6.0.0",
    "sass": "^1.32.12",
    "ts-loader": "^8.2.0",
    "typescript": "^4.2.4",
    "webpack-cli": "^4.7.0"
  "optionalDependencies": {
    "fsevents": "^2.3.2"


This file contains settings for Babel which is a javascript compiler. Babel will compile our code in typescript, jsx to js code.

  "presets": ["@babel/preset-env",
  "plugins": [



This file contains settings from Webpack. Webpack will bundle all files created by babel to a bundle file which we will add to our Handlebar template on the backend.

var path = require('path');

module.exports = {
    module: {
      rules: [
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ["babel-loader"],
          test: /\.(ts|tsx)$/,
          exclude: /node_modules/,
          use: ["ts-loader"],
    watch: (process.argv.indexOf('--no-watch') > -1) ? false : true,
    entry: {
       '': path.resolve('./src/ExamplePage.tsx'),
    output: {
        filename: 'bundled.[name].js',
        path: path.resolve("../backend/public/dist")

As you can see we use ts-loader to convert typescript files to js. Then we store the js bundle in the ../backend/public/dist folder and name the file as


This file contains settings for Eslint. Eslint statically analyzes our code and outputs problems which were found.

    "env": {
        "browser": true,
        "es2021": true
    "extends": [
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        "ecmaVersion": 12,
        "sourceType": "module"
    "plugins": [
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
        "no-use-before-define": "off",
        "react/prop-types": "off",
        "no-shadow": "off",
        "no-nested-ternary": "off",
        "react/no-unescaped-entities": "off",
        "prefer-destructuring": ["error", {"object": true, "array": false}],
        "no-param-reassign": "off"

As you can see I added a typescript parser and a typescript plugin which will let eslint to analyze typescript code.


This file contains settings for analyzing typescript

    "compilerOptions": {
        "target": "es5",
        "lib": [
        "noImplicitAny": true,
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": false,
        "jsx": "react-jsx",
        "strictNullChecks": false
    "include": [

That is all for configuration files. Now let’s have a look at the code for our page.


import React, { useState, useLayoutEffect } from 'react';
import ReactDOM from 'react-dom';
import SectionMessage from '@atlaskit/section-message';
import Page, { Grid, GridColumn } from '@atlaskit/page';
import styled from 'styled-components';

const ContainerWrapper = styled.div`
  min-width: 780px;
  max-width: 780px;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: block;

interface IProps {
  displayName: string
  repoPath: string
declare let AP: any;

export default function ExamplePage(Props: IProps) {
  const { displayName, repoPath } = Props;
  const [apDisplayName, setApDisplayName] = useState('');
  useLayoutEffect(() => {
    AP.require('request', (request: any) => {
        url: '/2.0/user/',
        success(data: any) {
  return (
        title="Repository Information"
            <GridColumn medium={7}>Add-on user (retrieved via server-to-server REST):</GridColumn>
            <GridColumn medium={5}><b>{displayName}</b></GridColumn>
            <GridColumn medium={7}>Your name (retrieved via AP.request()):</GridColumn>
            <GridColumn medium={5}><b>{apDisplayName}</b></GridColumn>
            <GridColumn medium={7}>This repository:</GridColumn>
            <GridColumn medium={5}><b>{repoPath}</b></GridColumn>
            <GridColumn medium={7}>Page visits:</GridColumn>
            <GridColumn medium={5}><b>No longer supported</b></GridColumn>

window.addEventListener('load', () => {
  const wrapper = document.getElementById('container');
  const displayName = (document.getElementById('displayName') as HTMLInputElement).value;
  const repoPath = (document.getElementById('repoPath') as HTMLInputElement).value;

This file is straightforward. First, I read parameters provided in the backend/views/connect-example.hbs file in the hidden field group. And call the ExamplePage function to show the desired output.

In the ExamplePage function I query the 2.0/user endpoint to get the username of the current user and save the value in the apDisplayName state variable.

Then I provide html output using Page formatting.


In the backend I changed the backend/views/layout.hbs file. I deleted calls to backend/public/js/addon.js and backend/public/css/addon.css and changed backend/views/connect-example.hbs to this one:

{{!< layout}}
<script type="text/javascript" src="/dist/"></script>
<div id="maincontainer">
    <div id="container" />
<div class="field-group hidden">
    <input class="text" type="text" id="displayName" name="displayName" value="{{displayName}}">
    <input class="text" type="text" id="repoPath" name="repoPath" value="{{repoPath}}">

As you can see I call backend/public/dist/ to output our React code, create the container for React code and create a hidden div to store parameters which I get from Handlebars.

That is all. Now if I run my app I will get the desired output:

Screenshot 2021-05-09 at 07.32.23.png

By the way you can notice that Add-on user (retrieved via server-to-server REST) is different with the Your name (retrieved via AP.request()). If we explore the code we will see that AP.request() calls the /2.0/user endpoint and the backend calls the /2.0/user endpoint but the output is different. It happens because I installed our app under a team’s workspace that is why when I call /2.0/user in the backend I get the username of the workspace, but when I call /2.0/user in the frontend with AP.request() I get the username of the current user, not the workspace.

That is all for the article. See you next time.



Log in or Sign up to comment
G subramanyam
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
June 2, 2021

Good information and what's more interesting is the screenshots with navigation, thank you @Alexey Matveev 

M Amine
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
June 4, 2021

Great article it's very interesting, thank you @Alexey Matveev 

AUG Leaders

Atlassian Community Events