Skip to main content
Version: Current

Front-end basics - add a new page

The Genesis platform provides a design system called Foundation UI, which gives you two mechanisms for creating front-ends at speed:

  • Genesis components (also known as custom elements) provide essential elements that enable you to build clear and usable interfaces quickly, from buttons and toolbars to grids and charts. These are all web-component-based, so they work with or without your favourite framework.

  • Micro front-ends provide pre-built displays with multiple elements to enable you to build user interfaces for common requirements very quickly. These include User Management and Profile Management.

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.

  2. Create a new appropriately named directory.

In the new directory, create three new files:

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

You can see this in action in our Developer Training. We strongly recommend that you work through this training from the beginning to get a feel for developing a Genesis application from start to finish.

Configuring package.json

A package.json file is auto-generated for you if you created your project using genx.

At the top, you'll find the name and description of your application.

Following this, there are three key sections that you should check and configure as you see fit:

  • config
  • scripts
  • dependencies