Démarrer le projet

8 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.

# [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'
    }]
  },

  ...
};