Skip to main content

Code and Compile Web Module

  1. Start developing your module in web-sr\[module-id]\src folder

    • src folder contains below listed folders

    • code - is for TypeScript code that contains Main.ts and other TypeScript files (for example: models, views, services, etc.). The best practice is to create folders for models, views, services etc.

      • models - contains all model classes.

      • views - contains view classes.

      • services - contains services classes.

    • assets - for any static assets like images etc.

    • guides - for any documentation files like README.MD.

    • i18n - for translation messages.

    • styles - contains styles.less file for CSS in less format.

    • templates - hold all the handlebar templates.

  2. Run NGV build on your module directory, your module should be built.

If you encounter an error which says that a module cannot be found, such as: Error: Cannot find module 'webpack' make sure to install it by running 'npm install <module id>', e.g. 'npm install webpack' from the same directory where the 'NGV' file is located.

When this process successfully finishes, you will see a build folder under web-src/module-id/ folder.   If concierge.conf.js is created then compiled web module can be found under path provided there. Usually it should be web/module-id/.

The web module id must match the pattern: Bundle-Symbolic-Name-name_of_the_web_module (non-alphanumeric characters replaced with hyphens)
Value of SERVICE_NAME variable defined in the service must match the pattern: web-module-name-service-name. Additionaly the service name has to be defined as a String literal.


IDE that supports TypeScript (such as: Sublime, Visual Studio Code, Webstorm).

Main TS/Module Naming Constraints

Main.ts is the Module main TypeScript file. Component registrations like view model registration, service registration, extension point and component registrations etc., should be configured in this class and initialization method.

Module Name should be in pattern Bundle-Symbolic-Name-module_name (For example: com-sabre-redapp-example3-desktop-form-my-web-module, where com-sabre-redapp-example3-desktop-form is the Bundle Symbolic Name (non-alphanumeric characters replaced with hyphens) and my-web-module is the web module name).