Create a Service

Creating a new custom service involves a few important steps:

  1. Create the service source file
  2. Register the service in your library registration file

Create the Service#

Create the service source file in a new folder within the src/services folder. For example to create a new service called ExampleService, create a new file called ExampleService.ts in src/services/ExampleService with the following content:

src/services/ExampleService.ts
import { ServiceBase } from "@vertigis/web/services";
export default class ExampleService extends ServiceBase {}

If you want your service to be able to serialize and deserialize configuration specific to the service from app.json, you can extend from ConfigurableServiceBase instead:

src/services/ExampleService.ts
import { ServiceModelProperties } from "@vertigis/web/models";
import { ConfigurableServiceBase, serializable } from "@vertigis/web/services";
interface ExampleModelProperties extends ServiceModelProperties {
exampleProperty: string;
}
@serializable
export default class ExampleService extends ConfigurableServiceBase<ExampleModelProperties> {
exampleProperty: string;
}

Register the Service#

Finally we need to register the service with the Geocortex Web service registry so that it is aware of your new service.

To simplify the module imports, we'll make a new file in the ExampleService folder called index.ts. Note that this file is for convenience, and is not required:

src/services/ExampleService/index.ts
export { default } from "./ExampleService";

Now register your service with the service registry by modifying the src/index.ts file:

src/index.ts
import { LibraryRegistry } from "@vertigis/web/config";
import ExampleService from "./services/ExampleService";
export default function (registry: LibraryRegistry) {
// ... other item registrations
registry.registerService({
id: "example",
getService: (config) => new ExampleService(config),
// Use this setting if you want your service to load on
// application startup. Defaults to `false`.
loadOnStartup: true,
});
}

Next Steps#

Deploy your Service

Learn how to deploy your custom service

Create a Service that Manages Dynamic Data

Follow along with a more in depth service example