TypeScript Client Library

Vaadin consists of two parts: a backend and a client. The client part is represented by the @vaadin/flow-frontend/Connect library that is able to support the features the backend part provides. The library is part of @vaadin/flow-frontend.

One of the main public entities of the library is the ConnectClient object, that provides a seamless way to communicate with Vaadin endpoints on the backend.

Default TypeScript Client

The default TypeScript client is the module that gets generated by the Vaadin Maven plugin for a particular project.

The module contains the ConnectClient implementation that is set up to communicate with the backend side of the project.

Generated Client Modules

Along with the default TypeScript client, the Vaadin Maven plugin is capable of generating specific modules for each Vaadin endpoint defined in the backend part. Those modules use the default TypeScript client described above to communicate with the backend also.

Usage Example

Consider Vaadin backend that is started on /customEndpoint endpoint and has a single endpoint with name SingleEndpoint and a method customMethod requiring a number parameter to be specified.

To access this method from the client part, depending on how many generated files are present, you can use one of the approaches below. The required @vaadin/flow-frontend/Connect TypeScript library is automatically installed by the Vaadin Maven plugin.

Using the Generated Client Module

The endpoint method can be called via the generated module method:

import { SingleEndpoint } from 'Frontend/generated/SingleEndpoint';

(async() => {
  await SingleEndpoint.customMethod(4);
})();

Using the Generated Default Client

As an alternative to the generated modules, the default TypeScript client API can be used to access the Vaadin endpoint in the following way:

import client from 'Frontend/generated/connect-client.default';

(async() => {
  await client.call('SingleEndpoint', 'customMethod', {number: 4});
});

Using the Vaadin TypeScript Client library

Client library usage requires an extra step where we specify the endpoint of the server to send the requests to:

import { ConnectClient } from '@vaadin/flow-frontend';
const client = new ConnectClient({endpoint: '/customEndpoint'});

(async() => {
  await client.call('SingleEndpoint', 'customMethod', {number: 4});
});