Unlisted page
This page is unlisted. Search engines will not index it, and only users having a direct link can access it.

Target multiple Extend apps in one App UI

Last updated on April 21, 2026

Overview​

info

Generate code from Extend app specs covers the single-service workflow: the react template, one swaggers.json entry, one generated client, and VITE_AB_EXTEND_APP_NAME set at runtime to route requests to the correct Extend app. This page requires that foundation — read it first.

When you need a single App UI to interact with more than one Extend service, use the react-multiple-extend-apps template. It extends the codegen workflow covered in Generate code from Extend app specs to support multiple Swagger specs. Each Extend app gets its own generated client under a separate subdirectory, and no single VITE_AB_EXTEND_APP_NAME environment variable is needed because each generated client already has the correct service path baked in.

Prerequisites​

All prerequisites from Extend App UI apply here. In addition, you need two or more deployed Extend Service Extension or Event Handler apps. Take note of each app's Service URL, which you'll find in the Admin Portal on each Extend app's detail page.

The examples on this page use two instances of the Extend Tournament System, so you'll see tournamentapi and secondtournamentapi throughout the template. Replace those with your own services' details as you follow along.

Quick start​

Scaffold the React multiple-extend-apps template, which comes with multi-target codegen already configured:

extend-helper-cli clone-template --scenario "Extend App UI" --template react-multiple-extend-apps -d react-multiple-extend-apps
cd react-multiple-extend-apps

This template extends the react template with a two-entry swaggers.json, an abcodegen.config.ts tuned for multi-service output, and a reference implementation showing two tournament services managed from a single UI.

Set your environment variables using the values from Prerequisites. The Extend Helper CLI reads from these, so export them once and every subsequent command just works:

export AB_BASE_URL='<YourAGSBaseURL>'
export AB_CLIENT_ID='<YourClientID>'
export AB_CLIENT_SECRET='<YourClientSecret>'
export AB_NAMESPACE='<YourGameNamespace>'
export AB_APPUI_NAME='<YourAppUIName>'

In the same terminal session, register the App UI, generate .env.local, and install dependencies:

extend-helper-cli appui create --namespace $AB_NAMESPACE --name $AB_APPUI_NAME
extend-helper-cli appui setup-env --namespace $AB_NAMESPACE --name $AB_APPUI_NAME
npm install

The setup-env command generates .env.local with authentication variables and VITE_AB_NAMESPACE pre-filled from your shell environment. In the multi-app template, VITE_SINGLE_EXTEND_APP_ONLY is not set: each generated client already includes its own service path from the Swagger spec, so no single VITE_AB_EXTEND_APP_NAME env var is needed.

In swaggers.json, replace each placeholder URL with the corresponding service's Swagger URL. Each entry maps to [serviceName, aliasName, swaggerFileOutput, swaggerURL]:

[
  ["tournamentapi", "tournamentapi", "tournament.json", "https://<YourFirstServiceURL>/apidocs/api.json"],
  ["secondtournamentapi", "secondtournamentapi", "secondtournament.json", "https://<YourSecondServiceURL>/apidocs/api.json"]
]
  • serviceName: the name used as the output subdirectory under src/codegen/ for generated files.
  • aliasName: must match serviceName. It is unused in this setup because shouldProduceIndexFiles is disabled.
  • swaggerFileOutput: the filename used to cache the downloaded spec locally under swaggers/.
  • swaggerURL: the Swagger v2 URL to fetch. For Extend apps, this is /apidocs/api.json under the service URL.

Then run codegen:

npm run codegen

This generates typed TypeScript files into src/codegen/tournamentapi/ and src/codegen/secondtournamentapi/. The react-multiple-extend-apps template outputs generated files under src/codegen/ with a subdirectory per module, keeping multiple generated clients isolated from one another.

Your generated clients are now ready. To start a local dev server with hot reload:

npm run dev

Open the URL shown in your terminal (typically http://localhost:5173). The reference implementation includes a nav bar with links to First tournament service and Second tournament service, each fetching data from a different Extend app instance. To deploy to AccelByte infrastructure, upload your App UI:

extend-helper-cli appui upload --namespace $AB_NAMESPACE --name $AB_APPUI_NAME

After the upload completes, go to the Admin Portal and navigate to Extend > My Extend Apps > App UI. Click Open UI on the app's table row. Anyone with access to your game namespace can see the App UI.

The react-multiple-extend-apps template App UI displayed in the AccelByte Gaming Services (AGS) Admin Portal

Codegen configuration​

abcodegen.config.ts in the multiple-extend-apps template ships with these defaults:

{
  // Skips generating index files. These are useful for npm libraries,
  // but unnecessary when the generated code is used locally.
  shouldProduceIndexFiles: false,

  // Splits generated output into a subdirectory per service name.
  // This is required when generating clients for multiple Extend apps
  // so that each service's types and query functions stay isolated.
  splitOutputByServiceName: true,

  // Overrides specific types that don't resolve cleanly in TypeScript.
  overrideAsAny: {
    ProtobufAny: true
  }
}

Two things differ from the single-app template. First, splitOutputByServiceName: true is required — without it, generated files from different services would collide in the same output directory. Second, basePath is not set to '' here. In the single-app template, basePath: '' strips the service path from the generated client so VITE_AB_EXTEND_APP_NAME can re-inject it at runtime. When targeting multiple apps, each client keeps its own basePath from the downloaded spec, so each client is already bound to its own service — no env var needed at runtime.

Next steps​

Last updated on
On this page