DEV Community

Cover image for Using Fast Components in an Enhance App
Simon MacDonald for Begin

Posted on • Originally published at blog.begin.com

2

Using Fast Components in an Enhance App

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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()
    );
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more