Skip to main content

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 VertiGIS Studio 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

Get Started

Create a Service that Manages Dynamic Data

Follow along with a more in depth service example

Get Started