MSBuild Tasks to deploy static front-end to Docker

Official Content
This documentation is valid for:

You can deploy a static front-end application to Docker. To do it using the Application Deployment tool inside GeneXus, see Deploy Front-end applications to Docker containers.

The Application Deployment tool is based on MSBuild tasks. Using those tasks, you can automate deployment.

In the case of front-end applications, three MSBuild scripts are executed to perform the deployment.

Summary

Create Front-end Project

GeneXus provides a script called deploy.msbuild (located at the root of the GeneXus installation) which is used to create a deployment project for front-end applications, when the Target deployment (TargetId) is "STATICFRONTEND." This step creates a file called <ProjectName>.gxdproj (an MSBuild script) which contains a list of the selected objects of the Deployment Unit object, and some environment properties for the deployment. This gxdproj file is used as input for the MSBuild task that creates the package.

Properties to add to the MSBuild execution:

TargetId: STATICFRONTEND
DEPLOY_TARGETS: Reference to .targets file where the validations are implemented (staticfrontend.targets).
KBPath: Path to the Knowledge Base
KBVersion: Name of the version to be set as active
KBEnvironment: Name of the environment in that version
DeploymentUnit: Name of the deployment unit
ProjectName: Name of the generated .gxdproj file. By default it is "DeploymentUnit_<TimeStamp>.gxdproj".
ObjectNames: Names and types of the objects to deploy (deployment units can also be selected) (ref: How to specify an object list in a MSBuild task). This parameter is optional if you specify the DeploymentUnit property.
Outputpath: Where the .gxdproj is saved. The gxdproj file is saved under $KB.Location$\$Model.TargetPath$\web if Outputpath is not defined. 

 
MSBuild.exe  /ToolsVersion:4.0 "C:\Genexus\deploy.msbuild"
/p:KBPath="C:\models\TestAngular\TestAngular"
/p:KBEnvironment="NETSQLServer"
/p:KBVersion="TestAngular"
/p:DeploymentUnit="DeploymentUnit1"
/p:ProjectName="DeploymentUnit1_20220616193203"
/p:TargetId="STATICFRONTEND"
/p:ObjectNames="WorkWithDevices:WorkWithDevicesPerson"
/p:DEPLOY_TARGETS="C:\Development\Trunk\Deploy\Genexus\debug\DeploymentTargets\StaticFrontEnd\staticfrontend.targets"
/t:CreateDeploy

Create Front-end Package

This step creates a folder containing all the necessary artifacts to build the Docker image.
The directory can be specified using the DeployDirectory MSBuild property. By default, the folder is named "context" and is located under Deploy\STATICFRONTEND\<DeploymentUnit>\context directory of the KB.

GXDeployFileProject: The path to the .gxdproj file generated in the "Create FrontEnd Project" step (including the name of the file). 
ProjectRootDirectory: The path to the directory under the KB, where the Angular application is generated (it is always under the mobile\Angular folder). For example: "C:\models\TestAngular\TestAngular\NetSQLServer005\mobile\Angular"
GenExtensionName: The name of the front-end generator (for example, Angular).
DeploymentScriptDocker: Each Frontend generator should have its own script for packaging to Docker. This should be specified at the DeploymentScriptDocker MSBuild property. In the case of Angular, it is deploy.angular.docker.msbuild, located under <GeneXus installation>\GenExtensions\SmartDevices\Angular\deploy directory.
STATICFRONTEND_DOCKER_APPLOCATION: (required) It's the location inside the Docker image where the app will be located.
STATICFRONTEND_PROVIDER: In this case it has to be "Docker." 
GX_PROGRAM_DIR: GeneXus program directory.

MSBuild.exe /ToolsVersion:4.0 "C:\Genexus\CreateFrontendPackage.msbuild"
/p:GXDeployFileProject="C:\models\TestAngular\TestAngular\NETSQLServer003\Web\DeploymentUnit1_20220616193203.gxdproj"
/p:ProjectRootDirectory="C:\models\TestAngular\TestAngular\NETSQLServer003\mobile\Angular"
/p:GenExtensionName="Angular" 
/p:STATICFRONTEND_DOCKER_APPLOCATION="app"
/p:DeploymentScriptDocker="deploy.angular.docker.msbuild"
/p:STATICFRONTEND_PROVIDER="docker"
/p:GX_PROGRAM_DIR="C:\Genexus"
/t:CreatePackage

Build Image

This step creates the Docker container (builds the Docker image). In order to run the image, you should push it to a registry and run it afterwards.

STATICFRONTEND_PROVIDER: In this case, it has to be "Docker." 
DeployFullPath: Where the package to build is located.
GX_PROGRAM_DIR: GeneXus program directory.
GXDeployFileProject: The path to the .gxdproj file generated in the "Create FrontEnd Project" step (including the name of the file). 
STATICFRONTEND_DOCKER_IMAGE_NAME: The Docker image name. It has to be a valid Docker image name in order to be pushed to any registry.

MSBuild.exe /ToolsVersion:4.0 "C:\Genexus\DeploymentTargets\StaticFrontEnd\deploy.msbuild"
/p:STATICFRONTEND_PROVIDER="docker"
/p:GX_PROGRAM_DIR="C:\Genexus"
/p:DeployFullPath="C:\models\TestAngular\TestAngular\NETSQLServer003\Deploy\STATICFRONTEND\DeploymentUnit1\20220616202241"
/p:GXDeployFileProject="C:\models\TestAngular\TestAngular\NETSQLServer003\Web\DeploymentUnit1_20220616193203.gxdproj" 
/p:STATICFRONTEND_DOCKER_IMAGE_NAME="testangular:1.0" 
/t:Deploy

To run the Docker image, you can check first if it was created succesfully, using the Docker images command:

image_202262211367_1_png

Then you can run it locally if you wish, using Docker desktop or the command line. The Docker container runs at port 80 but it can be changed by editing the nginx.conf template, as explained in Deploy Front-end applications to Docker containers 

image_2022622113648_1_png

The application always runs under the "app" directory, as shown in the image.

image_202262211419_1_png

Troubleshooting

An effective way to troubleshoot these applications is to check the network traffic at the web developer tools in the browser (F12). The CORS error can be seen there, for instance.
Errors at the Docker image itself can be inspected using Docker desktop.

Availability

Since GeneXus 17 Upgrade 11