Frontend
Pre-requisites
The following section assumes you have installed all the tools required for web development from our tools section.
Before you move on, it is also mandatory that you read through the key technology list in our web technologies section and you understand the justification for each one, especially if you're not familiar with the specific technology.
It is presumed that you already have a Web Base
prepared and ready for you install modlets, otherwise, please go to the
Web Framework quickstart section to initialize your
Web Base
.
It is also presumed that you are already familiar with running a local development environment, otherwise, please go to
the Local Dev Environment to prepare your machine for local
development. Using dev-containers
with RNR module enabled is recommended.
Installation Guide
1. Installing RNR package
The internal CLI tool
built by AOH will be used to install the rnr package. If you are using one of the latest versions of the Web base, the CLI tool is already part of the web base, and you can verify by checking if your package.json has the following:
"@mssfoobar/cli": "^1.0.3"
Do note that your CLI version may differ with the one above, as the one above is the latest version as of the time of writing this documentation.
The CLI tool only works if you did not remove the aoh folder within the src/lib folder in the original web base. This is because it will install the rnr package and duplicate them into the src/lib/aoh folder.
Run the following CLI command in the terminal inside your web directory.
npx cli install @mssfoobar/rnr-web
You will be prompted to enter the path to your root folder, although the tool will attempt to auto-generate that path for you. Do check if it is accurate. If not, please enter the correct path to your root folder.
Afterwards, simply click enter, and the tool will start to install the rnr package.
Once completed, you should see new files being generated in the src/lib/aoh/rnr
folder, as well as the routes/(private)/aoh/rnr
folder.
├── src/
│ └── lib/
│ │ └── aoh/
│ │ ├── core/
│ │ ... └── rnr/
│ │ ├── components/
│ │ ├── interfaces/
│ │ ├── stores/
│ │ └── constant.ts
2. Install devDependencies
Add these dependencies below into the devDependencies
object in your package.json
, and save the file.
"svelte-sonner": "^0.3.28",
"@iconify-json/lucide": "^1.2.26",
3. Install dependencies
Add the dependencies below into the dependencies
object in your package.json
, and save the file. Afterwards, run npm i
or npm install
to install.
"@mssfoobar/sse-client": "^1.1.1",
"iconify-icon": "^2.3.0",
4. Configuration
In the tailwind.config.ts file, add "material-symbols in the addIconSelectors plugin:
plugins: [addIconSelectors(["mdi", "mdi-light", "lucide"]),...],
Usage
Go to the +layout.svelte
file found in the (private) folder and import the component.
import { PlaybackContainer } from "$lib/aoh/rnr/components/PlaybackContainer/index.js";
Include the following code block below the initializeMenuStore(data);
line:
const baseSehUrl = env.PUBLIC_RTUS_SEH_URL;
const rnrEndpoint = env.PUBLIC_RNR_ENDPOINT;
const topicName = env.PUBLIC_TOPIC_NAME;
const systemTimeTopic = env.PUBLIC_SYSTEM_TIME_TOPIC_NAME;
const systemTimeTenantId = env.PUBLIC_SYSTEM_TIME_TENANT_ID;
Add the <PlaybackContainer>
component.
<AuthProvider claims={...}>
...
</AuthProvider>
<PlaybackContainer
{topicName}
{rnrEndpoint}
{baseSehUrl}
{systemTimeTopic}
{systemTimeTenantId}
tenantId={tenant?.tenant_id}
/>
Alternatively, if you need the page to forcibly re-mount when the session loads, wrap the <PlaybackContainer>
component outside the <AuthProvider>
component.
<PlaybackContainer
{topicName}
{rnrEndpoint}
{baseSehUrl}
{systemTimeTopic}
{systemTimeTenantId}
tenantId={tenant?.tenant_id}
/>
<AuthProvider claims={...}>
...
</AuthProvider>
</PlaybackContainer>