Skip to main content
Version: 2022.4

Web Basics - Creating a new page

Broadly speaking, the process can be summarised as follows:

  • Create a new component for your new page.
  • Configure a new route to point to your new component.
  • Add a new button/link to the navigation bar for your new page.

Creating a new component

Each page is a component. So you need to create a new component to create a new page.

Before you start:

  1. Choose a name for the component. In this example, we'll go with TestPage.

  2. Create a new appropriately named directory, in this case: test-page.

Now create three new files under this new directory:

  • for the component itself: for example, /test-page/test-page.ts
  • for the layout: for example, /test-page/test-page.template.ts
  • for the styles/css: for example, /test-page/test-page.styles.ts

New components will typically extend FastElement.

Here is the file src/routes/test-page/test-page.styles.ts with some example styling content:

import {css} from '@microsoft/fast-element';
import {mixinScreen} from '../../styles';

export const TestPageStyles = css`
:host {
${mixinScreen('flex')}

align-items: center;
justify-content: center;
}
`;

Here is an example of the file src/routes/test-page/test-page.template.ts with some standard content:

import {html} from '@microsoft/fast-element';
import type {TestPage} from './test-page';

export const TestPageTemplate = html<TestPage>`
<h1>Hello from Test Page</h1>
`;

Here is an example of the file src/routes/test-page/test-page.ts with some standard content, which imports the template and the styling from the other two files:

import {customElement, FASTElement} from '@microsoft/fast-element';
import {TestPageTemplate as template} from './test-page.template';
import {TestPageStyles as styles} from './test-page.styles';
import {logger} from '../../utils';

const name = 'test-page';

@customElement({
name,
template,
styles,
})
export class TestPage extends FASTElement {
public connectedCallback() {
super.connectedCallback();
logger.debug(`${name} is now connected to the DOM`);
}
}

Configuring a new route to point to your new component

Add a new mapping to our router's configuration to the file src/routes/config.ts, which has already been generated by the CLI process.

export class MainRouterConfig extends RouterConfiguration<RouteSettings> {
...
public configure() {
...
this.routes.map(
...,
{path: 'test-page', element: TestPage, title: 'Test Page', name: 'test'},
);
...
}
}

Adding a new navigation item

Add a new fast-option to the existing fast-listbox of our nav template in src/routes/.layouts/nav/nav.template.ts. This file was generated by the CLI process.

Here we add a button called Test Page.

<fast-option value="4" @click=${x => x.navigateTo('test-page')}>
<zero-icon variant="solid" name="toolbox"></zero-icon> Test Page
</fast-option>

Final result

At this stage, you have a simple page.