DNN module development with AngularJS (Part 5)

In this part of the journey we want to implement an automatic mechanism to create an installable package of our module on every release build. For this purpose we make use of a specific library built by Ernst Peter Tammingas XCESS expertise center which I tweaked a little bit. You'll find documentation here: DnntcMsBuild

Prerequisites

To make it work you have to install two packages on your machine:

1. MSbuild Community Tasks: This is an open source project and contains multiple extensions for the MSBuild engine
2. DnntcMsBuild: Includes build routines to create the DNN manifest. Tweaked by myself to add creation of language packages and other minor changes.

Installation folder

In the new Installation folder we'll create we have a bunch of files that are needed to create an installation package:

• cleanup/CleanUp.00.00.01.txt: File that contains list of files needed that needed to be deleted by installation. By using the appropriate Version number you can define a deinstallation list for every version of your module.
• config/config.txt: File containing XPath statements to manipulate the web.config (see file for documentation)
• Releasenotes/Release.01.00.00.txt: File containing Version notes shown while installing the module
• License.txt: Contains License of your module, shown while installing the module.
• 00.00.01.SqlDataprovider: Contains SQL script to create / modify your database
• Uninstall.SqlDataprovider: Sql script to clean the database when your module is uninstalled.
• BBAngular.png: Icon file for your module
• Attributes.cs: Library of metadata attributes to decorate the module elements with
• Project.targets: The build script which is running on every release build.

Download now the content of installation folder and add it to your project!

Adding Build script to the project

To get the build script to run we need to add it to the project file. Open your Angularmodule.csproj file with a text editor and add the following line near the end of the file (see where the other import statements are):

  <Import Project="$(MSBuildProjectDirectory)\Installation\Project.targets" />

Add Metadata Attributes

The build script fetches the attributes from the source code files to get the needed information about your module. So we need to add them in our case to the View.ascx.cs:

using DotNetNuke.UI.Utilities;
using Newtonsoft.Json;

namespace Angularmodule
{
    [DNNtc.ModuleDependencies(DNNtc.ModuleDependency.CoreVersion, "07.00.00")]
    [DNNtc.PackageProperties("Angularmodule", 1, "Angular module", "An AngularJS sample module", "BBAngular.png", "Torsten Weggen", "bitboxx solutions", "http://www.bitboxx.net", "info@bitboxx.net", false)]
    [DNNtc.ModuleProperties("Angularmodule", "Angular module", 0)]
    [DNNtc.ModuleControlProperties("", "Angularmodule", DNNtc.ControlType.View, "", false, false)]
    public partial class View : PortalModuleBase
    {

see Attributes.cs for explanation of parameters.

• ModuleDependencies: Add this if you want to insure that the installation requirements are met (DNN Version, other installed modules present etc.)
• PackageProperties: Information about the package to which this module belong.
• ModuleProperties: Information about the module containing one or more controls
• ModuleControlProperties: Information about the control itself (View.ascx, Settings.ascx etc.)

In subsequent controls you do not need to repeat all parameters. Just the first parameter is mandatory.

There is another attribute that go to the businesscontroller class:

[DNNtc.BusinessControllerClass()]

We do not have such class in our project but if you implement export,import,search etc. you'll need one.

Edit project.targets

The build script itself needs some information that you have to edit directly in the script:

  <PropertyGroup>
    <!--Fill in the folder where the output will be build to-->
    <!--http://msdn.microsoft.com/en-us/library/vstudio/ms164309.aspx -->
    <BinDir>$(MSBuildProjectDirectory)\$(OutputPath)</BinDir>
    <!--Module properties.-->
    <ZipFileNamePrefix>Angularmodule</ZipFileNamePrefix>
    <DesktopFolderName>Angularmodule</DesktopFolderName>
    <AlsoBuildSourcesZip>true</AlsoBuildSourcesZip>
  </PropertyGroup>

• ZipFileNamePrefix: The generated zip files will be named Angularmodule_01.00.00_Source.zip and Angularmodule_01.00.00_Install.zip
• DesktopFolderName: The name of the folder where your module resides under DesktopModules

If you have language specific .resx files, you may want to create installable Language packages also. Add your language(s) in this ItemGroup:

 <ItemGroup>
    <Languages Include="de-DE" />
    <Languages Include="es-ES" />
  </ItemGroup>

• The generated language resource packages will be named Resource.Angularmodule_01.00.00_Lang_de-DE.zip

Try a release build (packaging only occurs in release build) and see the generated packages afterwards being automagically created in your installation folder! In case something went wrong: here is the complete solution

In the next part of this blog series I'll show you how we can convert our module to a DNN8 SPA module!