TypeScript Support
The Iframe Integration Client library itself is also written in TypeScript, therefore, typing information is bundled in the npm package.
For the sake of simplicity, the previous widget is created in this example using Parcel, but any popular bundler such as Webpack as used by Angular or the Create React App should be compatible.
The example project is available from the following location :https://github.com/intland/external-widget-typescript-example
 | Prerequisites: Node.js and npm must be installed. |
1. In the prepared directory, create a new package.json file as follows:
$ npm init
2. Install parcel, and the @intland/cb-widget-api - package as follows:
$ npm install parcel @intland/cb-widget-api --save
3. Create an index.ts script as shown in the following:
import {WidgetApi} from "@intland/cb-widget-api";
const api = new WidgetApi(window, 'widget-id', '*');
api.authenticate().then(response => response.token)
.then(token => fetch('http://localhost:8080/cb/api/v3/projects',{
headers: {
authorization: 'Bearer ' + token
}
}))
.then(response => response.json())
.then(projects => console.log(projects));
const api = new WidgetApi(window, 'widget-id', '*');
api.authenticate().then(response => response.token)
.then(token => fetch('http://localhost:8080/cb/api/v3/projects',{
headers: {
authorization: 'Bearer ' + token
}
}))
.then(response => response.json())
.then(projects => console.log(projects));
4. Create an index.html file to load the index.ts script as follows:
<!doctype html>
<html lang="en">
<body>
<script type="module" src="index.ts"></script>
</body>
</html>
<html lang="en">
<body>
<script type="module" src="index.ts"></script>
</body>
</html>
5. Run the $ npx parcel index.html to serve the application on localhost:1234
6. Optional: Serve extension.json using Parcel for development. To do this complete the following steps:
◦ Install $ npm install -D parcel-reporter-static-files-copy
◦ Create a .parcelrc file with the following configuration:
{
"extends": ["@parcel/config-default"],
"reporters":["...", "parcel-reporter-static-files-copy"]
}
◦ Put the extension.json file under a new ./static directory.
◦ The next time that $ npx parcel index.html is run, the widget configuration is available at the following location:http://localhost:1903/extension.json
7. After configuring this widget in Codebeamer, it behaves in the same way as in the simple example.