# Deploy several WebMap Apps in the same Server

### 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](https://docs.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-5.0#multiple-apps-hosted-at-one-domain), 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](https://angular.io/api/common/http/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:

```typescript
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:&#x20;

```
    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).&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/general/frontend/guides/deploy-several-webmap-apps-in-the-same-server.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.