Chapitre 3 : Déploiement

snippet.bash

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

snippet.bash

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

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

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

snippet.bash

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

Ou utiliser un script npm :

snippet.json

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

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

Dans pwa/dist/.htaccess :

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

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

L'application est accessible à :

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

Créer public/manifest.json :

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

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

snippet.bash

npm install vite-plugin-pwa

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

• [ ] 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é

snippet.php

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

Les logs sont dans documents/dolibarr.log.

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 →