Publishing a Blazor Component to the NuGet Gallery
Learn how to share your awesome software development ninja skills with the world and publish to the NuGet gallery.
Join the DZone community and get the full member experience.Join For Free
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.
- 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.
- Create 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.
Get the source code for BlazorGrid at GitHub.
Configuring Project Properties
Before packaging the component as a NuGet package, we need to specify some 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:
- 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.
- 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 the 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 the 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
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 user name at 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:
This 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 the command prompt or the 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 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
- 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 two packages with the same version number.
Installing and Using BlazorGrid
To install the package in your Blazor project, run the following command in the package manger console:
After you have installed the package, add the following line in the
This will allow us to use the BlazorGrid package in our Blazor project.
<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 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 Blazor framework.
We learned how to create and publish a reusable Blazor component as nuget package. We also troubleshoot few common push errors for nuget packages. BlazorGrid can be used to display a set of data in grid and has support for client-side pagination.
Published at DZone with permission of Ankit Sharma, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.