This article shows you the steps to deploy a Static Front end application to Docker. If you want to do it using the Application Deployment tool inside GeneXus, see HowTo: Deploy Frontend applications to Docker containers.
The Application Deployment tool is based on MSBuild Tasks. Using those tasks, you can automate deployment.
In the case of Frontend applications, three MSBuild scripts are executed to perform the deployment.
GeneXus provides a script called deploy.msbuild (located at the root of the GeneXus installation) which is used to create a deployment project for Frontend 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
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 Front end Project" step (including the name of the file).
ProjectRootDirectory: The path to the directory under the Knowledge Base, 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 Front end 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
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 Front end 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 successfully, using the Docker images command:
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 HowTo: Deploy Frontend applications to Docker containers
The application always runs under the "app" directory, as shown in the image.
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.
Since GeneXus 17 Upgrade 11