Jekyll+Travis+Lighthouse+Heroku=CI/CD

01 Jan 2020 in Jekyll, Travis, Lighthouse, Heroku, Ci/cd

Ever since Github started supporting Jekyll within Github Pages I was sold. As you may know, I love Magento since 2008. But before that, I supported Joomla and Mambo for many years and still love building small CMS sites. So when Jekyll became my main CMS system I could not stop building and used them ever since for my small CMS projects. Even this site is build using Jekyll (+AMP ;-) ).

So when it comes to easy, fast, stable, flexible, security free and high-performance websites I like to build them in Jekyll. Not because I can (since there are other great static website generators e.g. Gatsby, Hugo out there), but because I liked “Free Hosting” back in the day ;-). And creating a CMS is a matter of seconds now on Github Pages.

But choosing Jekyll is not the topic of this blog. I like to share a topic on Continuous development and Continuous Integration. When working with Magento I always preferred to be aware of the code quality I or my team wrote. And so I build several Performance Monitoring Tools which helped me to check the quality and Best Practice. From Mage.coach (also build in Jekyll ;-) ) to Grafana/Graphite Dashboards and much much more during last years.

But I still preferred having this quality check building into the git push when using a Github system. All thought Mage.coach could do that (after lots of rework), I chose to have a look at Lighthouse Project and the Lighthouse CI and Lighthouse Server toolset. And I was very surprised at how cool they are.

So before developing this on future Magento projects, I needed to test it on my Jekyll CMS project first. The following steps will guide you on how to setup a Continuous development and Continuous Integration developing stream on Jekyll using Lighthouse CI, Lighthouse Server, Travis CI, and Heroku.

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.

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/
    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 Jekyll, 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-lighthouse-server 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