Skip to main content

Configurations

Global Configuration​

First set the global configuration for your Sinequa application, then bootstrap the Angular application with the necessary providers and interceptors.

setGlobalConfig is used to set the global configuration for your Sinequa application, including the application name, backend URL, and bearer token, SAML or OAuth provider for authentication.

note

Usually, applications are hosted on a Sinequa backend, and the configuration is provided by the Sinequa backend. However, you can also set the configuration manually in your application.

caution

Make sure to set the configuration before bootstrapping the application in the main.ts file.

Example: OAuth Provider​

Here's how you can do it with an OAuth provider:

main.ts
import { setGlobalConfig } from '@sinequa/atomic';

setGlobalConfig({
  app: 'your-app-name', // Replace with your application name (optional)
  backendUrl: 'https://your-sinequa-backend.com', // Replace with your Sinequa backend URL (optional)
  autoOauthProvider: 'your-oauth-provider', // Replace with your OAuth provider
});

Example: SAML Provider​

Here's how you can do it with a SAML provider:

main.ts
import { setGlobalConfig } from '@sinequa/atomic';

setGlobalConfig({
  app: 'your-app-name', // Replace with your application name (optional)
  backendUrl: 'https://your-sinequa-backend.com', // Replace with your Sinequa backend URL (optional)
  autoSAMLProvider: 'your-saml-provider', // Replace with your SAML provider
});

Example: Bearer Token​

Here's how you can do it with a Bearer Token:

main.ts
import { setGlobalConfig } from '@sinequa/atomic';

setGlobalConfig({
  app: 'your-app-name', // Replace with your application name (optional)
  backendUrl: 'https://your-sinequa-backend.com', // Replace with your Sinequa backend URL (optional)
  autoBearerToken: 'your-bearer-token', // Replace with your Bearer Token
});

Example: Credentials​

Here's how you can do it with credentials:

main.ts
import { setGlobalConfig } from '@sinequa/atomic';

setGlobalConfig({
  app: 'your-app-name', // Replace with your application name (optional)
  backendUrl: 'https://your-sinequa-backend.com', // Replace with your Sinequa backend URL (optional)
  useCredentials: true, // Set to true to use credentials for authentication
});

Proxy Configuration​

If your application is hosted locally, maybe you need to set a proxy configuration to avoid CORS issues. You can do this by creating a proxy.conf.json file in the root of your project:

proxy.conf.json
[
  {
    "context": [
      "/api",
      "/xdownload",
      "/auth/redirect",
      "/saml/redirect",
      "/r",
      "/endpoints",
      "/assets"
    ],
    "target": "https://your-sinequa-backend.com",
    "secure": false,
    "changeOrigin": true,
    "ws": true
  }
]

Then, you can run your application with the proxy configuration:

ng serve --ssl=true --proxy-config proxy.conf.json

Local vs Production Configuration​

The configurations above are generally set when you serve your application locally. In production you can provide automatically the configuration from the Sinequa backend by using the appInitializerFn function like this:

main.ts
import { appInitializerFn } from '@sinequa/atomic';

bootstrapApplication(App, {
  providers: [
    /* ... */,
    provideAppInitializer(appInitializerFn),  // This will automatically fetch the configuration
                                              // from the Sinequa backend
  ],
});
note

The appInitializerFn function is used to bootstrap the application with the necessary providers. It initializes the application by fetching the configuration from the Sinequa backend.

Application, routes initialization and authentication​

The bootstrapApp function is used to initialize the application and set up the routes. It takes the Router and ApplicationService as parameters, along with an options object that can specify whether to create routes or not.

tip

The bootstrapApp function, under the hood sets up the authentication mechanism, which can be done using OAuth, SAML, or other methods. The authentication credentials can be provided in the setGlobalConfig function or through the appInitializerFn.

main.ts
import { Router } from '@angular/router';
import { ApplicationService } from '@sinequa/atomic-angular';

bootstrapApplication(App, {
  providers: [
    /*...*/
    provideAppInitializer(() =>
      bootstrapApp(inject(Router), inject(ApplicationService), {
        createRoutes: true, // Set to true to create routes automatically
      })
    ),
  ],
});
note

The bootstrapApp function is essential for setting up the application and its routes. The createRoutes option determines whether the application should automatically create routes based on the configuration. By default, it is set to true, which means the application will create routes automatically based on the configuration provided in the Sinequa Administration.

When createRoutes is set to false, you will need to manually define the routes in your application. Uses the routes.ts file to define the routes for your application.

Example of a routes.ts file
routes.ts
import { Routes } from '@angular/router';
export const routes: ExtendedRoutes = [
  { path: 'login', component: SignInComponent },
  { path: 'logout', component: SignInComponent },
  {
    path: 'assistant',
    loadComponent: () => import('./pages/assistant/assistant.layout').then(m => m.AssistantLayoutComponent),
    canActivate: [AuthGuard()],
    resolve: { queryName: queryNameResolver }
  },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard()], resolve: { queryName: queryNameResolver } },
  {
    path: 'widgets',
    loadComponent: () => import('./pages/widgets/layout').then(m => m.WidgetsLayoutComponent),
    canActivate: [AuthGuard()],
    children: [
      {
        path: 'recent-searches',
        component: RecentSearchesComponent
      },
      {
        path: 'bookmarks',
        component: BookmarksComponent
      },
      {
        path: 'saved-searches',
        component: SavedSearchesComponent
      },
      {
        path: 'collections',
        component: CollectionsComponent
      }
    ]
  },
  {
    path: 'search',
    component: SearchLayoutComponent,
    canActivate: [AuthGuard()],
    children: [
      {
        path: '**',
        component: SearchAllComponent,
        resolve: { queryName: queryNameResolver }
      }
    ]
  },
  { path: 'loading', component: LoadingComponent },
  { path: 'error', component: ErrorComponent },
  { path: '**', redirectTo: 'home', pathMatch: 'full' }
];

Example of a complete main.ts file​

main.ts
import {
  provideAppInitializer,
  provideZonelessChangeDetection,
} from '@angular/core';
import { Router, provideRouter } from '@angular/router';
import {
  httpResource,
  provideHttpClient,
  withInterceptors,
} from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

import {
  appInitializerFn,
  setGlobalConfig,
} from '@sinequa/atomic';
import {
  ApplicationService,
  auditInterceptorFn,
  bodyInterceptorFn,
  bootstrapApp,
  errorInterceptorFn,
  toastInterceptorFn,
} from '@sinequa/atomic-angular';

bootstrapApplication(App, {
  providers: [
    provideZonelessChangeDetection(),
    provideRouter([]),
    provideHttpClient(
      withInterceptors([
        bodyInterceptorFn,
        authInterceptorFn,
        auditInterceptorFn,
        errorInterceptorFn,
        toastInterceptorFn,
      ])
    ),
    // provideAppInitializer(appInitializerFn),
    provideAppInitializer(() =>
      bootstrapApp(inject(Router), inject(ApplicationService), {
        createRoutes: true,
      })
    ),
  ],
});