Using Fast Components in an Enhance App

Original photo by Marc-Olivier Jodoin on Unsplash

Fast is a library of web components and a framework for building web components from Microsoft. With minor configuration, you can use Fast components in your Enhance app.

Using the Fast component library in your Enhance app

Fast comes with a suite of pre-built components based on their design language that you can drop into your application. These components are beneficial for wireframing your application before you replace them with your own components.

Fast Components are a browser module. We’ll need to bundle in the dependency so it is available in the browser at run time.

First, we need to install @microsoft/fast-components by executing the command:

npm install @microsoft/fast-components

Then we need to create an entry point for Enhance to roll up the components and their dependencies to be used in the browser. Create a file called app/browser/fast.mjs and populate it with:

// app/browser/fast.mjs
import {
    allComponents,
    provideFASTDesignSystem
} from "@microsoft/fast-components"

provideFASTDesignSystem().register(allComponents)

If you want to make all of the Fast components available.

However, you can reduce the size of your script by specifying which components you will use from Fast. For example, if you only need the button component use:

// app/browser/fast.mjs
import {
    fastButton,
    provideFASTDesignSystem
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastButton()
    );

Now, all you need to do to use Fast components in an Enhance page is add a script tag to the rolled up code that Enhance creates for you.

<script src="/_public/pages/fast.mjs"></script>

Closing thoughts

What off-the-shelf components are important to you when you are building web applications? Let us know over on Discord or Mastodon.