Create a Nuget Package in Five Easy Steps

If you ever worked in Visual Studio and .Net, you must have known NuGet. It is a package manager that mainly deals with .Net packages and assemblies. It has one of the largest package repositories after npm. NuGet is supported out of the box in visual studio. By the time of writing this article it has 68,206 unique packages. Let’s make it 68,207 with our own package! We will create a Contact Form which can be added to any app just by drag and drop like a standard UWP control.

screenshot-377

1. Create a New Project

Create a Class Library project of the type you want your package to work with. For example if you want to create a package for .Net Core then choose Class Library project under .Net Core submenu. We will create a package for UWP Apps. So create a new project, search type Class Library in the search bar and select Class Library (Universal Windows).

screenshot-373

2. Add the Required Functionality

Add the required functionality in the form of classes. If you have worked on class libraries before then it is identical. A class library doesn’t have a starting point. The project consuming class library can use any public member inside the class library.

For this demo we will create a simple reusable Form as a UserControl. The form consists of text fields for name, email, topic, description and a button to submit the data. To keep it simple, we will only add one event and one property but you can add as many as you want.

Here is the code for our UserControl, in your newly created class library project, delete the empty class (class1.cs) which visual studio generated. Then add a new UserControl to the project with the name “ContactForm” (Project -> Add new item -> UserControl). Then create a Form in the way want. Here I have created a simple form.

<UserControl
    x:Class="NugetDemo.ContactForm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:NugetDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Padding="10" 
          HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <TextBlock Margin="4">Name:</TextBlock>
        <TextBox Text="{x:Bind FullName}" Grid.Column="1" 
                 Margin="4"></TextBox>

        <TextBlock Grid.Row="1" Margin="4">Email:</TextBlock>
        <TextBox Text="{x:Bind Email}"
                 Grid.Row="1" 
                 Grid.Column="1" 
                 Margin="4" 
                 HorizontalAlignment="Stretch"></TextBox>

        <TextBlock Grid.Row="2" HorizontalAlignment="Stretch" Margin="4">Topic:</TextBlock>
        <TextBox Text="{x:Bind Topic}" Grid.Row="2" 
                 Grid.Column="1" 
                 HorizontalAlignment="Stretch" 
                 Margin="4"></TextBox>

        <TextBlock Grid.Row="3" 
                   Margin="4">Description:</TextBlock>
        <TextBox Text="{x:Bind Description}"
                 AcceptsReturn="True"
                 TextWrapping="Wrap"
                 Margin="4" 
                 Height="100" 
                 Grid.Row="4" 
                 Grid.ColumnSpan="2" 
                 HorizontalAlignment="Stretch" 
                 VerticalAlignment="Stretch"></TextBox>
        
        <Button Grid.Row="5" Margin="4" Click="Button_Click">Submit</Button>
    </Grid>
</UserControl>

Now in ContactForm.xaml.cs add the following code

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            OnSubmit?.Invoke(this, e);
        }

        public string FullName { get; set; }
        public string Email { get; set; }
        public string Topic { get; set; }
        public string Description { get; set; }

        public event EventHandler<RoutedEventArgs> OnSubmit;
After that build your project.

Testing the Class Library

You can also test your project as you code, simply add another project to the solution. This time choose a normal Blank App (Universal Window) template. In solution explorer, right click on References and click Add Reference, then select your project under projects context. Now after adding the appropriate namespace in your XAML or C# file (for example, using ContactForm), you can access any public member of class library just as you access a class defined inside your project.

3. Create a .nuspec File

There are many ways to get nugget command-line tools but I will discuss the simplest one. Copy this file in your .csproj directory and you are done!

Now open cmd and at your .csproj directory, enter the following command,

nuget spec

It will create a .nuspec file in your project directory.

4. Add the Necessary Information in .nuspec File

Open the .nuspec file with any text editor or visual studio it will look something like this:

<?xml version="1.0"?>
<package >
  <metadata>
    <id>Package</id>
    <version>1.0.0</version>
    <authors>Hassaan</authors>
    <owners>Hassaan</owners>
    <licenseUrl>http://LICENSE_URL_HERE_OR_DELETE_THIS_LINE</licenseUrl>
    <projectUrl>http://PROJECT_URL_HERE_OR_DELETE_THIS_LINE</projectUrl>
    <iconUrl>http://ICON_URL_HERE_OR_DELETE_THIS_LINE</iconUrl>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>Package description</description>
    <releaseNotes>Summary of changes made in this release of the package.</releaseNotes>
    <copyright>Copyright 2016</copyright>
    <tags>Tag1 Tag2</tags>
    <dependencies>
      <dependency id="SampleDependency" version="1.0" />
    </dependencies>
  </metadata>
</package>

Fill the information about your package. For more information about those fields you can check the official documentation here. For testing you can just fill the four mandatory fields id, version, description, authors.

5. Create the Package and Publish!

After filling the .nuspec file open cmd, go to your project directory and enter the following command,

nuget pack <your_project>.csproj 

It will create a NuGet package with the extension .nupkg in the project directory. Now you can upload this package to nuget.org. But don’t do this yet! Add additional features and test your package for bugs to make it ready to use in production. For testing you can install your package using NuGet package manager. In the upper-right corner of the package manager click settings icon and add you directory you want to use for your custom packages. Then put your package in that directory and change the package source from nuget.org to your own package directory.

screenshot-378

When you are satisfied, sign in to nuget.org and upload your package after filling the required info.

Leave a Reply

Your email address will not be published. Required fields are marked *