LaterPay assets

This is the “shared” assets repository, including all the front-end modules for LaterPay.

Include / Use it

This repository is the source for the public npm package @laterpay/assets. It is advised to include the compiled files via npm’s package.json file as dependency. The package itself contains all minified, concatenated files for our projects.

$ npm add @laterpay/assets

This way, you will get the latest assets package and bugfix updates automatically when you type npm install next time.

To update to a newer version, please edit the version number in the package.json file and afterwards, type npm install to fetch it.

Setup / install

npm install

Develop

Prerequisites

Please use .editorconfig in your editor of choice to ensure we stick to our coding guidelines and do not override the settings of the .gitattributes file.

We follow the github-flow principle, so please use feature/ and bugfix/ branch-prefixes and open Pull Requests if you want to change some code.

Front-End Styleguide

We have a Front-End Styleguide in place with information about our browser support and our coding conventions and some insights, such as how to include our SVG sprites for icons. It is expected to be followed and applied to your work.

Preview Changes in Other Projects

You can link npm packages locally by following the documentation about npm link.

Using the Gulp tasks

You can compile all front-end assets running Gulp. We have a couple of Gulp tasks in the gulpfile.js which can be used solely or you can use one of the following convenience tasks (combining the others). Please use the npm wrapper tasks for it:

Build the files:

# creates all the build assets which are ready for production
$ npm run build

Watch for file changes and updates builds accordingly:

# provides a server instance at port 3002
$ npm run watch

# provides a server instance at port 3010
$ npm run watch-connector

Build CSS:

$ npm run css

Build SVG:

$ npm run svg

Built files can be found in the build/ directory.

Dev Deployment

We have an auto-deployment for the git develop branch to the following AWS S3 buckets:

• develop is deployed to https://assets.dev.laterpaytest.net/

Release a new version

Each change to the repository that fixes a specific bug or adds a new stable feature, should be reflected in a new version release of the repository/package.

This is a npm package following semver. To release a new version of the package, you need to do the following steps:

1. git checkout develop

• git pull origin develop
• Increment the version following semver rules and commit this change (git commit -m "v1.x.x" where x is the proper number of the version)
• git push origin develop
• Wait for Circle CI to finish with success
• git checkout master
• git merge develop
• git tag v1.x.x where x needs to be replaced by the new version
• git push origin master && git push --tags
• npm whoami should result with user laterpay, otherwise please logout first and login to the laterpay account
• npm publish to test, build and publish the new version to the npm registry. Be careful, this is public and not reversible

At the moment, given the need for 2FA authentication, only trodrigues is able to publish packages to npm

In addition to the npm release, when you push the commits to the master-branch, it is automatically deployed to our live AWS S3 bucket, accessible via CloudFront instance at https://assets.laterpay.net/$version/, where $version is extracted from package.json.

That way, we do have a public CDN for our files that project can use. Please note that JavaScript files need CORS set up properly and, if applicable, the CSP needs to contain this hostname. Also note that our SVG Sprites won’t work when you reference them from a different domain. In that case, please use the files via a local npm dependency.

External Dependencies

We use a couple of external dependencies for our front-end stack:

• LaterPay Webfonts
• inuit-css
• jquery 3
• normalize.scss
• tablesorter
• loaders.css

Known Issues:

Tests

We currently don’t have many tests for the assets repository. Neither JavaScript nor our Scss has a tested codebase which is far from ideal. Ideally, we will be able to apply some tests in the future. Thoughts on tools to use here:

• stylelint and stylefmt for Scss
• ESLint for JavaScript

CORS/CSP Restrictions by using CDN

As we currently deploy our assets to its own CDN place we have CORS and CSP restrictions on the resources, especially targeting the JavaScript and SVG files in the repository.

There is a consideration to move away from deploying the assets to a CDN only but provide the package as a module via private npm (when it becomes available for organisations). This would have the effect of having a per-repository build of the assets (CSS, JS, SVG, Images) which is preferrable (but needs a bigger tech concept regarding local gulp build steps).