Skip to main content
Version: Current

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 '@genesislcap/web-core';
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 '@genesislcap/web-core';
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, GenesisElement} from '@genesislcap/web-core';
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 GenesisElement {
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.