Deploy Front-end applications to Cloud Provider Object Storage

Official Content
This documentation is valid for:

Front-end applications, such as Angular applications, can be deployed to any Cloud Provider Object Storage.

The Application Deployment tool supports the deployment to AWS S3 and Azure Blob Storage.

You can use the Application Deployment tool from inside the GeneXus IDE, or MSBuild commands.

Summary:

Deploy using 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" contextual menu option,

image_202216125328_1_png

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

Next, from the Properties dialog, select a Front-end Deployment target (AWS S3, or Azure Blob Storage).
Depending on the target selected, you have to enter different options.
Finally, press the deployment button.

image_202216123326_1_png

MSBuild tasks to deploy to a Cloud Provider Object Storage

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.

1. Create FrontEnd 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 of the MSBuild task that deploys to the cloud.

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. 

Example

C:\Windows\Microsoft.NET\Framework\v4.0.30319\MSBuild.exe /noconsolelogger /nologo /logger:DeployLogger,"C:\Development\Trunk\Genexus\GeneXus.Deploy.MSBuild.Tasks.dll"
/verbosity:quiet /ToolsVersion:4.0 "C:\Development\Trunk\Genexus\deploy.msbuild"
/p:TargetId ="STATICFRONTEND"
/p:DEPLOY_TARGETS="C:\Development\Trunk\Genexus\DeploymentTargets\StaticFrontEnd\staticfrontend.targets"
/p:KBPath="C:\models\TestAngular\TestAngular"
/p:KBEnvironment="NetSQLServer1"
/p:KBVersion="TestAngular"
/p:DeploymentUnit="DeploymentUnit2"
/p:ProjectName="myproject"
/p:ObjectNames="SDPanel:Panel1"  
/t:CreateDeploy

2. Create Package

The build of the project is triggered by the CreateFrontendPackage.msbuild script, which receives the parameters explained below.

  • DeployFullPath: The path where you'll find the built application. It should be 4 directories up to the environment directory of the KB
    (e.g: <Kb  Environment Directory>\Deploy\STATICFRONTEND\DeploymentUnit2\20220114144829)
  • GenExtensionName: The name of the front end generator (e.g.:Angular)
  • ProjectName: Name of the .gxdproj file. By default it is "DeploymentUnit_<TimeStamp>.gxdproj".
  • DeploymentScript: Each Frontend generator should have its own script for packaging (building the application). This should be specified at the DeploymentScript msbuild property.
  • GX_PROGRAM_DIR: GeneXus program directory.

Example

C:\Windows\Microsoft.NET\Framework\v4.0.30319\MSBuild.exe /noconsolelogger /nologo /logger:DeployLogger,"C:\Development\Trunk\Genexus\GeneXus.Deploy.MSBuild.Tasks.dll" /verbosity:minimal /ToolsVersion:4.0 "C:\Development\Trunk\Genexus\CreateFrontendPackage.msbuild" /p:DeployFullPath="C:\models\TestAngular\TestAngular\NetCoreSQLServer1004\Deploy\STATICFRONTEND\DeploymentUnit2\20220114144829"
/p:ProjectName="myproject"
/p:GenExtensionName="Angular"
/p:DeploymentScript="deploy.angular.msbuild"
/p:GX_PROGRAM_DIR="C:\Development\Deploy\Genexus"
/t:CreatePackage

Note: In the case of Angular, the script is "deploy.angular.msbuild" and is declared at the angular.generator file. The deploy.angular.msbuild is located at GenExtensions\SmartDevices\Angular\deploy under the GeneXus installation.


3. Deploy to the Cloud Provider

The solution to deploy the front end of an application is extensible and available at Github (StaticFrontEnd deployment target). Those files are in your GeneXus installation, under the DeploymentTarget folder.

There's a built-in solution for deploying to AWS S3 and to Azure Blob Storage. 

In this step, the application is built and everything is set up for distribution.

It has a deploy.msbuild script which includes the .target file depending on the STATICFRONTEND_PROVIDER property value (it can be "aws3" or "azureblobstorage"). Depending on the Provider, different properties are needed in order to deploy to that cloud.

For details on how to execute this step, see Deploy Front-end applications to Azure Blob Storage.

Temporal Limitation

At the moment, only one main object must be deployed to each Storage.

Availability

Since GeneXus 17 Upgrade 9

See also

How to: Angular front end applications using serverless backend