Bitbucket custom pipe to send lighthouse report to slack
So the story started when our lead developer Slim Jaâbiri introduce me to the lighthouse and he asked me to implement it into our CI but since we are using bitbucket pipeline, I did not really find any official image to use especially when it comes to sending the report to our slack channel, I tried two workarounds
It was about just implementing lighthouse API and the developer can just check the pipeline result but at some point, it was really boring and not really intuitive, since the developer needs to check every time the pipe and I was planning to write a second part about just sending the file via slack API, you can check my article about it here
It was about just mirroring our bitbucket pipeline to GitHub and write GitHub actions using their awesome images marketplace, I was not as really satisfied; it is a kind of “dirty hack ”
So when I was searching I find this awesome article that shows how to run a lighthouse nodejs script then it parses the report and sends it to slack. So I was like wait 😅 I can use it to build a custom pipe like you can see here in https://support.atlassian.com/bitbucket-cloud/docs/write-a-pipe-for-bitbucket-pipelines/
Adapt code to the existing website
The code takes as variables
- Slack webhook
- URLs to test
but wait! 😤 our website’s first page was a login so I add it puppeteer to fake it and test the rest of the URLs ( all you need is to log in once then just keep going) and now as variables I have
- slack webhook
- URLs to test
- First page ( since it is our gate to the website )
The last thing to modify with the code was adding URLs as variable environment and since we can have a lot I put this variable as an array and parse it then loop it so we can test all the URLs like this
The URLS env variable was like this in the variables of custom pipe
URLS = https://example.com/iam,https://example.com/your, https://example.com/father
all I have to do after that is keep going with the bitbucket custom pipes tutorial and make the Dockerfile
Third line: we install chromium since both lighthouse and puppeteer need to launch a chrome instance to test the website
Important: flags for launching chrome in Dockerfile needs to be like this or you will have a lot of errors and you will be lost
I complete the pipe.yml that we can call the config file of the custom pipe where we will put our variables, information about the author ….
All I need to do after is just to write my pipeline and call the custom pipe
script:- pipe: docker://USER/IMAGE:tag variables: SLACK_WEBHOOK: $SLACK_WEBHOOK pass: $pass user: $user FIRST_PAGE: "https://exmaple.com/login" URLS: https://example.com/iam,https://example.com/your, https://example.com/father
Don’t forget to create your slack application.
I am working into contributing this pipe to the official bitbucket images marketplace so stay tuned
For any help DM me.
Peace from Tunisia 🐧
by the author.