classic-site

IdeSYS 2016

Ce depôt contient le code source du site Internet d'IdéSYS 2016 réalisé par Antoine Chalifour.

Prérequis

L'installation du site nécessite un ensemble de prérequis afin de fonctionner:

• Node.js et npm doivent être installés
• pm2 doit être installé (pour le déploiement)

Installation de Node.js & npm

Node.js est un runtime Javascript permettant l'implémentation de serveurs web (entre autres) en Javascript. Pour l'installer, exécuter les commandes suivantes dans un terminal:

• curl -sL https://deb.nodesource.com/setup_4.x | sudo bash -
• sudo apt-get install nodejs

Installation de pm2

pm2 est un outil de déploiement d'application Web réalisées avec Node.js. Il permet notamment de relancer les serveurs automatiquement en cas de crash, de lancer les serveurs en arrière plan, de les monitorer,...

pm2 est lui même écrit en Javascript et s'installe donc globalement sur le système en utilisant la commande suivante: sudo npm install -g pm2.

Lancement du serveur

Le lancement du serveur se fait en plusieurs temps:

1. Installation des dépendances: npm install
2. Création d'un fichier de configuration: copier le fichier lib/config/config.sample.js dans lib/config/config.production.js et remplacer les variables à un environnement de production
3. Compilation des assets front-end: npm run front:build
4. Lancement du serveur Node en production: pm2 startOrReload process.json

Il convient de ré-exécuter ces commandes dès que le serveur doit être mis à jour.

Lancement d'un serveur de développement

1. Installation des dépendances: npm install
2. Création d'un fichier de configuration: copier le fichier lib/config/config.sample.js dans lib/config/config.dev.js et remplacer les variables à un environnement de dev
3. Lancement du serveur webpack de développement: npm run front:dev
4. Lancement du serveur node de développement: npm run serve:dev

Le site devient alors accessible sur http://localhost:3000.

Architecture du serveur

Le code source est organisé de la manière suivante:

• data/ contient l'ensemble des données "dynamiques" du site: membres, compétences,... C'est le contenu de ce fichier qu'il faudra modifier afin de changer l'affichage du site.
• lib/ contient le code source du serveur
• public/ contient les fichiers publiques: images, pdfs,...
• src/ contient le contenu du site non compilé. C'est ces fichiers qu'il faut modifier pour changer les fonctionnalités du site.
• views/ contient le code Jade de différentes pages du site.

Technologies et ressources

Node.js

Node est un runtime Javascript permettant de programmer en JS en dehors du navigateur. Il est possible d'écrire des scripts, des serveurs webs, des applications de bureau,... Le serveur est disponible dans le dossier lib/.

• Site officiel
• Tutorial FR
• Express.js

Jade (Pug)

Jade est un moteur de template se compilant en HTML. Les templates du site sont réalisés en Jade et sont disponibles dans le dossier views/.

• Github
• Tutorial

Webpack

Webpack permet de compiler un ensemble d'assets dans un uniquer fichier qui sera alors servi au navigateur. Webpack permet donc de "paqueter" css, javascript, images,... dans un unique fichier.

Le fichier de configuration de webpack utilisé est webpack.config.js. Le code contenu dans le dossier src/ est compilé en utilisant cette configuration.

• Site officiel
• Tutorial
• Guide