how-to-install-workbench.md

SCION Workbench	Projects Overview	Changelog	Contributing	Sponsoring

SCION Workbench > How To Guides > Installation

How to install the SCION Workbench

Follow these steps to install the SCION Workbench in an Angular application.

Install SCION Workbench from NPM

Run the following command to install the SCION Workbench and required dependencies.

npm install @scion/workbench @scion/workbench-client @scion/toolkit @scion/components @scion/microfrontend-platform @angular/cdk --save

Register SCION Workbench Providers

Open app.config.ts and register SCION Workbench providers.

import {ApplicationConfig} from '@angular/core';
import {provideRouter} from '@angular/router';
import {provideAnimations} from '@angular/platform-browser/animations';
import {provideWorkbench} from '@scion/workbench';

export const appConfig: ApplicationConfig = {
  providers: [
    provideWorkbench(),
    provideRouter([]), // required by the SCION Workbench
    provideAnimations(), // required by the SCION Workbench
  ],
};

If you are not using app.config.ts, register the SCION Workbench directly in main.ts.

import {bootstrapApplication} from '@angular/platform-browser';
import {provideRouter} from '@angular/router';
import {provideAnimations} from '@angular/platform-browser/animations';
import {provideWorkbench} from '@scion/workbench';

bootstrapApplication(AppComponent, {
  providers: [
    provideWorkbench(),
    provideRouter([]), // required by the SCION Workbench
    provideAnimations(), // required by the SCION Workbench
  ],
});

Insert workbench component

Open app.component.html and replace it with the following content:

<wb-workbench/>

The workbench itself does not position nor lay out the <wb-workbench> component. Depending on your requirements, you may want the workbench to fill the entire page viewport or only parts of it, for example, if you have a header, footer, or navigation panel.

For a quick start, position the workbench absolutely and align it with the page viewport. Open app.component.scss and replace it with the following content:

  wb-workbench {
    position: absolute;
    inset: 0;
  }

Add workbench styles

The workbench requires some styles to be imported into styles.scss, as follows:

@use '@scion/workbench';

Also, download the workbench icon font from GitHub, unzip the font files, and place the extracted files in the /public/fonts folder.

Deploying the application in a subdirectory requires the additional steps described here.

After completing the above steps, start your application by running ng serve. Open a browser at http://localhost:4200. You should see a blank page.

Continue with the guide How to define the initial workbench layout to define an initial layout for the workbench.