Démarrer le projet

10 min

Démarrer le projet

Initialiser les variables d'environnement

cp .env.dist .env

Démarrer le server (le lancement du serveur est necessaire pour permettre la bonne generation des données graphql)

yarn server:dev

Générer les vues

yarn build:views

Pour finir démarrer le client

yarn front:dev

Ou démarrer avec makeFile

Vous aurez besoin de votre clef NPM pour pouvoir effectuer cette action. (cf. Documentation d'installation de la clef NPM)

# [1] run docker and server
make up
  
# [2] to another terminal, run front app
yarn front:dev

Les variables d'environnement

Les variables obligatoires :

Variable	Description
PORT	Définit le port du server graphql
GRAPHQL_WS_URL	Contient l'URL du web socket server graphql pour les subscriptions graphql. Doit être définit comme suit : ws://localhost:<PORT>/graphql
PUBLIC_URL	Contient l'URL publique de l'application
MONGO_DB_URL	Définit l'URL de la base de données mongo
ROOT_DIR	Définit le path root dans lequel sera ajouté notamment le dossier des views générées (variable d'environnement liée à la dépendance @fasstech/oip-tools)
TOKEN_READONLY_OIP_API	Définit la clé readonly OIP API (variable d'environnement liée à la dépendance @fasstech/oip-tools)
API_KEYS	Doit être définit par la concaténation des deux variables API_USER_ID et API_KEY des fichiers .env.dev.webpack ou .env.prod.webpack selon l'environnement comme suit : <API_USER_ID>:<API_KEY>
SESSION_SECRET	à spécifier
JWT_SECRET	à spécifier
SESSION_CHECKING_MAX_AGE	Doit être définit pour gérer la durée de validité d'une session.
SESSION_CHECKING_DISABLED	Optionnel : Si définie a true permet de désactiver la validité d'accès à un projet par la session.

Récupérer la valeur d'une variable d'environnement depuis le front

Définissez la liste des variables d'environnement autorisées à être récupérées depuis le front dans le fichier app.config.mjs

export default {
  allowedEnvKeys: ['FOO', 'BAZ']
};

Depuis un composant React wrappé par le HOC withProcess, la méthode getEnvironmentVariable permet de fetch la valeur d'une variable d'environnement autorisée. La méthode est exposée depuis la propriété processHandlers

Exemple :

import withProcess from '@@app/withProcess';

const Home = ({ processHandlers }) => {
  ...
  
  useEffect(() => {
    processHandlers.getEnvironmentVariable('FOO').then((data) => {
      console.log(data);
    }).catch(err => {
      console.error(err);
    });
  }, []);
  
  ...
};

export default withProcess(Home);

Signature de l'endpoint :

GET /environment/vars?key=ENV_KEY

RESPONSE:
-------------------------
{
  "value": "hello world!"
}
-------------------------

Fichier webpack.dev.js

la propriété port ligne 16 doit contenir la même valeur du port définit dans la variable d'environnement PUBLIC_URL. Valeur par défaut : 8000
la valeur de la propriété target ligne 21 doit contenir l'URL avec la même valeur du port définit par la variable d'environnement PORT. Valeur par défaut : http://localhost:5500

...

module.exports = {
  ...

  // Spin up a server for quick development
  devServer: {
    compress: true,
    port: 8000,
    historyApiFallback: true,
    hot: true,
    proxy: [{
      context: ['/icon', '/image', '/ocr', '/file', '/graphql', '/graphqlwsurl', '/u', '/document', '/exchanges', '/upload', '/logo', '/login', '/oauth2', '/process', '/project'],
      target: 'http://localhost:5500'
    }]
  },

  ...
};