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.

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]