Deploy several WebMap Apps in the same Server

If you would like to deploy multiple migrated applications on the same server and pointing to the same domain, but in different ports, follow these steps:

Front end configuration

WebMap use cookies to ensure that the application is secure against cross site request forgery attacks (https://docs.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-5.0), because of that every WebMap application use a token that identifies that a current session is valid and enable the website to send and receive data from the server side.

Even sharing domains is not a recommended practice, some clients still want to deploy several applications under the same domain. In that case it is necessary to configure the Angular´s module HttpClientXsrfModule to use customized XSRF cookie and header names for every deployed application. To configure your migrated application cookie names in the Angular project just require to import the HttpClientXsrfModule in the app.module.ts and use the withOptions method to set the customized names. For example:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { BaseComponentsModule } from '@mobilize/base-components';
import { WebMapModule, WebMapService, WEBMAP_CONFIG  } from '@mobilize/angularclient';
import { PowerComponentsModule } from '@mobilize/powercomponents';
import { DISPATCHModule } from './DISPATCH.module';
import { HttpClientXsrfModule } from "@angular/common/http";
const config = {
  useDynamicServerEvents: true,
  webMapVersion: 'v5',
  usePercentage: false,
  useBundleEvent: true
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    HttpClientXsrfModule.wihOptions({
      cookieName: "My-Xsrf-Cookie", // Customized cookie name
      headerName: "My-Xsrf-Header", // Customized header name
    }),
    BrowserModule,
    WebMapModule,
    BaseComponentsModule,
    PowerComponentsModule,
    DISPATCHModule,
  ],
  providers: [WebMapService, { provide: WEBMAP_CONFIG, useValue: config }],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

With that simple step you will configure your Angular´s front end application to use the customized cookie and header names to authenticate the application with the antiforgery mechanism.

Back end configuration

In the corresponding backend tier you have to customize the server to match the same configuration of client side.

For that, you only have to modify to Startup.cs file to change the Antiforgery and the Session settings as follow:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddWebMap();
        services.RegisterModelMappers();
        services.RegisterWrappers();
        AddDesktopCompatibilityPlatform(services, Startup.Start);
        services.AddHttpContextAccessor();
        services.AddDistributedMemoryCache();
        //services.AddSession();
        services.AddSession(options =>
        {
            options.Cookie.Name = "CookieSession";
        });
        //services.AddAntiforgery(options => options.HeaderName = WebMapHeaders.AntiforgeryToken);
        services.AddAntiforgery(options =>
        {
            options.HeaderName = "My-Xsrf-Header";
            options.FormFieldName = "My-Xsrf-Cookie";
        });

Look for the method ""ConfigureServices" and modify the AddSession to modify the default Session Name to your choice; and modify the AddAntiforgery to use a custom HeaderName (same as 'headerName' in the client side) and FormFieldName (the same value as 'cookieName' in the client side).