Docs

Docs

Configuring a Fusion Application

You may need to customize the configuration of a Fusion application both for your development environment and execution.

Prerequisites

Fusion applications have the following prerequisites. To write the bootstrapping code for an application or create views in TypeScript, make sure that:

  • Client-side bootstrapping is enabled.

  • The index.html page template and the index.ts entry point exist in the frontend/ folder.

If you are starting with a starter application, they should already have been taken care of.

After that, any .ts file imported from index.ts (statically or dynamically) is going to be built as a part of the application.

Hot Reload in Development Mode

When running the application in development mode, all modifications in frontend folder are compiled automatically. Refreshing the browser is enough to see the updates in the application.

Note
Server restart is required
When adding index.ts or index.html, the application server needs to be restarted to update the entry point and the bootstrap template.

Configuring the TypeScript Compiler

TypeScript compiler requires a tsconfig.json file, vaadin-maven-plugin generates one in case there is no tsconfig.json in the project root. The default configuration looks similar to the following:

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true,
    "module": "esNext",
    "target": "es2017",
    "moduleResolution": "node",
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "baseUrl": "frontend",
    "paths": {
      "Frontend/*": [
        "*"
      ]
    }
  },
  "include": [
    "frontend/**/*.ts",
    "frontend/index.js",
    "types.d.ts"
  ],
  "exclude": []
}

Updated 2021-08-19