---
title: "Chapitre 3 : Déploiement"
weight: 690
---

# Chapitre 3 : Déploiement

## 1. Variables d'environnement

### Développement

```bash
# mobile/.env.development
VITE_API_URL=http://localhost/dolibarr/custom/monmodule/pwa/api.php
```

### Production

```bash
# mobile/.env.production
VITE_API_URL=https://mondomaine.com/custom/monmodule/pwa/api.php
```

## 2. Build de production

```bash
cd mobile

# Installer les dépendances
npm install

# Build de production
npm run build
```

Les fichiers sont générés dans `mobile/dist/`.

## 3. Déployer les fichiers

Copier le contenu de `mobile/dist/` vers `pwa/dist/` :

```bash
# Depuis le dossier mobile/
cp -r dist/* ../pwa/dist/
```

Ou utiliser un script npm :

```json
{
  "scripts": {
    "build": "vite build",
    "deploy": "vite build && cp -r dist/* ../pwa/dist/"
  }
}
```

## 4. Structure finale

```
monmodule/
├── pwa/
│   ├── api.php
│   └── dist/
│       ├── index.html
│       └── assets/
│           ├── index-abc123.js
│           └── index-def456.css
└── ...
```

## 5. Configuration serveur

### Apache (.htaccess)

Dans `pwa/dist/.htaccess` :

```apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /custom/monmodule/pwa/dist/

  # Rediriger vers index.html pour le routage React
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>

# Cache des assets
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
</IfModule>
```

### Nginx

```nginx
location /custom/monmodule/pwa/dist/ {
    try_files $uri $uri/ /custom/monmodule/pwa/dist/index.html;

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
```

## 6. Accès à l'application

L'application est accessible à :

```
https://mondomaine.com/custom/monmodule/pwa/dist/
```

## 7. PWA (Progressive Web App)

### Manifest

Créer `public/manifest.json` :

```json
{
  "name": "Mon Application",
  "short_name": "MonApp",
  "description": "Description de l'application",
  "start_url": "/custom/monmodule/pwa/dist/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1976d2",
  "icons": [
    {
      "src": "images/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
```

### Service Worker (optionnel)

Pour le mode offline, utiliser `vite-plugin-pwa` :

```bash
npm install vite-plugin-pwa
```

```javascript
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'Mon Application',
        short_name: 'MonApp',
        theme_color: '#1976d2'
      }
    })
  ]
});
```

## 8. Checklist de déploiement

- [ ] Variables d'environnement de production configurées
- [ ] Build exécuté sans erreur
- [ ] Fichiers copiés dans pwa/dist/
- [ ] .htaccess configuré (Apache)
- [ ] API accessible (test avec curl)
- [ ] Application accessible dans le navigateur
- [ ] Login fonctionnel
- [ ] HTTPS activé

## 9. Debug en production

### Logs Dolibarr

```php
// Dans un controller
dol_syslog("Debug: " . json_encode($payload), LOG_DEBUG);
```

Les logs sont dans `documents/dolibarr.log`.

### Console navigateur

En production, les erreurs JavaScript sont visibles dans la console du navigateur (F12).

[← Chapitre précédent](/training/module9-integration/frontend) | [Retour au module](/training/module9-integration) | [Module suivant : Fonctionnalités avancées ->](/training/module10-fonctionnalites-avancees)