Integration with TypeScript

This tutorial will help you integrate Flexmonster with TypeScript.

Prerequisites

• Node.js
• Flexmonster CLI
  Install it with the following command:

  npm install -g flexmonster-cli

Run the sample project from GitHub

Download the sample project with the flexmonster create command. You can choose a TypeScript or TypeScript + webpack project:

flexmonster create typescript webpack -r

flexmonster create typescript -r

npx tsc

Integrate Flexmonster into a TypeScript application

Step 1. For integration with TypeScript, we will need Flexmonster type definitions, which can be found in the flexmonster npm package. Download the package by running the following command inside your project:

flexmonster add js-flexmonster

The command downloads flexmonster to the node_modules/ folder and adds it as an npm dependency to the package.json file.

Step 2. Add Flexmonster to the types array in the tsconfig.json file:

{
  "compilerOptions": {
    "types": ["flexmonster"],
    // ...
  },
  // ...
}

Step 3. Follow the steps from the Embed Flexmonster section to add Flexmonster to your project. Note that you need instructions from the Flexmonster CLI or npm tab. 

Step 4. Run your project to see the result.

Example

Here is an example of how Flexmonster integration with TypeScript can be done when the Vite bundler is used:

<!DOCTYPE html>
<html>
  <body>
    <!-- Create a div container to insert the component -->
    <div id="pivotContainer"></div>

    <!-- Include main.ts -->
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

import Flexmonster from "flexmonster";
import "flexmonster/flexmonster.min.css";

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true
});

{
  "compilerOptions": {
    "types": ["flexmonster"],
    // Other configs
  },
  // ...
}

Troubleshooting

If you run into any issues during the integration, visit our troubleshooting page. 

Next steps

• Connect to your data source
• Configure Flexmonster
• Update Flexmonster
• Customize Flexmonster