Chapitre 3 : Déploiement

Chapitre 3 : Déploiement

1. Variables d'environnement

Développement

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

Production

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

2. Build de production

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/ :

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

Ou utiliser un script npm :

{
  "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 :

<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

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 :

{
  "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 :

npm install vite-plugin-pwa
// 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

// 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 | Retour au module | Module suivant : Fonctionnalités avancées ->

Chapter 3: Deployment