README.md

# 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:

```sh
$ 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

```bash
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

```bash
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.

> :warning: **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](https://forge.grandlyon.com/web-et-numerique/llle_project/backoffice-server)

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