chieftan frontend

Chieftan Frontend

Une application Web Aurelia qui consomme l'API Chieftan pour l'automatisation des tâches

Commencer

Pour obtenir un environnement de développement configuré, vous aurez besoin de Node.js installé sur votre machine locale. Vous pouvez le télécharger à partir d'ici.

Une fois cela fait, clonez le référentiel Chieftan et exécutez npm install pour installer les différentes dépendances requises par Chieftan.

Développement

L'environnement de développement est construit autour de WebPack avec un rechargement de module chaud activé, permettant des mises à jour (proches) en temps réel des feuilles de style et du code (si elle n'a pas encore été exécutée) sans un rechargement de page. Vous pouvez démarrer le serveur de développement en exécutant npm run server:dev à partir du dossier du projet, puis en accédant http://localhost:3002 dans votre navigateur.

Déploiement

Le déploiement implique la création d'un package de production de l'application, puis la mise en place du contenu du dossier dist sur votre serveur. Pour construire le package de production, exécutez simplement npm build et attendez que WebPack se termine.

Si vous souhaitez activer les rapports d'erreur Sentry pour les erreurs Frontend, vous devez définir la variable d'environnement SENTRY_DSN dans un DSN public Sentry. Vous pouvez également marquer la version de version en définissant la variable d'environnement VERSION .

Exemple de construction de script

SENTRY_DSN= " https://[email protected]/1 " VERSION= " $( git rev-parse HEAD ) " npm run build

Ce script de construction étiquetera la version en utilisant le GIT SHA actuel et configurera les rapports d'erreur Sentry.

Belles URL

Il convient de noter que, si vous souhaitez utiliser l'API HTML5 Push State pour les URL belles, vous devrez configurer votre serveur Web pour servir le fichier index.html pour tous les 404.

Avec Nginx, cela peut facilement être accompli en utilisant la directive try_files .

Exemple de configuration Nginx

 server {
  listen :80 default;
  hostname chieftan.emss.co.za;

  root /var/www/chieftan/dist;

  # Serve the frontend
  location / {
    try_files $url $url.html index.html;
  }

  # Pass API requests to the application instance (basic)
  location /api {
    proxy_pass http://127.0.0.1:8000;
  }
}

Images docker

Vous pouvez également déployer le frontend Chieftan à l'aide de Docker, pour construire l'image exécutant simplement npm build && docker build . Pour créer une image de conteneur avec le dernier package d'application compilé.

Ce conteneur est basé sur nginx:alpine , le rendant très léger, et écoutera sur le port 3000 par défaut. Vous pouvez suivre les instructions sur la page d'image Nginx Docker pour la configurer différemment, ou la placer derrière un proxy inverse dans les déploiements de production.