FAST works seamlessly with Blazor, including integration with Blazor's binding engine and components. Let's take a look at how to set things up.
Setting up the Blazor project
First, you'll need to make sure that you have the .NET SDK installed. You can learn more and download that on the official site.
With the SDK installed, you have access to the
dotnet command-line interface. This can be used to create a new Blazor project. For example, to create a new Blazor App named "fast-blazor", you would use the following command:
Create a project using the command above if you don't already have one. When the CLI completes, you should have a basic runnable Blazor application. For more information on setting up and using Blazor, see the official Blazor Getting Started guide.
Now that we've got our basic project setup, we need to add our web components script and update Blazor accordingly. You can either add the script from our CDN directly, or you can install it with NPM and then add that.
To add a CDN script for
fast-components use the following markup:
The best place to put this is typically in your
index.html file in the script section at the bottom of the
If you wish to leverage NPM instead, run the following command:
You can locate the single file script build in the following location:
Copy this to your
wwwroot/script folder and reference it with a script tag as described above.
Using the components
Regardless of which path you've chosen above, you should be all set to start using the components. The first component we want to set up is the
<fast-design-system-provider> component. This configures the design system that will govern the appearance of all of the components. The best place to put this is at the root of your app, wrapping all your HTML. Here's an example of what your
<body> might look like:
With this in place, you can use any component in any of your views. For example, you could put something like this in your
For a splash of style, add the following to your
Congratulations! You're now set up to use FAST with Blazor!