Blazor - Publishing A Component To NuGet Gallery

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 the 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's 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.

Package

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 the 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 in the "\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.

Login to your nuget.org account.
Click on your username at the top right corner and select API Keys.
Click on Create. A form will open asking you to provide some values.
Put in the key name. It can be any name of your choice.
Under Select Scopes, select Push.
Under Glob pattern put in *
Click on the Create button.

Refer to the image below.

CreateKey

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.

NuGet package

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 the command prompt or PowerShell window. Run the following command to publish the package:

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 in 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 the NuGet gallery at https://www.nuget.org/packages/BlazorGrid/.

Troubleshooting publishing errors

If you face issues during package push and get errors in the console, try the following troubleshooting methods.

Verify that your API key is correct. If you are unable to use an existing key, create a new one and try again.
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.

Install-Package BlazorGrid

After you have installed the package, add the following line in the "_ViewImports.cshtml" file.

@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.

<BlazorGrid Items="objectList" PageSize="a positive integer">
    <GridHeader>
        <th>header 1</th>
        <th>header 2</th>
    </GridHeader>
    <GridRow>
        <td>@context.objProperty1</td>
        <td>@context.objProperty2</td>
    </GridRow>
</BlazorGrid>

We need to provide the object list and the page size for the grid. The header for the grid should be specified in the <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 the Blazor framework.

Conclusion

We learned how to create and publish a reusable Blazor component as a 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