Build and Deploy Web Module

Building Web Module

To build Web Module run ngv build command in web-src/redappid-module_name directory. Successfully completed compilation process will create compiled sources of Web Module in build directory.

Deploying Web Module

To run Web Module in SR360 everything from build/prod directory need to copied into web/redappid-module_name directory, located on the same level as web-src.

There are two ways to do it:

Deploying Manually

You can do it manually by copying all the files by yourself:

  • Create web/redappid-module_name directory next to web-src.

Structure of webmodule directory with compiled webmodule:

  ->META-INF
  ->...
  ->web-src
    ->my-red-app-web-module
	  ->build
	    -> prod
      ->...
  ->web
    ->my-red-app-web-module

  • Next, locate the folder in your module directory. (e.g. web-src/redappid-module_name/build/prod).

  • You will find all compiled files needed for running your Web Module. Copy those files to web/redappid-module_name directory in your Red App plugin. Example files:

    • manifest.json - Web Module’s manifest.

    • module.d.ts - Typings file contains public API’s.

    • module.js - AMD module with compiled TS code.

    • package.json - Declaration of Web Module.

    • styles.css - CSS styles provided by module.

    • translations.js - Translations provided by module.

    • assets/* - In assets directory module you can provide any files like images, fonts, etc.

Automation with concierge.conf.js

In order to automation the process of deploying create concierge.conf.js file, which will make webmodule deployment easier by automatically copying files to web/redappid-module_name directory.

Structure of webmodule directory with concierge.conf.js file:

  ->META-INF
  ->...
  ->web-src
    ->my-red-app-web-module
	  ->concierge.conf.js
  ->web

Body of concierge.conf.js should look like in presented below example. Provide path where compiled webmodule should be deployed under dist-copy directive.

Example of concierge.conf.js file:

module.exports = {
    metadata: {
        'dist-copy' : {
            'prod': '../../web/my-red-app-web-module'
        }
    }
}

Since now building webmodule with command ngv build will deploy compiled webmodule into declared path.