Component Libraries

In this section of the video, I want to look at component libraries. Component libraries are a great way to distribute or use your components. And as the name suggests, these are just library projects, which can be referenced in other Blazor projects. You can even convert that into a NuGet package and share your component with the world.

To create a component library, right-click your solution and add a new Razor Class Library project. And then think of a nice name of your library. I’m actually going to take the default, and I’m going to click Create. On the next screen, just click Create. The project by the template will create a simple component called Component 1. And let’s try to use this component.

Let’s add it to our index. Below Cats, I want to add Component 1. Now, to actually use a component from a component library, you should first add a reference to that component library. So select your component library, and click OK.

Now, how can you reference a component from that component library? First of all, I can use a fully qualified name. My library is called Razor Class Library Component 1. Or, you can add a using to an imports file. And in here, you add the namespace of your component library. In this case, it’s called Razor Class Library. And then in your Index component, you should normally be able to use your component as any other component.

Let’s run the application and see what we’ll get. Here we have our component library, but it doesn’t look right. There seems to be some styling, which is missing. Let’s look at the component library. And as you can see, in wwwroot, you have a styles file. And their styles file is being used by my component. So how do I add it so my Blazor application will be using that styling?

What you need to do is, you need to add this styling to the HTML file. Now, in this Blazor project, this HTML file will actually be rendered by the hosts.shtml file. So what we need to do is, we need to add the style of our component library in here, which is easily done, because in Visual Studio, I can drag and drop the style file in here.

Now, I do want you to look very carefully at this link. If you want to use content from libraries, you have to use this _content syntax. Then you specify the name of your class library, and then you specify the name of the static resource from that library. In the library itself, you can put your static resources in root.

Let’s run again. Now the component looks as expected. Let’s try to move our Cat components into the component library. Drag the Photo component from the Blazor project into your library project, and then remove it from your original project. Now we’re going to do the same thing with the CatPhotos component. So we drag the CatPhotos component, and then we remove it from the original one.

Will this still work? Let’s build. It builds. Let’s run. And it still worked. But we need to be careful here. We’ve been moving some of the components, but don’t forget that our Photo component uses a couple of styles. Now, where are these styles? They’re currently still left behind in our Blazer project. Let’s look in the Blazor projects for where these styles are. And let’s remove those two.

So here I have the photo-outer-edge and photo-inner-edge style. Let’s remove that. Let’s paste it into the styles from our library project. Will this still work? Well, yes it will, because we already have imported the namespace of our project. We also have already imported the styles file from our project.

But there’s yet another thing we need to do. Our CatPhotos component references a couple of images. Now, if you want to move these images into the library project so people can then just use the CatPhoto component, we still have some work to do.

So what I’m going to do is, I’m going to take these images, and I’m going to move them into my library project. And just to make sure that we did everything correctly, I am going to remove them from the original project.

Now, if you’re going to run, you will see that we’re going to have a problem. It cannot find our photo. And that’s because we need to change the path. Note again, this URL now needs to point into a static file resource from our class library.

How can I do that? Well, first of, all you have to make sure that the path that you’re going to be using starts with _content, then contains the name of your library project. So this is Razor Class Library 1. And I’m going to refer to the rest. So the path is Images/cat1. I’m going to copy this for the other URLS. So it’s fairly straightforward. You just need to know the right path. Let’s try again. Now it’s working again.

Now, let’s make double sure that things are working the way I expect. Let’s look at the network. Let’s see which image is going to download. And if I look at cat1, you see the path is actually pointing to my library project.

In this section of video, we have seen that we can move our components into a component library, and that we can then more easily reuse these components in several Blazor projects.