Client - LLLE

Projet client du backoffice LLLE

Install

In order to install the project, make sure you have installed the followings :

• NodeJS
• Yarn
• Docker / Docker Compose
• VSCode Editor (or the one you prefer), with at least ESLint and Prettier extensions

You can then clone the app repository and install dependencies:

$ git clone https://forge.grandlyon.com/web-et-numerique/llle_project/backoffice-client.git
$ cd backoffice-client

Local usage

Before launching the application, ensure you've properly filled the .env file according to the template. If needed please refer to a team member.

In order to launch the projet in local with the backend working launch the following command

yarn local-up

This command will launch the app from the docker-compose.local.yml file, which will launch 3 docker images and start the react app with yarn start

• The backend Go app, from the image located on its GitLab repository
• The mongo Database, from the DockerHub image
• The Ngnix server with a local configuration located in nginx/site.conf

To stop it properly use

yarn local-down

This app runs in https, such as the backend, to access it go on https://localhost/ Also make sure you have HTTPS env variable set to true. Do not use the app with the port 3000, you won't be able to login.

⚠️ If you are launching the project from a Linux OS : Make sure to uncomment the commented lines in the docker-compose.local file. Otherwise, you you won't be able to access your machine's localhost from the docker container.

Backend and Database

In order to get Backend documentation, please refer directly to the backend project

Nginx

The nginx server redirects https requests from frontend to the backend on port 1443.

It has two configuration files :

• nginx/site.conf, used for local development
• nginx/site.prod.conf, used for production

The nginx server needs local ssl certificates in order to run an interact with backend, these certificates are present in the project.

CI/CD

This app has a gitlab CI/CD pipeline you can find in the .gitlab-ci.yml file. On the dev branch and on merge requests, the pipeline will run a build stage and a quality stage, which is a Sonarqube quality check. On dev and master branches, the pipeline will run a docker image build that you can find in the GitLab container registry.

Editor

This app uses Draft.js Wysiwyg editor for more information checkout its (documentation page)[https://draftjs.org/docs/getting-started] For more advanced documentation about editor customization, please checkout the (react draft wysiwig page)[https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp]

Environment Variables

There is a template.env file in this project, however you can ask one the developpers to get a ready-to-use .env file.

• IMAGE_FOLDER: this variable specify the folder where ecogestures images are located. By default, you can place this folder at the same level as your project for a local usage. (not inside the project). For alpha, rec/prod environment, make sure the path indicated in docker-compose volumes correspond with the location of the image file on the server.

• MOCK_OAUTH2: Set this variable to true while in local, so the OAuth2 dance will be mocked by backend and you will be able to login to your application.