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!
- 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 @email@example.com
2. Signup and create .travis.yml file
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.
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.
If needed you can tweak
assertions and much much more to your needs. Besides
url, the 2 most important elements, for now, are
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.
5. Signup at Heroku
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:
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:
If everything works out fine it should look something like:
If needed update your serverless app to the latest LHCI version.
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:
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
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.