This package contains components, utils, providers and hooks developed and used by the amplify team.

Quick links

• Storybook

Building amplify-component-lib

Build and publish is done automatically when code is merged into main branch, if the package.json version number is higher. To increase the version number use npm run version <type> and specify what type of versioning.

Using config files from amplify-component-lib

1. Navigate to your projects root folder, ~/Projects/recap for instance

2. Copy and run the following command

wget -q -O - https://raw.githubusercontent.com/equinor/amplify-component-lib/main/config/install.sh | bash

This should have downloaded the .eslintrc.cjs, .prettierignore, .prettierrc.jr, tsconfig.json, env.sh, Dockerfile, proxy/nginx.conf, proxy/securityheaders.conf and github actions workflow files

Using github action workflows related to deploying from github from amplify-component-lib

1. Navigate to your projects root folder, ~/Projects/recap for instance

2. Copy and run the following command

wget -q -O - https://raw.githubusercontent.com/equinor/amplify-component-lib/main/config/install-deployment-files.sh | bash

This should have downloaded the build_deploy_radix.yaml, promote.yaml, notify.yaml, push.yaml

NOTE: These files should eventually be served from the same install script we use for getting other config files. We serve it from a different script so that applications which are not ready for the change in deployment process don't have to rush.

Notes

This script assumes the following structure in the project

project
│   README.md
│
└───client
│   |   ...
│
└───server
    │   ...

Using pre-commit

Download and install pre-commit

Using python's pip to download pre-commit

pip install pre-commit

Using brew to download pre-commit

brew install pre-commit

finally install pre-commit

pre-commit

Add config file, .pre-commit-config.yaml

Your .pre-commit-config.yaml file should look something like below

repos:
  - repo: local
    hooks:
      - id: hadolint
        name: Lint Dockerfiles
        description: Runs hadolint to lint Dockerfiles
        language: system
        types: ['dockerfile']
        entry: hadolint
      - id: trufflehog
        name: TruffleHog
        description: Detect secrets in your data with TruffleHog.
        entry: trufflehog git file://. --since-commit HEAD --only-verified --fail
        language: golang
        pass_filenames: false
      - id: prettier
        name: Prettier
        description: Runs prettier on supported files
        language: system
        entry: 'npx prettier --check'
        files: .*\.jsx?$|.*\.tsx?$|.*\.ts?$
  - repo: https://github.com/pre-commit/mirrors-eslint
    rev: v9.9.0
    hooks:
      - id: eslint
        files: \.[jt]sx?$ # *.js, *.jsx, *.ts and *.tsx
        types: [file]
        additional_dependencies:
          - [email protected]
          - [email protected]
          - [email protected]
          - [email protected]
          - [email protected]
          - [email protected]

Install hooks

When you have your config file in place you need to install the hooks

pre-commit install

Dockerfile linting

We use hadolint to check that our docker file is using best practice.

Install

In order to commit changes related to a dockerfile you need to have hadolint installed

CLI

On OSX you can use brew to install:

brew install hadolint

On Windows you can use scoop to install:

scoop install hadolint

In any of these do not work then you can refer to the installation section in hadolint's repository

VS Code

If you want to shorten the feedback loop when changing your dockerfile you can optionally add the hadolint extension (Extension id: exiasr.hadolint)

WebStorm

Looks like it is not available for WebStorm at the moment

Latest version