Skip to main content

Using Lighthouse with Node CLI

Last week in my blog i mentioned working on integrating Lighthouse CI into our course project. The goal was to provide a tool for contributors working on the front-end side of the project. With lighthouse, our contributors could run some diagnostics test to know which parts of the front-end could be improved upon.

So for the last week, I have been reading documentation and blogs/articles for lighthouse ci. One of the things i picked up was that for a future project i could use lighthouse ci and integrate it with my server, and also i can use Github Actions to automatically run diagnostics and produce reports.

But this wasn't the solution we needed for our course project. So i came across the CLI documents. With the Lighthouse CLI, I would be able to set up it up and test the files locally.

Using npm i installed the API:
npm install -g @lhci/cli
Afterward, i used collect the run the diagnostics tests and store lighthouse reports in the .lighthouseci/ folder. Using the command-line flag --staticDistDir allowed for us to specify where the HTML files to run the test are located.
lhci collect --staticDistDir=./src/frontend
 After running the command, the reports are generated as JSON files in the local file. This wasn't what we wanted as we were looking for HTML generated files. Uploading the reports using the upload command wasn't an option for us either. Uploading would generate URLs for us to view the reports.

So after consulting my course instructor, we came to the conclusion that i would instead do some research with Lighthouse and scrap the work on Lighthouse CI.

So for the following week, i will be trying to figure out how we could use Lighthouse.


Comments

Post a Comment

Popular posts from this blog

Taking on new technology

In my last week's blog, I talked about the two objectives I would take on during November. In the middle of working on the contributions, I decided to change my issue for the internal open source project. I'm hoping to continue with this issue for next pull request I have to submit for my course. As you know, the external open source project I chose to contribute to was vscode . In the beginning, when i saw this issue , i thought this would be an uncomplicated and straightforward issue to work on within a big open source project. Before i forked the clown, i took a good look at the documents they had to just get a sense of how to contribute to the project and do the simple tasks of running and testing. After cloning, i had an issue running the project, this is where i spent some good time reading the documentation again, but i was just having a hard time running the project. I managed to get it running after a few reads.  Thanks to another contributor i had a hint of where
Post a Comment
Read more

Steps Into Open Source

Visual Studio Code is the project I plan to use to help me get involved within the open source community. Developed by Microsoft, it has become one of the most popular source-code editor out there. An editor with beneficial features built in such as: ·            Debugging ·           IntelliSense ·           Git source control ·           Integrated terminal ·           Extension marketplace Plus there’s so much more that I haven’t mentioned. The application is written in Typescript and supports Windows, OS and Linux. During my internship I came across the release notes of Visual Studio Code for the month of August. Out of curiosity I quickly scanned the notes and reached the bottom of the page. I was amazed at the number of contributors there were helping Visual Studio Code become a better application. I also realized that there are other developers that are part of a community I had never knew about. Taking the Open Source Development course offered
Post a Comment
Read more

Material Design Troubles?

During the first week of Hacktoberfest, it was very challenging for me to find an open-source projects where I could contribute to. After learning how to define better search criteria using GitHub keywords, I came to a project called React Budget App developed by benhalverson. The developer had posted a live version of the application where I spent my time and examined how the application worked. After playing with the application, I knew this was something I could help contribute too. After forking the project and getting the issue assigned to me, I spent a few days tackling the issue. I faced many bumps which I will explain about them further below but I managed to accomplish what the developer had requested in the end. The Issue The issue that was raised by the developer was that there was no User Interface to the application and it looked kinda dull. I took upon myself to start designing and implementing a better-looking feature UI to give the user a better experience with t
Post a Comment
Read more