Publishing A Blazor Component To Nuget Gallery

Introduction

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.

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 BlazorGrid – 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 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 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.

Creating 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 package will be in 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 user name 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 Create button.

Refer to the image below:

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:

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 obtained 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:

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 publish 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 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 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 same version number.

Installing and using BlazorGrid

To install the package in your Blazor project, run the following command in package manger 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 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 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 troubleshoot few common push errors for nuget packages. The BlazorGrid can be used to display a set of data in grid and has support for client-side pagination. We learned how to install and use BlazorGrid in a Blazor project.

Get my book Blazor Quick Start Guide to learn more about Blazor.

You can also read this article at C# Corner.

See Also

• Understanding Server-side Blazor
• Single Page Application Using Server-Side Blazor
• Deploying A Blazor Application On Azure
• CRUD Using Blazor with MongoDB
• Understanding Angular 6 Animations
• ASP.NET Core – Expense Manager Using EF Core and Highcharts