Feat(Job): new job lighthouse

## 🔧 Jobs customization

### 🖌 Global

Each jobs of the hub can be customized. To do it, you have to include the job

URL as usual and, in addition, override the options you want to customize.

!!! tip

    In this way, you can override all Gitlab jobs parameters. All parameters

    are described in [Gitlab

    documentation](https://docs.gitlab.com/ee/ci/yaml/){:target="_blank"}.

For example, if you want to use the [trivy_image](/jobs/dynamic_tests/trivy_image/) job and

customize it by:

    TRIVY_SEVERITY: "CRITICAL"

```

!!! tip

    In this way, you can override all Gitlab jobs parameters. All parameters

    are described in [Gitlab

    documentation](https://docs.gitlab.com/ee/ci/yaml/){:target="_blank"}.

### 🐳 Advanced: `services`

You may want one of your job to interact with a container instance (API,

database, web server...) to work. GitLab has an option to run a container next

to a job: [`services`](https://docs.gitlab.com/ee/ci/yaml/#services).

To use this option, you must have access to an image of the container you want

to run as a service. For example, if you are using our

[docker_build](https://r2devops.io/jobs/build/docker_build/) job to build an

image of your application, and you want to test this image using the

[nmap](/jobs/dynamic_tests/nmap/) job, just add the following configuration in

your `.gitlab-ci.yml` file:

!!! info

    * The `name` option must contain your image name and tag or an image name from [Docker Hub](https://hub.docker.com){:target="_blank"}.

    * The `alias` option permits to the job to reach your application using a name. This name

    must be the same that the one specified inside the job target's variable.

    * You may also run some other services like a database depending on your application needs.

```yaml

nmap:

  services:

    - name: $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA

      alias: app

```

# 🗽 Lighthouse

## Description

This job analyzes a remote website (or a local web service) and gives you a report about the good and the bad points, see [HTML report](#html-report).

[Lighthouse](https://developers.google.com/web/tools/lighthouse){:target="_blank"} is a tool developed by Google which analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.

## How to use it

1. Add the corresponding URL to your `.gitlab-ci.yml` file (see [Getting

   started](/use-the-hub)). Example:

    ```yaml

    include:

      - remote: 'https://jobs.r2devops.io/lighthouse.yml'

    ```

2. Choose a target

    !!! note

        This job can be run on external services or by running a container

        instance of your website. **You need to choose between two following

        options**.

    * Option 1: external service

    Add the site IP or the domain name of the service in `LIGHTHOUSE_TARGET` variable 

    (see [jobs customization](http://localhost:8000/use-the-hub/#jobs-customization))

    *  Option 2: container instance

    Add the target container instance as a service (see

    [Container instance as Service](/use-the-hub/#container-instance-as-service)) and 

    set variable `LIGHTHOUSE_TARGET` as the name of your container.

3. If you need to customize the job (stage, variables, ...) 👉 check the [jobs

   customization](/use-the-hub/#jobs-customization)

4. Well done, your job is ready to work ! 😀

## Job details

* Job name: `lighthouse`

* Docker image:

[`justinribeiro/lighthouse`](https://hub.docker.com/r/justinribeiro/lighthouse)

* Default stage: `dynamic_tests`

* When: `always`

### Variables

| Name | Description | Default |

| ---- | ----------- | ------- |

| `LIGHTHOUSE_TARGET` <img width=100/> | Web application URL <img width=175/>| ` ` <img width=100/>|

| `OUTPUT_NAME` | Name of report file | `lighthouse` |

| `OUTPUT_FORMAT` | Format of report file (`json`, `csv`, `html`) | `html` |

| `OUTPUT_LOCALE` | Language of report file | `en` | 

| `ADDITIONAL_OPTIONS` | Variable to add custom options (see [options](https://github.com/GoogleChrome/lighthouse#cli-options){:target="_blank"}) | ` ` |

### Audit configuration

Lighthouse allows you to custom audits performed onto your service. See [Lighthouse configuration](https://github.com/GoogleChrome/lighthouse/blob/master/docs/configuration.md){:target="_blank"} for more details about it.

### HTML Report

By default, this job will export the data generated by *Lighthouse* in an HTML file as an [artifact](#artifacts).

This report will contain everything you need to know to improve your website's performances, see [gallery](#gallery).

### Artifacts

Depending on the content of the variable `OUTPUT_FORMAT`, the job will put in artifact the expected format (default: `HTML`).

To see the artifact, you must go in the pipeline content and go to the tab `Jobs`. At the right of the job `Lighthouse` you will find a button to download the artifact.

 No newline at end of file

name: lighthouse

description: A simple job to do various tests on a site using Google Lighthouse

default_stage: dynamic_tests

icon: 🗽

maintainer: Protocole

license: MIT

stages:

  - dynamic_tests

lighthouse:

  image: justinribeiro/lighthouse

  stage: dynamic_tests

  variables:

    LIGHTHOUSE_TARGET: "https://go2scale.io"

    OUTPUT_NAME: "lighthouse"

    OUTPUT_FORMAT: "html"

    OUTPUT_LOCALE: "en"

    ADDITIONAL_OPTIONS: ""

  script:

    # Put in full lowercase OUTPUT_FORMAT to avoid problems

    - export OUTPUT_FORMAT=$(echo ${OUTPUT_FORMAT} | tr '[:upper:]' '[:lower:]')

    - export ADDITIONAL_OPTIONS="--output ${OUTPUT_FORMAT} --output-path ./${OUTPUT_NAME}.${OUTPUT_FORMAT} ${ADDITIONAL_OPTIONS}"

    - export ADDITIONAL_OPTIONS="--locale ${OUTPUT_LOCALE} ${ADDITIONAL_OPTIONS}"

    - lighthouse ${ADDITIONAL_OPTIONS} --chrome-flags="--headless --disable-gpu" ${LIGHTHOUSE_TARGET}

  artifacts:

    paths: 

        - ${OUTPUT_NAME}.${OUTPUT_FORMAT}

    expose_as: "Lighthouse Report"

 No newline at end of file