Show steps to start from scratch

[heruan]

First, thank you @marcushellberg for this great and inspiring demo!

Does this work out of the box just placing .ts files in /frontend?

Otherwise, could you please show here (or README) the steps to start a Vaadin + LitElement + TypeScript project from scratch?

For example, I know Vaadin plugin creates package.json and webpack.config.js itself, does this hold true for TypeScript support?

[heruan]

Also, I'd place my component sources in src/main/resources/META-INF/resources/frontend to be then included as a dependency on other apps. Do I need to adjust any setting for this to work?

For example, I have JAR project with:

@Tag("axians-app-layout")
@JsModule("./axians-app-layout/axians-app-layout.ts")
public class AppLayout extends Component implements HasComponents {
}

and the source at:

src/main/resources/META-INF/resources/frontend/axians-app-layout/axians-app-layout.ts

Then if I include this project as a dependency of a WAR and run that, I get:

  Failed to find the following imports in the `node_modules` tree:
      - @vaadin/flow-frontend/axians-app-layout/axians-app-layout.ts
  If the build fails, check that npm packages are installed.

  To fix the build remove `node_modules` directory to reset modules.
  In addition you may run `npm install` to fix `node_modules` tree structure.

[heruan]

Sharing some findings: seems not to be working out of the box. Requirements:

• manually add typescript and ts-loader as dev-dependencies in package.json
• in the generated webpack.config.js, replace this:

  
  module.exports = merge(flowDefaults, {

});

with this:
```js
module.exports = merge(flowDefaults, {
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  devtool: 'inline-source-map',
  module: {
    rules: [{
      // Include ts, tsx, js, and jsx files.
      test: /\.tsx?$/,
      exclude: /node_modules/,
      loader: 'ts-loader',
    }],
  }
});

Then, the plugin will be able to find and compile TypeScript sources of @JsModule-annotated components if they are placed in the app's root ./frontend directory.

I'm still not able to make this work when the module is inside a dependency's src/main/resources/META-INF/resource/frontend folder, despite what says the @JsModule JavaDoc:

The JavaScript module files should be located:

• inside frontend directory in your root project folder in case of WAR project
• inside META-INF/resources/frontend directory (inside a project resources folder) in case of JAR project (if you are using Maven this is src/main/resources/META-INF/resources/frontend directory).

Maybe I need to configure something else for this to work?

[marcushellberg]

Hi Giovanni.

You are right, I didn't do a good job explaining the steps needed. I wrote a quick blog post here, hopefully that helps. https://dev.to/marcushellberg/setting-up-typescript-support-in-vaadin-bf9

AFAIK, the default Vaadin webpack configuration only searches for files in the root frontend folder, whereas the META-INF/resource/ folder is just served as-is

[heruan]

Great article, thank you Marcus! All is much clearer now. I’m trying now to make it work for files in dependency JARs, so that I can share components between different apps. Any hint would be really appreciated!

[heruan]

AFAIK, the default Vaadin webpack configuration only searches for files in the root frontend folder, whereas the META-INF/resource/ folder is just served as-is

Wouldn't be possible to configure Webpack to look into dependencies too?