L'installation de nvm
se fait en suivant les instructions du dépot principal de l'outil nvm par creationix creationix/nvm.
Une fois l'environnement installé, installer la dernière version stable de nodejs
:
nvm install v10.16
Pour utiliser cette version:
nvm use v10.16
Installer angular CLI (version LTS 6) et les dépendances requises:
npm install -g @angular/cli@v8-lts
npm install
Vous pouvez lancer le frontend dans deux modes:
ng serve
npm run build:ssr && npm run serve:ssr
Le SSR a été intégré au projet à partir de la commande :
npm run ng add @nguniversal/express-engine --clientProject frontend
NB: L'intégration Leaflet.MarkerCluster a nécessité de déclarer une variable globale L
et d'y importer Leaflet; c'est dans le script server.ts
.
Les modules BrowserTransferState
et ServerTransferState
importés, nous avons créé un couple {clé: valeur}
pour être transféré du serveur au client.
La clé est créée avec la fonction factory makeStateKey :
const PROGRAMS_KEY = makeStateKey("programs");
Le transfert d'état s'effectue avec accesseur et mutateur:
this.programs = this.state.get(PROGRAMS_KEY, null as any);
if (!this.programs) {
/*
code exécuté côté serveur Node, express
qui effectue donc un appel à l'API de GN-Citizen
et génère une capture d'état
*/
this.state.set(PROGRAMS_KEY, programs as any);
} else {
/*
code exécuté côté présentation qui consomme l'état "cristallisé"
transféré depuis le serveur.
*/
}
La redirection de port pourrait se faire au niveau du serveur web / reverse proxy, avec un filtre sur l'entête de requête User-Agent
La fonctionnalité i18n a été intégrée avec @ngx-i18nsupport.
L'interface est paramétrée par défaut en langue française.
La commande suivante met à jour les fichiers de traduction (ajout/suppression de traductions symbolisées par l'argument i18n
dans les templates.
npm run extract-i18n
Les fichiers de traduction sont dans le répertoire frontend/src/i18n
.
Mettre à jour les nouvelles traductions (texte dans les balises <target></target>
des fichiers localisés messages.fr.xlf
et messages.en.xlf
.
Préparer la distribution avec:
npm run ng build -- --prod
ou:
npm run ng build -- --configuration=en --prod
pour une version en langue anglaise.
Tout est contenu dans le répertoire frontend/dist
, qu'il faut copier sur la plateforme acceuillant le service.
/etc/apache2/sites-enabled/citizen.conf
# Configuration GeoNature-citizen
Alias /citizen /home/utilisateur/citizen/frontend/dist/browser
<Directory /home/utilisateur/citizen/frontend/dist/browser>
Require all granted
AllowOverride All
<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ".*" "index.html" [QSA,L]
</IfModule>
</Directory>
<Location /citizen/api>
ProxyPass http://127.0.0.1:5002/api
ProxyPassReverse http://127.0.0.1:5002/api
</Location>
tail -f /var/log/supervisor/citizen.log
tail -f ~/citizen/var/log/gn_errors.log
sudo tail -f /var/log/apache2/{error,access,other_vhosts_access}.log
~/.ssh/config
Host nom_du_raccourci
Hostname son_addresse_ip
User mon_user
LocalForward 5433 localhost:5432
Se logguer en SSH (ssh nom_du_raccourci
) sur l'hôte distant va opérer une redirection de port et rendre la BDD distante accessible sur le port local 5433
pour un client PostgreSQL.
Il suffit alors d'ajuster les paramètres de psql
en CLI ou ceux de l'assistant de configuration de PgAdmin pour son interface graphique.