Forge UI Kit using Typescript

Forge Forge Platform and Tools
,
1

I want to create a Forge app with UI Kit(not Custom UI) and I want to use typescript.
I changed the file extensions from js to ts and from jsx to tsx. I added tsconfig.json. How to build and deploy the app?

2

Hey, as long as your dev dependencies are good (that is, typescript is in your dev dependencies object in package.json) and you’ve updated your filenames in the manifest.xml file, forge deploy should take care of creating the js/jsx files from the ts/tsx files and upload to Atlassian cloud.

Here’s the tsconfig.json file I’m using. I like this because forge deploy won’t let me upload until I meet all these linting requirements, which keeps me honest:

{
  "compilerOptions": {
    "module": "NodeNext",
    "target": "ESNext",
    "sourceMap": true,
    "moduleResolution": "nodenext",
    "esModuleInterop": true,
    "lib": ["dom", "dom.iterable", "ESNext"],
    "types": ["node", "react"],
    "baseUrl": "./",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "allowJs": true,
    "jsx": "react",

    /* Linting */
    "strict": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "exactOptionalPropertyTypes": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noPropertyAccessFromIndexSignature": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
  },
  "include": ["./src/**/*"]
}
1 Like
3

I recognized that source code is visible in UI Kit Typescript apps. I connected to Atlassian and they confirmed that there is no solution to this problem at the moment. They opened the below feature request.
https://jira.atlassian.com/browse/ECO-874

Until the issue is resolved, we will develop using Custom UI instead of UI Kit.

4

Does deployment with UI Kit work if you compile to JS with tsc and without sourcemap to an outDir, have your manifest in this outDir, then deploy to Forge?

5

I tried but it fails with the following error.

image
image2216×564 75.6 KB

6

Interesting. I think Forge expects to find a src/index.js file. You could try moving the Javascript contents of this dist folder into a src subfolder?

You might be able to set some options to tsc to make Forge happy but still not emit Documentation - tsc CLI Options This is wildly beyond my knowledge, but I think if you fiddle around with --outDir and --rootDir you might be able to compile Typescript to Javascript files in a forge deploy-compatible directory structure and not generate sourceMaps or bundle in the .ts files. Good luck, I’m interested to know how you go.