Chapitre 2 : Configuration

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

snippet.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"
    }
};

snippet.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.

Configuration du client HTTP (ky) avec authentification JWT.

snippet.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
    }
}

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

snippet.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)

Initialise l'état global Redux via useGlobalStates.

snippet.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 :

snippet.javascript

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

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

snippet.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 initialise tous les contextes nécessaires :

snippet.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 :

snippet.javascript

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

Dans n'importe quel composant :

snippet.javascript

import { useLibConfig } from '@cap-rel/smartcommon';
 
function MyComponent() {
    const config = useLibConfig();
 
    console.log(config.api.prefixUrl);
    console.log(config.debug);
 
    return <div>...</div>;
}

snippet.javascript

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

snippet.javascript

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

snippet.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

snippet.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
    }
};

snippet.javascript

storage: {
    // OK : données non sensibles
    local: ["session", "settings", "cart"],
 
    // PAS dans le code : mots de passe, clés API côté serveur
}

snippet.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']
    }
};

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

← Chapitre précédent | Retour au module | Chapitre suivant : Flux de données →