Overview #

Understanding the Pragma Engine Portal #

Pragma Engine’s Portal provides a web portal for convenient access to a broad slice of administrative functions. For live games, the portal is a powerful tool for player support and administrative tasks. You can view and change account data such as inventory, purchases, matchmaking information, or game statistics. The portal also provides facilities for running live service games, such as game server management or limiting access to your game for alpha or beta testing. For developers, the portal provides a faster and easier alternative for accessing player data than issuing service calls viewing the database directly.

As a web app, Portal is a plain Vue.js app implemented using components from the Ant.d library (V3).

These dependencies are vendorized and globally available in the code as Vue, VueRouter, antd. The ant.d components are also available directly in the vue templates using the <a- prefix.

In development and test, the app is generated by default under build/dev and build/test, with unminified files and almost the same structure as the src folder to make debugging easy.

For production, esbuild is used to create a compact, minified bundle in build/prod.

These build paths can be configured as described in Portal Configuration.

Portal Testing #

Tests are run using:

All dependencies are globally available, so instead of import { mount } from '@vue/test-utils', we write const { mount } = VueTestUtils or call mount directly: VueTestUtils.mount:

import ListGroupsTable from "./ListGroupsTable.vue.js";
import { mockedPlayerGroups } from "../../../../../core/api/mock.js";

describe("ListGroupsTable", () => {
  let wrapper;
  beforeEach(() => {
    wrapper = VueTestUtils.mount(ListGroupsTable, {
      props: {
        groups: mockedPlayerGroups,
      },
    });
  });

  it("renders without crashing", () => {
    expect(wrapper.text()).toContain("Name");
    expect(wrapper.text()).toContain(mockedPlayerGroups[0].name);
  });
});

Customizing with Portlets #

You can extend and customize Portal using custom services called portlets.

Portlets and pages are generated using the generatePortlet helper and a simple API. This allows automated handling of URL routes and dynamic generation of layout section like navigation, headers, and breadcrumbs.

For more information about using portlets to customize Portal, visit Customizing Portal.

  • Vue Inline Template. Syntax highlighting for Vue inline templates inside of JavaScript and TypeScript tagged template strings.

  • Prettier code formatter.

    • Use this with caution. The formatter only works well if the root of the project opened in VSCode is the platform/web/portal folder. Otherwise, the .prettierignore file does not work well and unwanted files will be formatted on save.
    • In order for this to work, formatOnSave needs to be activated in VS Code Settings, and the Prettier extension needs to be selected as the default formatter.
Operability
Getting Started with Portal