Crafting a PWA: Part 1 — Setting up the development workflow

have been gaining popularity for quite sometime now. Crafting a good, performant experience is continuous journey. PWAs So before even embarking on the journey, we should invest time on setting up the development workflow. PWA This separates great apps from apps that were great once. For example let’s consider a which has Hacker News front end implemented. This is not a PWA . It’s made with and Redux. GitHub repository yet React I want every Pull Request on this repository from now on to be tested and audited for performance issues. How do I do that? Using a CI server, like . With Travis we’ll add support for lint checks, automatic stage deployments, audit using lighthouse and would be in absolute control over the changes happening on the app at all times. Travis Step 1 — Adding Travis CI Enable Travis CI for your repository by going to your profile page Once you enable the switch, you’d then need to add a which will instruct Travis on what to do at different stages of the build. .travis.yml Above is a simple which runs lint checks on PR. .travis.yml Step — 2: Adding stage deployments Being able to see the code changes in action helps the reviewer a lot to merge your changes with confidence. I’ll use to deploy your code to a unique stage URL once a Pull Request is created. You can use as well. Now Surge Our challenge is to integrate Now deployments from Travis so that anytime a PR is created/updated the new changes are deployed and ready to be seen/audited by other reviewers. is an excellent utility to deploy to now. The thing with now deployments is — now-travis Every time you deploy a project, now will provide you with a new, unique URL. But doesn’t provide the ability to save the URL so that we can use it later to run lighthouse audits. I’ll cover this bit in a little while. now-travis So I added a change to save the deployed URL to a temporary file and created a Pull Request which hasn’t been merged as of now. You can use this fork for your setup: https://github.com/ankeetmaini/now-travis This will add as a dev dependency to your project. npm i -D ankeetmaini/now-travis now-travis Follow the instructions in the to integrate now deployments with Travis. README now uses or to start your application. It gives prepference to now-* commands so in this case would be executed instead of . This is useful because in dev mode also I’ll use and in production I may need to pass NODE_ENV=production. Or you may need to send something else entirely. npm start npm run now-start now-start npm start npm start Update your to run now-travis after successful build. See this line of code in after_script ` ` .travis.yml NOW_ALIAS=react-hn-ankeetmaini node_modules/.bin/now-travis — file=now_url With this setup now Travis will deploy every pull request¹. You can see in the below image that a Staging deployment was done. CI checks PR for lint, deploys and audits app performance Step — 3: Integrating Lighthouse is an audit tool by Google which checks your app against a number of points and scores it. Lighthouse It’s vital to run this audit continuously, so as to always keep our app fast and performant. We’ll use to integrate it with Travis. lighthouse-ci Add as a collaborator in your repository, so that it can update the status of your PR and post a comment with the Lighthouse score. lighthousebot and add an ENV variable in the Travis. This isn’t necessary as of now, but will be done in the future. Request an API key Since deploys our app to a unique URL, we save it in a file named . We need to read this URL from the file and give it as an input to lighthouse-ci. now now-url To do this I created a file at the root of the folder, with the following code. takes and we’re passing the same in the below file. run-lighthouse.js lighthouse-ci following options 7. Lastly add an entry into in the section to run the above file after the stage deployment is done. is the argument which takes in the file name from which the deployed URL needs to be read. This will now evaluate your stage deployment and fail² the PR if you’ve not passed a minScore and also post a comment with your lighthouse score, see this PR .travis.yml after_script — file https://github.com/ankeetmaini/react-hn/pull/9 ./run-lighthouse.js --file=now_url , you’ve successfully setup an awesome workflow. All the code used in the citations . Congratulations! lives here [1] since free OSS plan in now can only have three active deployments at a time, you might need to manually remove deployments using now rm id [2] right now the lightousebot will only post a comment and not fail your PR because of insufficient rights on the repository, the above screenshot which shows failing of my PR is because I’ve run a separate instance of lighthouse-ci for demo purposes. See this issue for more details