(Some context: Blazor is an experimental .NET web framework using C# and HTML in the browser. See the preview documentation for more details on the project and how to get started.)
As developers, we often take advantage of the benefits of sharing common code in a specific project. That way, it can be shared and maintained in a centralized way - accessed easily whether it is your team’s source control repository or, in the .NET world, a NuGet package.
This is no different with Blazor. When we use shared libraries, we can easily share components across projects. When we share components, all our target project needs to do is reference the shared project and add the component - no style imports necesssary!
In this article, we will demonstrate the power of Blazor shared libraries using a simple example with the default scaffolded Blazor application.
Before getting started, make sure you have the following minimum prerequisites installed:
- .NET Core 2.1 SDK, 2.1.402 or later
- Visual Studio 2017 15.8 or later, with the ASP.NET and web development workload
- The Blazor Language Services Extension for Visual Studio
- The Blazor templates from the command line by running
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
Create a Blazor application
Let’s create a Blazor application.
- From Visual Studio 2017, click File > New > Project and select the Visual C# > .NET Core > ASP.NET Core Web Application.
- Give it a name, like MySharedLibDemo, and click OK.
- Select the Blazor template and click OK. This will scaffold a default SPA application that is integrated with WebAssembly.
- After the scaffolding completes, click Debug > Start Without Debugging to run the application. Leave this running so we can save the application in Visual Studio and reload it. Next, we’ll add a shared Blazor library. At this time, a Blazor shared library is not available in Visual Studio. We’ll use the .NET Core command-line interface (CLI) to accomplish this.
- Right-click the solution and select Open Command Line. From your preferred command line utility, enter
dotnet newto see all the .NET Core templates available to you. We will be adding the Blazor Library template to our project.
- From your prompt, enter
dotnet new blazorlib -o MySharedBlazorLibrary. This will add the
MySharedBlazorLibraryproject in your directory.
- Right-click your solution and click Add > Existing Project. Browse to your library, select the MySharedBlazorLibrary.csproj file, and click Open. Your project structure will now resemble the following.
- Finally, reference the shared project. From your main project, right-click Dependencies > Add Reference… Then, select your newly created project and click OK.
Update the ViewImports.cshtml file
For Blazor to use your shared project, add the following line to the
_ViewImports.cshtml file that sits at the root of your main project.
@addTagHelper *, MySharedBlazorLibrary
This is a temporary solution. The Blazor team hopes to have this resolved. Until then, this is a required step.
Add shared component to your main project
Now, all you need to do is add the component to your project. If you remember, the shared project includes a
Component1.cshtml file that includes a styled component. We will now add this to our main project.
Pages/Index.cshtml file, below the
SurveyPrompt component, add the
Component1 component. As you begin typing, you can use IntelliSense.
Index.cshtml component should now look like this:
@page "/" <h1>Hello, world!</h1> Welcome to your new app. <SurveyPrompt Title="How is Blazor working for you?" /> <Component1 />
Notice you don’t even need a
@using statement in your view to reference your component!
View your changes
After you save your changes, reload the page to see your new component in action.
You have just referenced a component from a shared library with minimal effort. By merely importing the library, you were able to add a component and its styles quite easily.