> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Ishaq74/concordia/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration

> Configure Astro settings, adapters, and i18n for your Concordia deployment

Concordia uses Astro with server-side rendering (SSR) and supports multiple deployment targets and internationalization.

## Astro Configuration

The main configuration is located in `astro.config.mjs` at the root of the project.

### Basic Configuration

```javascript astro.config.mjs theme={null}
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
import vercel from '@astrojs/vercel';
import Icon from 'astro-icon';
import mdx from '@astrojs/mdx';

export default defineConfig({
  integrations: [Icon(), mdx()],
  output: 'server',
  adapter: vercel(),
  // ... other options
});
```

## Deployment Adapters

Concordia supports two deployment adapters that can be selected at build time.

<Tabs>
  <Tab title="Vercel (Default)">
    ### Vercel Adapter

    The default adapter optimized for Vercel deployment:

    ```javascript astro.config.mjs theme={null}
    import vercel from '@astrojs/vercel';

    export default defineConfig({
      adapter: vercel(),
      // ...
    });
    ```

    **Build Commands:**

    <CodeGroup>
      ```bash pnpm theme={null}
      pnpm run build
      ```

      ```bash npm theme={null}
      npm run build
      ```

      ```bash yarn theme={null}
      yarn build
      ```
    </CodeGroup>

    **Features:**

    * Automatic edge function deployment
    * Built-in image optimization
    * Zero-configuration serverless functions
    * Automatic HTTPS

    <Info>
      The Vercel adapter is used by default when running `npm run build`.
    </Info>
  </Tab>

  <Tab title="Node.js">
    ### Node.js Adapter

    For standalone Node.js server deployment:

    ```javascript astro.config.mjs theme={null}
    import node from '@astrojs/node';

    let adapter = node({ mode: 'standalone' });
    if (process.argv && process.argv.includes('--node')) {
      adapter = node({ mode: 'standalone' });
    }
    ```

    **Build Commands:**

    <CodeGroup>
      ```bash pnpm theme={null}
      pnpm run build:node
      ```

      ```bash npm theme={null}
      npm run build:node
      ```

      ```bash yarn theme={null}
      yarn build:node
      ```
    </CodeGroup>

    **Preview the Node Build:**

    <CodeGroup>
      ```bash pnpm theme={null}
      pnpm run preview:node
      ```

      ```bash npm theme={null}
      npm run preview:node
      ```

      ```bash yarn theme={null}
      yarn preview:node
      ```
    </CodeGroup>

    **Features:**

    * Full control over the Node.js server
    * Standalone mode for containerization (Docker)
    * Works with any Node.js hosting provider
    * Custom middleware support

    <Note>
      The configuration dynamically switches to Node adapter when `--node` flag is present.
    </Note>
  </Tab>
</Tabs>

## Internationalization (i18n)

Concordia supports 4 languages with automatic routing and locale detection.

### Supported Locales

```javascript astro.config.mjs theme={null}
export default defineConfig({
  i18n: {
    locales: ['fr', 'en', 'ar', 'es'],
    defaultLocale: 'fr',
    routing: {
      prefixDefaultLocale: true
    }
  },
  redirects: {
    '/': '/fr/'
  }
});
```

<ParamField path="locales" type="array" required>
  Supported locales: French (fr), English (en), Arabic (ar), Spanish (es)
</ParamField>

<ParamField path="defaultLocale" type="string" default="fr">
  Default language for the application. Set to French (`fr`).
</ParamField>

<ParamField path="routing.prefixDefaultLocale" type="boolean" default="true">
  When `true`, all routes include the locale prefix (e.g., `/fr/about`). This ensures consistent URL structure across all languages.
</ParamField>

### Locale Routing

| Locale  | Code | Example URL | Direction |
| ------- | ---- | ----------- | --------- |
| French  | `fr` | `/fr/about` | LTR       |
| English | `en` | `/en/about` | LTR       |
| Arabic  | `ar` | `/ar/about` | RTL       |
| Spanish | `es` | `/es/about` | LTR       |

<Info>
  Arabic is automatically detected as RTL (Right-to-Left) and applies the correct `dir` attribute.
</Info>

### Root Redirect

The root path `/` automatically redirects to the default locale:

```javascript theme={null}
redirects: {
  '/': '/fr/'
}
```

## Output Mode

Concordia uses server-side rendering (SSR) for dynamic content:

```javascript astro.config.mjs theme={null}
export default defineConfig({
  output: 'server',
  // ...
});
```

<ParamField path="output" type="string" default="server">
  * `server` - Enables SSR for all pages
  * `hybrid` - SSR with selective static generation (not used)
  * `static` - Pre-renders all pages (not suitable for Concordia)
</ParamField>

<Warning>
  Changing from `server` to `static` will break authentication and dynamic features.
</Warning>

## Site Configuration

```javascript astro.config.mjs theme={null}
const siteUrl = process.env.SITE || undefined;

export default defineConfig({
  site: siteUrl,
  base: '/',
  // ...
});
```

<ParamField path="site" type="string" required>
  The production URL of your site. Set via the `SITE` environment variable.

  **Example:** `https://concordia.example.com`
</ParamField>

<ParamField path="base" type="string" default="/">
  The base path for your application. Leave as `/` for root deployment.
</ParamField>

## Integrations

Concordia includes several Astro integrations:

```javascript astro.config.mjs theme={null}
import Icon from 'astro-icon';
import mdx from '@astrojs/mdx';
import Sonda from 'sonda/astro';

export default defineConfig({
  integrations: [
    Icon(),
    Sonda({ server: true }),
    mdx()
  ],
  // ...
});
```

<AccordionGroup>
  <Accordion title="astro-icon">
    Provides icon component support using Iconify collections:

    * `@iconify-json/mdi` - Material Design Icons
    * `@iconify-json/circle-flags` - Country flags
    * `@iconify-json/openmoji` - Emoji icons

    **Usage:**

    ```astro theme={null}
    <Icon name="mdi:account" />
    ```
  </Accordion>

  <Accordion title="Sonda">
    Performance monitoring and analytics integration:

    ```javascript theme={null}
    Sonda({ server: true })
    ```

    Tracks server-side performance metrics.
  </Accordion>

  <Accordion title="MDX">
    Enables MDX support for content pages with embedded JSX:

    ```mdx theme={null}
    import { Card } from '@components/Card.astro';

    # My Article

    <Card title="Example" />
    ```
  </Accordion>
</AccordionGroup>

## Development Settings

### Dev Toolbar

```javascript astro.config.mjs theme={null}
export default defineConfig({
  devToolbar: {
    enabled: true
  },
  // ...
});
```

Enables the Astro development toolbar with debugging tools.

### Source Maps

```javascript astro.config.mjs theme={null}
export default defineConfig({
  vite: {
    build: {
      sourcemap: true
    }
  },
  // ...
});
```

Generates source maps for easier debugging in production.

## Experimental Features

```javascript astro.config.mjs theme={null}
export default defineConfig({
  experimental: {
    failOnPrerenderConflict: true
  },
  // ...
});
```

<ParamField path="experimental.failOnPrerenderConflict" type="boolean" default="true">
  Fails the build if there are prerender conflicts, helping catch routing issues early.
</ParamField>

## Environment-Specific Configuration

You can customize configuration based on the environment:

```javascript astro.config.mjs theme={null}
const isDev = process.env.NODE_ENV === 'development';
const isProd = process.env.NODE_ENV === 'production';

export default defineConfig({
  // Development-only settings
  devToolbar: {
    enabled: isDev
  },
  
  // Production optimizations
  vite: {
    build: {
      sourcemap: isDev,
      minify: isProd
    }
  },
  // ...
});
```

## Complete Configuration Example

Here's the full `astro.config.mjs` used in Concordia:

```javascript astro.config.mjs theme={null}
// @ts-check
import { defineConfig } from 'astro/config';

import node from '@astrojs/node';
import vercel from '@astrojs/vercel';

import Sonda from 'sonda/astro';
import Icon from 'astro-icon';
import mdx from '@astrojs/mdx';

let adapter = vercel();
if (process.argv && process.argv.includes('--node')) {
  adapter = node({ mode: 'standalone' });
}

const siteUrl = process.env.SITE || undefined;

export default defineConfig({
  integrations: [Icon(), Sonda({server: true}), mdx()],
  output: 'server',
  site: siteUrl,
  base: '/',
  adapter,
  redirects: {
    '/': '/fr/'
  },
  i18n: {
    locales: ['fr', 'en', 'ar', 'es'],
    defaultLocale: 'fr',
    routing: {
      prefixDefaultLocale: true
    }
  },
  experimental: {
    failOnPrerenderConflict: true
  },
  devToolbar: {
    enabled: true
  },
  vite: {
    build: {
      sourcemap: true
    }
  }
});
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Environment Variables" icon="key" href="/deployment/environment-variables">
    Configure all required environment variables
  </Card>

  <Card title="Hosting Guide" icon="rocket" href="/deployment/hosting">
    Deploy to production
  </Card>
</CardGroup>