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 {
    ${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'},
        );
        ...
    }
}

Final result

At this stage, you have a simple page.