# Chapitre 2 : Configuration


## Le fichier appConfig.js

Le fichier `appConfig.js` centralise toute la configuration de l'application. Il est passé au `Provider` de SmartCommon.

```javascript
// src/appConfig.js
export const config = {
    // Mode debug
    debug: import.meta.env.DEV,

    // Configuration API
    api: {
        prefixUrl: import.meta.env.VITE_API_URL,
        timeout: 30000,
        debug: import.meta.env.DEV,
        paths: {
            login: "login",
            logout: "logout",
            refresh: "refresh"
        }
    },

    // Persistance localStorage
    storage: {
        local: ["session", "settings"]
    },

    // État global initial
    globalState: {
        reducers: {
            session: null,
            settings: { lng: "fr" },
            items: []
        }
    },

    // Animations de transition
    pages: {
        "/": { "/settings": "slideLeft", "*": "fade" },
        "*": "fade"
    }
};
```


## Détail des options

### debug

```javascript
debug: import.meta.env.DEV
```

Active les logs de debug dans la console. Utilise la variable d'environnement Vite `DEV` qui est `true` en développement.


### api

Configuration du client HTTP (ky) avec authentification JWT.

```javascript
api: {
    // URL de base pour toutes les requêtes
    prefixUrl: import.meta.env.VITE_API_URL,

    // Timeout en millisecondes
    timeout: 30000,

    // Logs des requêtes en console
    debug: import.meta.env.DEV,

    // Endpoints SmartAuth
    paths: {
        login: "login",      // POST pour authentification
        logout: "logout",    // POST pour déconnexion
        refresh: "refresh"   // GET pour renouveler le token
    }
}
```


### storage

Définit quelles clés de l'état global sont persistées en localStorage.

```javascript
storage: {
    local: ["session", "settings"]
}
```

Avec cette configuration :

- `session` sera sauvegardé dans `localStorage.session`
- `settings` sera sauvegardé dans `localStorage.settings`
- Au rechargement de la page, ces valeurs seront restaurées

**Cas d'usage** :

- `session` : tokens JWT et informations utilisateur
- `settings` : préférences (langue, thème)


### globalState

Initialise l'état global Redux via `useGlobalStates`.

```javascript
globalState: {
    reducers: {
        // Utilisateur connecté (null = non connecté)
        session: null,

        // Préférences utilisateur
        settings: { lng: "fr" },

        // Données métier
        items: [],
        currentItem: null
    }
}
```

Chaque clé devient accessible via `useGlobalStates` :

```javascript
const [session, setSession] = useGlobalStates('session');
const [settings, setSettings] = useGlobalStates('settings');
const [items, setItems] = useGlobalStates('items');
```


### pages

Configuration des animations de transition entre pages (Framer Motion).

```javascript
pages: {
    // Depuis la page "/"
    "/": {
        "/settings": "slideLeft",  // Vers settings : glisse à gauche
        "*": "fade"                 // Vers autres : fondu
    },
    // Depuis toute autre page
    "*": "fade"
}
```

Animations disponibles :

- `fade` : fondu enchaîné
- `slideLeft` : glisse vers la gauche
- `slideRight` : glisse vers la droite
- `slideUp` : glisse vers le haut
- `slideDown` : glisse vers le bas


## Le Provider SmartCommon

Le `Provider` initialise tous les contextes nécessaires :

```javascript
// src/App.jsx
import { Provider } from '@cap-rel/smartcommon';
import { Router } from './components/app/Router';
import { config } from './appConfig';

export const App = () => (
    <Provider config={config}>
        <Router />
    </Provider>
);
```

En interne, le `Provider` encapsule :

```javascript
// Équivalent interne (simplifié)
<LibConfigProvider config={config}>
    <ReduxProvider>
        <I18nextProvider>
            <ApiProvider>
                <GlobalStatesProvider>
                    {children}
                </GlobalStatesProvider>
            </ApiProvider>
        </I18nextProvider>
    </ReduxProvider>
</LibConfigProvider>
```


## Accéder à la configuration

Dans n'importe quel composant :

```javascript
import { useLibConfig } from '@cap-rel/smartcommon';

function MyComponent() {
    const config = useLibConfig();

    console.log(config.api.prefixUrl);
    console.log(config.debug);

    return <div>...</div>;
}
```


## Configuration avancée

### Internationalisation (i18n)

```javascript
export const config = {
    // ...
    i18n: {
        defaultLanguage: 'fr',
        supportedLanguages: ['fr', 'en'],
        debug: import.meta.env.DEV
    }
};
```

### Base de données locale (Dexie)

```javascript
export const config = {
    // ...
    db: {
        name: 'monapp',
        version: 1,
        stores: {
            items: 'id++, name, category',
            logs: 'id++, action, timestamp'
        }
    }
};
```


## Bonnes pratiques

### 1. Utiliser les variables d'environnement

```javascript
// .env.development
VITE_API_URL=http://localhost/dolibarr/modules/monmodule/pwa/api.php

// .env.production
VITE_API_URL=https://production.com/modules/monmodule/pwa/api.php
```

### 2. Séparer les environnements

```javascript
const isDev = import.meta.env.DEV;

export const config = {
    debug: isDev,
    api: {
        prefixUrl: import.meta.env.VITE_API_URL,
        timeout: isDev ? 60000 : 30000,  // Plus long en dev
        debug: isDev
    }
};
```

### 3. Ne pas stocker de données sensibles

```javascript
storage: {
    // OK : données non sensibles
    local: ["session", "settings", "cart"],

    // PAS dans le code : mots de passe, clés API côté serveur
}
```


## Exemple complet

```javascript
// src/appConfig.js
const isDev = import.meta.env.DEV;

export const config = {
    debug: isDev,

    api: {
        prefixUrl: import.meta.env.VITE_API_URL,
        timeout: isDev ? 60000 : 30000,
        debug: isDev,
        paths: {
            login: "login",
            logout: "logout",
            refresh: "refresh"
        }
    },

    storage: {
        local: ["session", "settings"]
    },

    globalState: {
        reducers: {
            // Auth
            session: null,

            // Préférences
            settings: {
                lng: "fr",
                theme: "light",
                notifications: true
            },

            // Données métier
            products: [],
            cart: { items: [], total: 0 },
            currentProduct: null
        }
    },

    pages: {
        "/": {
            "/cart": "slideLeft",
            "/product/*": "slideLeft",
            "*": "fade"
        },
        "/cart": {
            "/": "slideRight",
            "*": "fade"
        },
        "*": "fade"
    },

    i18n: {
        defaultLanguage: 'fr',
        supportedLanguages: ['fr', 'en']
    }
};
```


## Points clés à retenir

1. **appConfig.js** centralise toute la configuration
2. **api** configure le client HTTP avec JWT
3. **storage.local** définit ce qui est persisté
4. **globalState.reducers** initialise l'état global
5. **pages** configure les animations de transition
6. Utiliser **import.meta.env** pour les variables d'environnement


[[:15_training:module5-architecture-smartmaker:structure-projet|← Chapitre précédent]] | [[:15_training:module5-architecture-smartmaker:start|Retour au module]] | [[:15_training:module5-architecture-smartmaker:flux-donnees|Chapitre suivant : Flux de données →]]