LightHouse score for CI

![Build Status](https://travis-ci.org/marco-genova-ntt/lighthouse-score-for-ci)
![Coverage Status](https://coveralls.io/github/marco-genova-ntt/lighthouse-score-for-ci?branch=master)

The goal of this module is to enable the creation of a very simple step for continous integratraion and google lighthouse.(https://developers.google.com/web/tools/lighthouse/)

Scope

The flow is very simple:

* Download the project from github or install via npm
* build the project
* define the web pages array (JSON Array)
* define the file .env
* starts the analysis

prerequiste: Chrome installed on the host machine.

Download from npm

>npm install lighthouse-ci

Clone the project from github

>git clone https://github.com/marco-genova-ntt/lighthouse-score-for-ci.git

Build project

>npm install

>npm run jest

>npm run build

Define .env file

The file _.env_ is managed by node_modules dotenv (https://www.npmjs.com/package/dotenv)

A template to start application follows

``



#Slack token for the slack client, An access token (from your Slack app or custom integration - xoxp, xoxb)

SLACK_TOKEN=xoxb-.....,



#Slack channel identifier, use Web API simulator to extract this value (https://api.slack.com/methods/conversations.list)

SLACK_CHANNEL_ID=C6H41XTRU



#SLACK MODE TYPE (WEB (Incoming webbook, default) or BOT)

SLACK_MODE=WEB



#Base api url, use this for the actual version of api (Only for BOT mode)

SLACK_BASE_API=https://slack.com/api/{method}?token={token}&pretty=1



#Slack Incoming Webhook (@see https://api.slack.com/incoming-webhooks)

SLACK_WEB_HOOK=https://hooks.slack.com/services/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



#Write on AWS (true enable/false disable), guide the usage of .local_storage.json on AWS

AWS_S3_WRITING_ENABLED=true



#AWS S3 Bucket name, to define on your AWS Console S3 (CHANGEIT!!!)

AWS_BUCKET_NAME=test.slackplugin



#AWS base url change the bucket name in the url but don't change the {processID}. from (0.5.1+) the processID is changed from pattern -.html

AWS_S3_TEMPLATE_RESOURCE=https://s3.eu-north-2.amazonaws.com/test.slackplugin/{processID}



#manged by standard mechanism

#AWS_SECURITY (managed by environment variables)

#AWS SECURITY MANAGENT

AWS_ACCESS_KEY_ID=.....

AWS_SECRET_ACCESS_KEY=....



#RESULT SERIES MANAGEMNET

#Where database of the results will be saved during runs

#this configuartion is available for LOCAL and AWS store localtion

SERIES_SERVICE_DATABASE_FILE=./tmp/allseries-database.json



#If true enable the store of the database on AWS S3 using bucket informaton

SERIES_SERVICE_DATABASE_FILE_ON_AWS=true



#SERIES Report on result tred

SERIES_ENABLE_TREND_REPORT=true



#Default templates based on anychart (generated bu plauground of anychart)

SERIES_TEMAPLTE_TREND_FILE=./templates/series/anychart-template.txt



#Save reports in AWS S3 using bucket informaton

SERIES_ENABLE_TREND_REPORT_ON_AWS=true



#When report trend is enabled this properties reports the index template file

SERIES_TEMAPLTE_INDEX_FILE=./templates/series/index.txt



#Sets the env to select a sets of page

LIGHTHOUSE_CI_ENV=qa



#Thresholds definition, the thresholds are in a specific file in the roor of the project

THRESHOLDS_EVALUATION_ENABLED=true





Define pages.json



(V0.3.0+) The paegs are divided for environment, the default environment is _"default"_



{

    "env1" : ['https://www.sample.com',

            'https://www.sample.com/page2?param=1'],

    "env2" : ['https://www.sample2.com',

            'https://www.sample2.com/page2?param=1']

}





Local Storage



The local storage is based on json database to get and set some utilities values (e.g. process identifier to generate unique reports).

Actually the file is fixed: .local_storage.json



(V0.5.0+) In order to support dockerization and idempotention of the execution the file can be saved on AWS. This mechanism is configured by prop:



AWS_S3_WRITING_ENABLED



Chrome Configuration



the file chrome_config.json contains the lighthouse configuration. There's a standard configuration, follows this guide to understando how to personalize: https://github.com/GoogleChrome/lighthouse/blob/master/docs/readme.md



Technological stack



* NodeJS 8+

* Babel 7

* AWS-SDK

* Jest

* Dotenv

* LightHouse score for slack:  https://www.npmjs.com/package/lighthouse-score-for-slack



The project is ES6-based.



$3



I have create a simple app not distributed (actually) to manage the connection between simple bot and slack workspace. 



!Slack App configured



Reference to slack guide: https://api.slack.com/slack-apps



$3



This guide can be very helpful to create a bucket specific for this scenario: https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html



$3



Compile the file lighthouse-thresholds.json in the root of the project.

For every performance index, define the minimun value to pass the test.

The value must be a double value between 0 and 100.



{   

    "thresholds": {

      "performance": 5.0,

      "pwa": 5.0,

      "bestpractices": 5.0,

      "seo": 5.0,

      "accessibility": 5.0

    }

}





Notes



$3



Install Google Shrome Stable, follows this very simple guide: https://allmytechproblems.blogspot.com/2019/02/install-chrome-stable-version-on-centos.html



In the file _chrome_config.json_ add some options, follows working example:



{

    "chromeFlags": [

        "--print-config",

        "--headless",

        "--no-sandbox",

        "--disable-gpu"

    ],

    "emulatedFormFactor": "mobile",

    "disableDeviceEmulation": false,

    "throttlingMethod": "simulate"

}





$3

The application generates reports in a default directory

/_reports





Acutally can not be changed.



$3

Actually the results series report are generated by a simple aproach using a template based on anychart.



In this case We've used a replace in a html page generated by https://playground.anychart.com/.



We've substituted to ready html a placeholder, during report generation the placeholder are substituted by real values.



Example the actual series report:



!Series Report



When The series report is enabled an index.html file is generated in first instance on the file system and, optionally, on AWS S3 (if the report series is enabled to AWS S3 storage).



Example Series Reports Index:



!Series Reports Index



This is the index of AWS S3 web reposistory.

The default web page is based on a template with stack:



* bootstrap

* jquery



$3

My advice is to enable the choioce of oages set directly from docker un command forcing the environment variable:



LIGHTHOUSE_CI_ENV=qa

``

let me say to remove from .env file and force the values from docket command like this:

>docker run -e "LIGHTHOUSE_CI_ENV=qa" lighthouse-slack-ci

Define .env file

#Slack token for the slack client, An access token (from your Slack app or custom integration - xoxp, xoxb)
SLACK_TOKEN=xoxb-.....,

#Slack channel identifier, use Web API simulator to extract this value (https://api.slack.com/methods/conversations.list)
SLACK_CHANNEL_ID=C6H41XTRU

#SLACK MODE TYPE (WEB (Incoming webbook, default) or BOT)
SLACK_MODE=WEB

#Base api url, use this for the actual version of api (Only for BOT mode)
SLACK_BASE_API=https://slack.com/api/{method}?token={token}&pretty=1

#Slack Incoming Webhook (@see https://api.slack.com/incoming-webhooks)
SLACK_WEB_HOOK=https://hooks.slack.com/services/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

#Write on AWS (true enable/false disable), guide the usage of .local_storage.json on AWS
AWS_S3_WRITING_ENABLED=true

#AWS S3 Bucket name, to define on your AWS Console S3 (CHANGEIT!!!)
AWS_BUCKET_NAME=test.slackplugin

#AWS base url change the bucket name in the url but don't change the {processID}. from (0.5.1+) the processID is changed from pattern -.html
AWS_S3_TEMPLATE_RESOURCE=https://s3.eu-north-2.amazonaws.com/test.slackplugin/{processID}

#manged by standard mechanism
#AWS_SECURITY (managed by environment variables)
#AWS SECURITY MANAGENT
AWS_ACCESS_KEY_ID=.....
AWS_SECRET_ACCESS_KEY=....

#RESULT SERIES MANAGEMNET
#Where database of the results will be saved during runs
#this configuartion is available for LOCAL and AWS store localtion
SERIES_SERVICE_DATABASE_FILE=./tmp/allseries-database.json

#If true enable the store of the database on AWS S3 using bucket informaton
SERIES_SERVICE_DATABASE_FILE_ON_AWS=true

#SERIES Report on result tred
SERIES_ENABLE_TREND_REPORT=true

#Default templates based on anychart (generated bu plauground of anychart)
SERIES_TEMAPLTE_TREND_FILE=./templates/series/anychart-template.txt

#Save reports in AWS S3 using bucket informaton
SERIES_ENABLE_TREND_REPORT_ON_AWS=true

#When report trend is enabled this properties reports the index template file
SERIES_TEMAPLTE_INDEX_FILE=./templates/series/index.txt

#Sets the env to select a sets of page
LIGHTHOUSE_CI_ENV=qa

#Thresholds definition, the thresholds are in a specific file in the roor of the project
THRESHOLDS_EVALUATION_ENABLED=true

Define pages.json

(V0.3.0+) The paegs are divided for environment, the default environment is _"default"_

{
"env1" : ['https://www.sample.com',
'https://www.sample.com/page2?param=1'],
"env2" : ['https://www.sample2.com',
'https://www.sample2.com/page2?param=1']
}

Local Storage

The local storage is based on json database to get and set some utilities values (e.g. process identifier to generate unique reports).
Actually the file is fixed: .local_storage.json

(V0.5.0+) In order to support dockerization and idempotention of the execution the file can be saved on AWS. This mechanism is configured by prop:

AWS_S3_WRITING_ENABLED

Chrome Configuration

the file chrome_config.json contains the lighthouse configuration. There's a standard configuration, follows this guide to understando how to personalize: https://github.com/GoogleChrome/lighthouse/blob/master/docs/readme.md

Technological stack

* NodeJS 8+
* Babel 7
* AWS-SDK
* Jest
* Dotenv
* LightHouse score for slack: https://www.npmjs.com/package/lighthouse-score-for-slack

The project is ES6-based.

$3

I have create a simple app not distributed (actually) to manage the connection between simple bot and slack workspace.

!Slack App configured

Reference to slack guide: https://api.slack.com/slack-apps

$3

This guide can be very helpful to create a bucket specific for this scenario: https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html

$3

Compile the file lighthouse-thresholds.json in the root of the project.
For every performance index, define the minimun value to pass the test.
The value must be a double value between 0 and 100.

{
"thresholds": {
"performance": 5.0,
"pwa": 5.0,
"bestpractices": 5.0,
"seo": 5.0,
"accessibility": 5.0
}
}

Notes

$3

Install Google Shrome Stable, follows this very simple guide: https://allmytechproblems.blogspot.com/2019/02/install-chrome-stable-version-on-centos.html

In the file _chrome_config.json_ add some options, follows working example:

{
"chromeFlags": [
"--print-config",
"--headless",
"--no-sandbox",
"--disable-gpu"
],
"emulatedFormFactor": "mobile",
"disableDeviceEmulation": false,
"throttlingMethod": "simulate"
}

$3

The application generates reports in a default directory

/_reports





Acutally can not be changed.



$3

Actually the results series report are generated by a simple aproach using a template based on anychart.



In this case We've used a replace in a html page generated by https://playground.anychart.com/.



We've substituted to ready html a placeholder, during report generation the placeholder are substituted by real values.



Example the actual series report:



!Series Report



When The series report is enabled an index.html file is generated in first instance on the file system and, optionally, on AWS S3 (if the report series is enabled to AWS S3 storage).



Example Series Reports Index:



!Series Reports Index



This is the index of AWS S3 web reposistory.

The default web page is based on a template with stack:



* bootstrap

* jquery



$3

My advice is to enable the choioce of oages set directly from docker un command forcing the environment variable:



LIGHTHOUSE_CI_ENV=qa

``

let me say to remove from .env file and force the values from docket command like this:

>docker run -e "LIGHTHOUSE_CI_ENV=qa" lighthouse-slack-ci