LogoLogo
WinForms to WebPowerBuilder to .NETPowerBuilder to Java
  • WebMAP Documentation | Mobilize.Net
  • WinForms
    • Introduction
    • Getting Started
    • Conversion Process
    • Post-Conversion
    • Extend or Modify the Converted Application
      • NoWebMap Forms Winforms
        • How to add a new Form
        • Adding the created form to the migrated App
        • Interacting with the application data
        • Call the custom API
        • Interaction between the no webmap added Form and the WebMap components
      • Adding a component
      • Adding a component dynamically
      • Add a new control model
      • Switching CSS theme
      • Adding new window
      • Conversion Configuration
        • WebMAP configuration file
        • Stub Filter
      • Adding Non-WebMap Angular Forms
      • Adding FrontEnd Handler to a ToolStripMenuItem
      • Changing ToolStripButton icons
      • Adding new items to existing toolbar
      • Adding FrontEnd element properties and JS listeners
      • Adding FrontEnd output handlers
      • Access FrontEnd components
      • Create custom components based on existing WebMap Component
      • Override FrontEnd methods
    • Assessment Mode
    • Errors and Troubleshooting
      • How to resolve broken reference problems with VBUC
    • Portability
    • Glossary
    • Release Notes
    • Internal Demos
    • Known Issues
    • WinForms DCP
  • WebForms
    • Introduction
    • Overview
    • Desktop Compatibility Platform (DCP)
      • Pages and Master Pages
      • GridView and DataList data synchronization
      • HTTP objects
    • Post-Conversion
    • Extend or Modify the Converted Application
      • Adding FrontEnd validator
      • Adding Page
      • Adding MasterPage
    • Designer classes on WebForms Conversion Tool
    • Errors and Troubleshooting
      • How fix Solution when have been added website from filesystem without project file
    • Release Notes
  • PowerBuilder to .Net
    • Introduction
    • Getting Started
      • Conversion Tool
    • Desktop Compatibility Platform (DCP)
      • Data Manager
    • Reports
      • Report Rendering in Modernized Code
      • ReportWatcher Service Configuration
      • Data Manager to RDL Conversion
      • Reporting Service Internals
      • Troubleshooting
  • PowerBuilder to Java
    • Introduction
    • Getting started
    • Post-Conversion
      • Setup PBJava Environment
      • Architecture
      • App Start
    • Glossary
    • Errors
    • Glossary
    • FAQ
      • How to create a new Control
      • How to create a new Screen
      • What is the Mobilize.WebMAP.CoreServices.All?
      • What is the DesignerAttribute?
      • What is the InterceptedAttribute?
      • What is the InterceptedAttribute?
      • What is the ObservableAttribute?
      • What is the Mobilize.Weaving.WebMAPExtensions.All?
  • General
    • FrontEnd
      • Documentation
        • Webforms Angular Components
          • Web Components
            • Base Components
              • BaseValidator Component
            • KendoUI Components
              • CompareValidator
              • CustomValidator
              • RegularExpressionValidator
              • RequiredFieldValidator
              • ValidationSummary
          • Directives
          • AJAX Web Components
            • AjaxCalendar
            • AjaxModalPopupExtender
          • Ajax Interaction Services
        • Client Core
          • WebMap's Client Core
        • Angular Client
          • Introduction
          • WebMap Service
          • WebMap Interceptor Service
        • Base Components
          • Introduction
          • Components
            • Container
            • Control
            • ControlContainer
            • FormsContainer
            • Loading
            • Stub
        • Winforms Angular Components
          • Web Components
            • Base Components
              • Control Component
              • Form Container
              • Grid Component
              • Style
            • KendoUI Components
              • AdoDataControl
              • Button
              • C1TrueDBGrid
              • CheckBox
              • CheckedListBox
              • ComboBox
              • ContextMenuStrip
              • DataGridView
              • DataGridViewFlex
              • DateTimePicker
              • FileDialog
              • GroupBox
              • Label
              • ListBox
              • ListView
              • MaskedTextBox
              • MessageBox
              • NumericUpDown
              • Panel
              • PictureBox
              • PrintDialog
              • ProgressBar
              • RadioButton
              • RichTextBox
              • StatusStrip
              • Stup
              • TabControl
              • TabPage
              • TextBox
              • Timer
              • ToolStrip
              • TreeView
              • WebBrowser
              • Window
            • JQuery Web Components
          • WebMap FrontEnd Architecture
          • Migrated Structure
          • Setup
            • Front-End setup and compilation
            • Components Manual
            • Browser Support
            • Unit Test Manual
            • Development Process
            • Setup AOT/JIT Compilation
          • Decorators
            • Server Event
          • Conventions
            • Application Structure and NgModules
            • Coding
            • Components
            • Data Service
            • Directives
            • Lifecycle hooks
            • Names
            • Services
        • PowerBuilder Kendo Components
          • Base Components
            • base-component
            • column-control
            • controlcontainer
          • Data Manager Componets
            • base-data-manager
            • data-manager-control
            • data-manager-control-base
            • dw-checkbox
            • dw-column
            • dw-complexNumericMaskComponent
            • dw-compute
            • dw-date-time-edit-mask
            • dw-dropdowndatawindow
            • dw-edit
            • dw-edit-mask
            • dw-radio-button
            • dw-simple-numeric-edit-mask
            • dw-string-edit-mask
            • dw-time-edit-mask
          • Window Components
            • basemask
            • graphics
            • w-checkbox
            • w-command-button
            • w-complex-numeric-mask
            • w-date-time-edit-mask
            • w-dropdownlistbox
            • w-group-box
            • w-line
            • w-listbox
            • w-maskedtextbox
            • w-mdiclient
            • w-menu
            • w-multiline
            • w-picture
            • w-picture
            • w-radiobutton
            • w-rectangle
            • w-simple-numeric-edit-mask
            • w-single-line-edit
            • w-statictext
            • w-string-edit-mask
            • w-time-edit-mask
            • w-toolbar
            • w-toolbaritem
            • w-user-object
            • w-window
          • Services
            • DmInteractionService
          • DataManagerEvents
          • FocusManager guide
      • Api Documentation
        • WebMap Silverlight
        • WfNetC1Components
        • WebFormsComponents
      • Guides
        • Setup NPM package registry in the workspace
        • How to Setup WebMap Applications To Run Over SubDomains or WebApplications In IIS
        • Deploy several WebMap Apps in the same Server
        • Update to Angular 16
        • Appearance
          • How to change the CSS
          • How to override the style for a component
        • Component maintenance
          • How link WebMap package to the migrated Application
          • How to resolve broken reference problems with VBUC
          • How to test a local WebMap Components package
          • How to add a new component in a migrated application
          • How to update a component
          • Dynamic Control Support
          • How to add new set of component with a different provider
          • How to test your component in the playground
          • Tools
        • WMLogger
          • How to use the WMLogger's instance
          • How to change log's level
          • How to add log tags
        • Integration test
        • Setup WebMap Applications to Run Front-End And Back-End In Separates Sites
          • Setup WebMap Applications To Run Front-End And Back-End In Separates Sites in Production (IIS)
        • Setup Migrated WebMap Applications To Run Front-end & Back-end In Separates Sites (Only development)
        • Initial Set Up
          • Software to Install
          • Necessary Repositories
      • Errors
      • Version Notes
        • Client Core
        • Angular Client
        • Web Base Components
        • Winforms Angular Components
        • PowerBuilder Kendo Components
      • Licenses
        • Client Core
        • Angular Client
        • Base Components
        • PB Kendo Components
        • WFNet Kendo Components
        • WebForms Components
        • WFNet Access Components
        • WFNet Janus Components
        • WFNet C1 Components
        • Silverlight wms-framework
        • Silverlight i-components
    • BackEnd
      • WebMAP From Scratch
      • Setup
      • DCP: Desktop Compatibly Platform
        • Overview
        • Library Bundles
          • Bundle Library
            • Create an Observable Object
          • Bundle DTO
            • DTO: Data Transfer Objects
              • Creating a DTO
            • Mappers
              • Create Mappers
            • Observable Wrappers
              • Create an Observable Wrapper
            • API/Controllers
      • Architecture
      • Weaving on WebMAP
      • Glossary
      • FAQ
        • How to create a new Control
        • How to create a new Screen
        • What is the Mobilize.WebMAP.CoreServices.All?
        • What is the DesignerAttribute?
        • What is the InterceptedAttribute?
        • What is the Mobilize.Extensions.Logging.RollingFile?
        • What is the ObservableAttribute?
        • What is the Mobilize.Weaving.WebMAPExtensions.All?
      • Licenses
        • PBNet DCP
        • WebFormsDCP
        • WFNet DCP
        • CoreServices
        • CoreServicesCommon
    • Request and Response
  • SCALABILITY
    • Introduction
    • Microservices
    • Containerizing a WebMap .Net Application with Docker
    • Vertical scalability
Powered by GitBook
On this page
  • Requirements
  • Package Distribution

Was this helpful?

  1. General
  2. FrontEnd
  3. Guides

Setup NPM package registry in the workspace

PreviousGuidesNextHow to Setup WebMap Applications To Run Over SubDomains or WebApplications In IIS

Last updated 3 months ago

Was this helpful?

Requirements

We are working with Angular, for this reason we have some requirements to use our package.

  1. We need to install node from their . You need to check the node version that is 18.20.5 or higher and npm version 10.8.2 or higher. Both versions are the recommended versions but probably the workspace works fine with the latest versions.

  2. If you want to work with our repository, you should install to have access to our code.

  3. There is many editor to work with Angular, but in our experience we recommend using , since it is easy to install and use, apart from providing many plug-ins to streamline the development process.

Package Distribution

Each project in the Front-end generates a package. A package is the way to distribute our code. Node uses a package manager known as npm. You can use npm to install, update, or remove a package in a project.

WebMAP packages are published in two repositories, the first one is an internal NPM server that is currently deployed at to provide packages to internal WebMAP developers and allow the installation of alpha npm packages as well as release packages. The internal server is only accessible using the company VPN.

The second one is the public NPM server that is deployed in an external sever accessible from web at it provides release packages to our clients and sales team, the repository only allows installation of release packages. The public server is accessible by anyone with a WebMAP license.

Finally but no least important there is a global and public server for the npm packages provided by NPM software registry , it has the public packages that WebMAP needs from third party sources and the licensed packages from .

To configure the environment you first need to override your NPM registry to download the required packages from one of the NPM proxies mentioned above. To perform this change you can configure the workspace by two options.

First option: Set registry directly to WebMAP servers.

This option consist in configure the npm registry to one of the WebMAP npm feeds directly to your global environment, if you are an internal developer (VPN connection) to perform the configuration execute the next sentence, please execute using a CMD console run as administrator.

npm set registry http://ais-build-w7:81/npm/Frontend/

In case that you need to install packages from outside organization please execute the next command using a CMD console run as administrator.

npm set registry https://packages.mobilize.net/npm/mobilizenet-npm/ 

Sometimes this command ask for extra information like email, password, username... You can use your GAP Mobilize account information.

Second option: Set registry in the .npmrc user config file and set global registry to public NPM software registry.

This option allows better timing to download packages because it uses the entire network bandwidth, however is not recommended when processes are automated (CI, Azure, TFS, AWS) because can cause network problems. The configuration is set the registry to the global NPM registry, so please execute using a CMD console run as administrator.

npm set registry https://registry.npmjs.org/

Then configure the user .npmrc configuration file in the Windows environment, it is placed in the path (Root disk can be C:\, D:\, etc.):

C:\Users\<user name>\.npmrc

Inside the file add an specific feed for WebMAP packages, the file only should have one feed to the packages so please remove any other feed related with WebMAP that could appears in the file. File content should look like this if configuration is going to be used inside GAP network:

@mobilize:registry=http://ais-build-w7:81/npm/Frontend/

In case that you need to install packages from outside organization the file should look like this:

@mobilize:registry=https://packages.mobilize.net/npm/mobilizenet-npm/ 

Final steps

After the configuration steps, in any moment developers can retrieve what npm version is configured in their environment executing the next command:

npm get registry

//Theses are possible result values depending of what option you have chosen:
//https://registry.npmjs.org/ -> Second option
//http://ais-build-w7:81/npm/Frontend/ -> First option internal dev (VPN needed)
//https://packages.mobilize.net/npm/mobilizenet-npm -> First option external dev

A very recommended step is to clean the project from previous npm feeds or cached packages, the commands to clean are the following:

rimraf .\node_modules\
rimraf .\package-lock.json\
npm cache verify

We recommend the npm package manager but if any other is of your preference (yarn, pnpm, ect) please read its documentation to determine how to clean the cache and lock files.

Finally you should be able to install packages using the next command in CMD console or in the Visual Studio Code console:

npm install

And after correct npm installation application can be compiled using the next command for debug mode:

npm run debug

Or the next command for production mode:

npm run build

The front-end application is ready to be executed in the developer server (e.g. IIS, Apache Tomcat, etc)

website
git
Visual Studio Code
http://ais-build-w7:81/npm/Frontend/
https://packages.mobilize.net/npm/mobilizenet-npm/
https://registry.npmjs.org/
Kendo UI for Angular