Skip to main content
Version: 2023.1

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.

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 {

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';

export class TestPage extends FASTElement {
public 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() {
{path: 'test-page', element: TestPage, title: 'Test Page', name: 'test'},

Final result

At this stage, you have a simple page.