Blazor - Publishing A Component To NuGet Gallery

In this article, we will learn how to publish a reusable Blazor component to nuget gallery. We will use Visual Studio 2017 to build and create the nuget package.

Introduction

 
In this article, we will learn how to publish a reusable Blazor component to the NuGet gallery. We will use Visual Studio 2017 to build and create the NuGet package.
 

Prerequisites 

  • Install the .NET Core 2.1 or above SDK from here.
  • Install Visual Studio 2017 v15.7 or above from here.
  • Install ASP.NET Core Blazor Language Services extension from here.
  • A NuGet account. Create your free account on nuget.org here
Please refer to my previous article Creating A Reusable Grid Component For Blazor to create the BlazorGrid component, which we will publish in this tutorial.
 

Source Code

 
Get the source code for BlazorGrid at GitHub.
 

Configuring Project Properties

 
Before packaging the component as a NuGet package, we need to specify certain information as the metadata for the component.
Right-click on BlazorGridComponent project >> select Properties. It will open a property window for the project. Select Package from the left side menu and furnish the details as explained below.
 
Required fields
  • Package id: Give a unique name to your package. This is a case-insensitive field. It follows the .NET namespace naming conventions and does not allow spaces. This name is the unique identifier for your package at nuget.org.
  • Package version: Provide the version for the initial release of the package. You must update the version whenever you republish your package.
  • Authors: Provide the author name. If there are multiple authors, provide a comma-separated list.
  • Description: Provide a description for your package. What the package is about, what it does and any other relevant details.
Optional fields
  • Company: Provide your organization name.
  • Product: Provide a name for your product.
  • Copyright: Put in the copyright info here.
  • License URL: Path to the license file. Here, we have provided a path to an open source MIT license file that is bundled in the package itself.
  • Project URL: URL of the site related to this package. It can be any URL such as your company home page URL, GitHub URL etc.
  • Icon URL: URL to the image that can be displayed as the icon of the package. The allowed size is 64×64.
  • Repository URL: If it is a public repository, provide the URL here.
  • Repository type: The type of repository we are using.
  • Tags: Provide relevant tags for the package. It will help users find your package on nuget.org.
  • Release notes: It contains the update provided in the current release of the package.
Refer to the image below for a better understanding.
 
Publish Blazor component to Nuget 
 

Creating a NuGet package

 
Once you have configured the project properties, change the project configuration from Debug to Release. Rebuild the application to update the DLL files.
 
Right-click on BlazorGridComponent project >> select Pack. It will generate a NuGet package file with extension .nupkg. The name of the package will be in the format of "Package id.Package version.nupkg". Hence, in this case, the name is BlazorGrid.1.0.0.nupkg. This file will be located at "\BlazorGridComponent\bin\Release" folder.
 
The next step is to publish the package to nuget.org. We need to have an API key to publish our package.
 

Generate API Key for Nuget

 
We need a NuGet API key in order to push a package to nuget.org.
To generate the API key follow the steps mentioned below:
  1. Login to your nuget.org account.
  2. Click on your username at top right corner and select API Keys.
  3. Click on create. A form will open asking you to provide some values.
  4. Put in the key name. It can be any name of your choice.
  5. Under Select Scopes, select Push.
  6. Under Glob pattern put in *
  7. Click on the Create button.
Refer to the image below.
 
Publish Blazor component to Nuget 
 
It will create your new API Key. This key is required to publish the NuGet package. Copy the key using the Copy button at the bottom. Refer to the image below.
 
Publish Blazor component to Nuget 
 
Important Note
Make sure to copy your new API key at this point using the Copy button. You won’t be able to copy the key once you leave this web page.
 

Publishing the package

 
Once you obtain the API key, navigate to the folder where the .nupkg file is located which is "\BlazorGridComponent\bin\Release" in this case. Open command prompt or PowerShell window. Run the following command to publish the package:
  1. nuget push BlazorGrid.1.0.0.nupkg oy2klaw3g67amlbxp3qwkzr4exypy3bhxy6w6x6 -Source https://api.nuget.org/v3/index.json  
This command takes the package name and the API key value as input and publishes the package to nuget.org. Make sure to put in your own package name and API key value before executing this command. If the package is pushed successfully, you will get a success message on the window.
 
Nuget.org will take a few minutes to validate the package. Upon successful validation, the package will be indexed on the website and you will receive an email confirmation about the same. You can find all your NuGet packages in the Manage packages section under your account name at nuget.org.
 
The BlazorGrid component that we have published here is available on NuGet gallery at https://www.nuget.org/packages/BlazorGrid/.
 

Troubleshooting publishing errors

 
If you face issues during package push and get errors in console, try the following troubleshooting methods
  1. Verify that your API key is correct. If you are unable to use an existing key, create a new one and try again.
  2. If you are republishing the package, make sure to update the version number. Nuget does not allow publishing a package with the same version number.

Installing and using BlazorGrid

 
To install the package in your Blazor project, run the following command in the package manager console.
  1. Install-Package BlazorGrid  
After you have installed the package, add the following line in the "_ViewImports.cshtml" file.
  1. @addTagHelper *,BlazorGridComponent  
This will allow us to use the BlazorGrid package in our Blazor project. The <BlazorGrid> component accepts the following parameters:
  • Items : The list of items supplied to the BlazorGrid.
  • PageSize : Size of each page of BlazorGrid. This is a required field.
  • GridHeader : Header for BlazorGrid.
  • GridRow : Rows for BlazorGrid.
The syntax for BlazorGrid is shown below:
  1. <BlazorGrid Items="objectList" PageSize="a positive integer">  
  2.     <GridHeader>  
  3.         <th>header 1</th>  
  4.         <th>header 2</th>  
  5.     </GridHeader>  
  6.     <GridRow>  
  7.         <td>@context.objProperty1</td>  
  8.         <td>@context.objProperty2</td>  
  9.     </GridRow>  
  10. </BlazorGrid>  
We need to provide the object list and the page size for the grid. The header for grid should be specified in <GridHeader> parameter. We will use <GridRow> to specify the row items for the grid. For passing the values to <GridRow>, we will use the implicit parameter “context”, provided by Blazor framework.
 

Conclusion

 
We learned how to create and publish a reusable Blazor component as NuGet package. We also troubleshot a few common push errors for NuGet packages. The BlazorGrid can be used to display a set of data in the grid and has support for client-side pagination. We learned how to install and use BlazorGrid in a Blazor project. 
 

See Also