Magento PWA Studio Lighthouse server

07 Jan 2020 in Magento, Pwa, Studio, Travis, Lighthouse, Heroku, Ci/cd

Magento + PWA Studio = High Performance! OOTB (Out Of The Box) ;-) But please keep in mind that every custom theme/layout/template or whatever style you prefer to implement could have some minor or major drawbacks in regards to web performance. Making sure your Magento PWA still fires up when requesting a page is pretty important.

So unless you have not read my previous blog on how to build a Lighthouse server, please do before you continue. Or continue this one and switch back on some of the tips and tricks from the previous one if needed ;-).

When it comes to using Google Lighthouse Server I think it’s possible to use two approaches.

Basic - Using a CI server (Travis CI, Circle CI, Jenkins, AWS CodeBuild etc…) and testing your URL(s) remotely.
Advanced - Using a CI server (Travis CI, Circle CI, Jenkins, AWS CodeBuild etc…) and testing your internally build URL(s).

For this blog, I prefer addressing the “Basic” version for now. Maybe later I will create an “Advanced” version as well. The main reason for the “Basic” is that I like to test the live “realtime” public-facing version, running on a production environment. Compare to the “Advanced” version it shows the real performance metric on the actual speed of your application.

The recipe is really simple, we need a PWA Studio codebase, Lighthouse Server, Travis CI, Github account, .travis.yml and lighthouserc.yml.

And keep in mind always Design for Performance!

Summary Steps

Install lighthouse-ci locally
Signup and create .travis.yml file
Create lighthouserc.yml with the following config
Create LHCI_GITHUB_APP_TOKEN and add it to env in Travis
Signup at Heroku
Install Heroku CLI
Create Heroku config and push the app to production
Run lhci wizard
Add LHCI_TOKEN to env in Travis
Update serverBaseUrl in lighthouserc.yml
Push code to Git and let the magic do its thing!

1. Install lighthouse-ci locally

Install Lighthouse CI, easy to run a manual test run and configure the LCHI Wizard for later use.

npm install -g @lhci/cli@0.3.x

If not already, signup for Travis-ci and connect the Travis CI Github Apps to your Github profile repository. (Detailed config is beyond the scope of this blog if you need more help on how to setup Travis CI or any other CI tool please search the internet ;-) )

Once Travis CI is connected to your Github account create .travis.yml in your root directory from your repository and copy the following config.

language:
  - node_js # Node 10 LTS or later required
node_js:
  - '10'
addons:
  chrome: stable # make Chrome available
before_install:
  - npm install -g @lhci/cli@0.3.x # install LHCI
script:
  - echo "Notice - no test specified" # skip 'npm test' and run LHCI
after_success:
#  - lhci autorun --upload.target=temporary-public-storage # run lighthouse CI against your static site
  - lhci autorun

Notice some tweak options in the config if you need to run it to “temporary public storage”. The echo “Notice - no test specified” row is to skip the npm test command and automatically run the Lighthouse CI command. We will not use Travis CI for any Magento PWA Studio additional test. This could be a part of the “Advanced” version.

3. Create lighthouserc.yml with the following config

Now let’s create the lighthouserc.yml in your root directory from your repository and copy the following config.

ci:
  collect:
    numberOfRuns: 3
    additive: true
    url:
      - https://your-url.com/
      - https://your-url.com/catalog-page/
      - https://your-url.com/product-page/
  assert:
    lighthouse: all
    assertions:
      offscreen-images: 'on'
      uses-webp-images: 'on'
      color-contrast: 'on'
      first-contentful-paint:
        - error
        - maxNumericValue: 2000
          aggregationMethod: optimistic
      interactive:
        - error
        - maxNumericValue: 5000
          aggregationMethod: optimistic
  upload:
    target: lhci
    serverBaseUrl: https://your-app-url.herokuapp.com/ #Only Static URL is Allowed
    token: $LHCI_TOKEN

If needed you can tweak numberOfRuns, url, assertions and much much more to your needs. Besides url, the 2 most important elements, for now, are serverBaseUrl and token. We will configure those at the end.

4. Create LHCI_GITHUB_APP_TOKEN and add it to Environment Variables in Travis

Let’s create the LHCI_GITHUB_APP_TOKEN, this will link Lighthouse CI to your Github account and will show the passing results to your commit.

Click this link and add it to your Github account. Make sure to copy/paste the LHCI_GITHUB_APP_TOKEN since this will be only shared once.

Please open Travis CI and go to ‘settings’ under need your repository and look for ‘Environment Variables’. Add ‘Name’: LHCI_GITHUB_APP_TOKEN and the ‘Value’: ‘token’ into the settings. The LHCI_GITHUB_APP_TOKEN will be used later during the built and will update your Github “Status Checks” in the ‘commit’ section.

The next step is hosting and building a serverless app where all reports will be shown. Lighthouse CI offers two options: Docker and Heroku. For the scope of this blog, we only will focus on Heroku. The main reason is that is easy and free.

Create a Heroko account, add follow all the steps. That’s it! All next steps will be done using the Heroku CLI tools, so no need to create the app here.

Remember every FREE Heroku app has 550 free dyno hours per month which will be fine for this project scale.

Note from Heroku: Personal accounts are given a base of 550 free dyno hours each month. In addition to these base hours, accounts that verify with a credit card will receive an additional 450 hours added to the monthly free dyno quota. This means you can receive a total of 1000 free dyno hours per month if you verify your account with a credit card. More info: Free Dyno Hours

6. Install Heroku CLI

Now lets download and install the Heroku CLI toolset. When using macOS you may use brew tap heroku/brew && brew install heroku.

When done lets login: heroku login

7. Create Heroku config and push the app to production

Building and running the serverless app can be managed via the CLI. Use the following commands:

# Create a directory and repo for your heroku project
mkdir lhci-heroku && cd lhci-heroku && git init
# Setup the LHCI files
curl https://raw.githubusercontent.com/GoogleChrome/lighthouse-ci/master/docs/recipes/heroku-server/package.json > package.json
curl https://raw.githubusercontent.com/GoogleChrome/lighthouse-ci/master/docs/recipes/heroku-server/server.js > server.js
# Create the project's first commit
git add -A && git commit -m 'Initial commit'

# Create a new project on heroku
heroku create
# Add a free database to your project - https://elements.heroku.com/addons/heroku-postgresql
heroku addons:create heroku-postgresql:hobby-dev
# Deploy your code to heroku
git push heroku master

# Ensure heroku is running your app and open the URL
heroku ps:scale web=1
heroku open

If everything works out fine it should look something like: https://serene-ridge-48368.herokuapp.com/

If needed update your serverless app to the latest LHCI version.

# Update LHCI
npm install --save @lhci/server@latest
# Create a commit with your update
git add -A && git commit -m 'update LHCI'
# Deploy your update to heroku
git push heroku master

8. Run lhci wizard

Since we installed lhci during the first step we are now able to run the lhci wizard and connect our app to the Heroku LHCI Dashboard.

Run the following commands and follow the correct steps: lhci wizard

? Which wizard do you want to run? new-project
? What would you like to name the project? Project Name
? Where is the project's code hosted? https://github.com/your-project/your-repo
Created project Project Name (00db0b2e-84c8-4ba4-ad3d-d5b885dd47c4)!
Use token MyToken-00b5-436b-9819-0b79a064d6a3 to connect.

Again store the LHCI_TOKEN somewhere safe.

9. Add LHCI_TOKEN to Environment Variables in Travis

Now lets store the LHCI_TOKEN in the Environment Variables setting section in Travis.

10. Update serverBaseUrl in lighthouserc.yml

Update the Heroku app url in lighthouserc.yml in the serverBaseUrl section.

11. Push code to Git and let the magic do its thing!

Now the moment of truth is about to happen, save your files and: git add -A && git commit -m ‘LHCI first run’ git push origin master

Let’s follow the build in Travis CI and open your Travis project link.

Within this example we see two export TOKENS, install of LHCI, skipping npm test, validate configuration of the LHCI settings, running URLs and test results including upload to our LHCI server and Github repository.

Don’t forget visiting your Github commit section including the new ‘status checks’. This hopefully helps to create better-performing code out there ;-).

It’s a wrap!

I hope you liked building it, well it did when prepping this.

Beside Magento PWA Studio, many other solutions could benefit from a Continuous development and Continuous Integration building stream.

My next blog could be introducing Lighthouse CI using Magento PWA Studio “Advanced” or Lighthouse CI using Magento Cloud. So until next time!

Manual LHCI autorun

In case you prefer to test Lighthouse CI manually before you use Travis CI, run the following command from your shell. lhci autorun

Reference:

https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md https://github.com/GoogleChrome/lighthouse-ci/tree/master/docs/recipes/heroku-server

Ray Bogman

Senior Business Solutions Architect - Magento, An Adobe Company