Un kit de démarrage est fourni sur Github.
Ce kit contient une base pour démarrer tout projet Focus.
git clone git@github.com:KleeGroup/focus-starter-kit.git
mv focus-starter-kit nouveau_nom_de_projet
cd nouveau_nom_de_projet
rm -rf .git
npm install
npm run watchLe kit de démarrage suggère une arborescence type pour la partie client d'une application web. Cette arborescence est détaillée par la suite.
.
├── app Dossier principal de l'application
| ├── assets Fichiers statiques
| | ├── img
| | ├── fonts
| | └── index.html
| ├── config Configuration du client
| | ├── domain Définition des domaines
| | ├── entity-definition Définition des entités
| | ├── scopes Définition des scopes de recherche
| | └── server Configuration des routes serveur
| ├── i18n Traductions
| | ├── en-GB Anglais
| | ├── fr-FR Français
| | ├── generated Généré par le serveur
| | ├── .eslintrc
| | └── index.js
| ├── initializer Initialisation de l'application
| | ├── definition-initializer.js
| | ├── domain-initializer.js
| | ├── index.js
| | ├── layout-initializer.js
| | ├── query-store-initializer.js
| | ├── reference-list-initializer.js
| | ├── translation-initializer.js
| | └── user-initializer.js
| ├── router Configuration du routeur client
| | ├── home-router.js
| | ├── index.js
| | └── search-router.js
| ├── services Services client
| | ├── index.js
| | ├── reference.js
| | └── search.js
| ├── views Vues ReactJS
| | ├── common
| | | ├── cartridge-search.jsx
| | | └── summary-search.jsx
| | ├── home
| | | ├── application-title.jsx
| | | └── index.jsx
| | └── menu
| | | └── index.jsx
| ├── application.js
| ├── index.js
| └── legacy.js
├── scripts Scripts applicatifs
| └── install.js Script de post installation npm
├── vendor Librairies inclues dans la build BrunchJs
| ├── awesomplete.css
| ├── awesomplete.js
| ├── i18next.js
| ├── lodash.js
| └── material-icons.css
├── .eslintrc Configuration du linter ESLint
├── .gitignore Configurationd de Git
├── .npmrc
├── README.md README présenté par Github
├── brunch-config.js Configuration de BrunchJs
└── package.json Manifeste du projet
Le dossier assets contient l'ensemble des fichiers qui seront recopiés à la racine du serveur Web. Ils sont recopiés tels quels et sont donc directement accessibles à la racine du site.
Ce dossier contient l'ensemble de la configuration de base de l'application.
Les domaines sont définis dans le sous-dossier domain. Ils définissent la manière dont les domaines seront exploités dans les champs du form.
Le dossier entity-definition est principalement généré par le serveur, et permet de définir le modèle de données de l'application.
Les scopes de la recherche sont définis dans le dossier scopes.
Finalement, l'ensemble des routes du backend sont définies dans le dossier server. C'est ici que les services viennent chercher les routes à adresser lorsque le client effectue des requêtes vers le serveur.
Ce dossier contient l'ensemble des données d'internationalisation de l'application. Les traductions y sont regroupées, référencées par des clés de type parent.child.prop.etc....
Le lancement de l'application se déroule dans ce dossier. L'ensemble des domaines, des définitions y sont chargées. Les traductions sont initialisées, le layout de page est mis en place, les droits utilisateurs sont définis, et les listes de référence sont mises en place.
Le routage client est configuré à travers le contenu de ce dossier. Il est possible de découper le routage à travers différents fichiers, chacun traitant une partie du routage.
C'est dans ce dossier que l'on retrouve l'ensemble des composants ReactJS spécifiques à l'application.