Docs

Docs

TypeScript Client Library

Understanding the Hilla TypeScript client library, the default TypeScript client, and generated client modules.

Hilla consists of two parts: a backend and a client. The client part is represented by the @vaadin/hilla-frontend library, which is able to support the features the backend provides.

One of the main public entities of the library is the ConnectClient object, which provides a seamless way to communicate with browser-callable services on the backend.

Default TypeScript Client

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

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

Generated Client Modules

Along with the default TypeScript client, the Hilla Maven plugin is capable of generating specific modules for each browser-callable service defined in the backend. These modules also use the default TypeScript client described above to communicate with the backend.

Usage Example

Consider a Hilla backend that’s served under the /customEndpoint URL prefix and has a single browser-callable service named SingleService, with a method customMethod() that takes a parameter number.

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

Using the Generated Client Module

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

Source code
Using the generated module
import { SingleService } from 'Frontend/generated/SingleService';

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

Using the Generated Default Client

As an alternative to the generated module, the default TypeScript client API can be used to access the service as follows:

Source code
Using the generated client
import client from 'Frontend/generated/connect-client.default';

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

Using the Hilla TypeScript Client Library

Using the client library requires an extra step: specifying the URL prefix of the server to send the requests to.

Source code
Using the client library
import { ConnectClient } from '@vaadin/hilla-frontend';
const client = new ConnectClient({endpoint: '/customEndpoint'});

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

Updated –