Deploy Front-end applications to Docker containers

Official Content
This documentation is valid for:

To deploy your front-end application to a Docker container using Nginx, you can use the Application Deployment tool from inside the GeneXus IDE or MSBuild commands.

Summary

Deploy using the Application Deployment tool inside GeneXus

In GeneXus, after having created the Deployment Unit object containing the main objects of your app, go through the "Deploy Application" context menu option,

image_202216125328_1_png

and select the "Static Front end" option from the Targets combo box.

Next, from the Properties dialog, select "Docker container."

image_2022620135430_1_png

Then you have to enter valid values for App Location and Docker Image name properties.

Finally, press the deployment button.

If you wish, you can just create the deployment package by checking "Only Package." In this case, you will have the package under the Deploy\STATICFRONTEND\<DeploymentUnit>\<TimeStamp>\context directory of the KB.
The context directory contains the source files of the application (which will be used to build the Angular application when the Docker image is built), plus the Dockerfile and nginx.conf files.
image_202262210104_1_png

Deploy using MSBuild tasks

See MSBuild Tasks to deploy static front-end to Docker

Requirements

To build the Docker image, you need Docker for Windows.
For this type of deployment, switch to "Linux Containers."

Note: Unless you select "Only Package," if the docker engine is not installed or is not up and running, the following error is thrown:

The command "docker info --format "{{.OSType}}"" exited with code 2.
error : Docker client not found. 

Limitations

The deployment unit has to have only one main object.

Important Notes

The application is built in the Docker image (npm install), so building in GeneXus could be avoided (for example, if you don't have the npm on the build machine).

The Dockerfile settings such as the Nginx version can be edited directly in the Dockerfile template, which is found in the GeneXus installation under GenExtensions\SmartDevices\Angular\deploy\docker\Templates.

The same happens with the Nginx configuration file (nginx.conf). Through the StaticServerConfigTemplatePath property of the Create FrontEnd Package MSBuild (explained here), you can indicate a path to the config you want to use. Another option is to edit the nginx.conf file under GenExtensions\SmartDevices\Angular\deploy\docker\Templates.

See also

The services of the app have to be deployed in another step. They can be deployed locally, or to the cloud (to a serverless architecture also using Azure serverless or AWS serverless).

Consider that in most cases you have to configure the CORS where the services run. See the following for more details:
How to: Angular front end applications using serverless backend

Availability

Since GeneXus 17 Upgrade 11