Wellcome Collection

Wellcome Collection web applications.

We all work in the open and open source where we can and where it makes sense

We put users at the centre of all decisions. We use evidence and insight to inform these decisions at all stages of the product cycle

We create simple, well considered experiences, frequently incorporating user feedback

We have inclusive processes that create accessible products

We build products that deliver value, solve real problems, and are a delight to use

Visual design

Visual designs for the experience are created and shared in Figma.

To get a login, ask a friendly experience team member near you.

Core parts

Content

• A collection of content from a wide range of authors to challenge the ways people think and feel about health by connecting science, medicine, life and art code.

• Giving people the ability to partake in or inform themselves on Wellcome Collection's events, exhibitions, talks, discussions, and more.

Catalogue

• Tools to allow people to browse and dig deeper into our catalogue. code.

Cardigan

• Wellcome Collection's design system. code.

Local development

You can run ./scripts/setup.sh from the root of this project to install what you need to get started.

We use Yarn to manage our external dependencies.

We then use Yarn Workspaces to manage our local, common dependencies.

To run a project, from the root directory:

yarn install
# yarn {appName = content|identity}
# e.g.
yarn content
# you may also run all of them concurrently.
# this may add a prefix to the URL such as `/catalogue/`
# and is only for local cross projects development
yarn run-concurrently

Port

By default webapps will run on port 3000.

You can specify a port by setting the PORT in your .env.development.

This is useful if you want to run webapps simultaneously, or you may just use yarn run-concurrently as explained above.

Running CI steps locally

In order to reproduce a build step locally you can run the same docker-compose command that Buildkite runs.

See an example for edge_lambdas below. This example presumes you have an AWS credentials file set up to allow you to assume the CI role.

Your AWS configuration in $HOME/.aws/credentials might include the following (with the default profile containing your primary credentials).

[ci-agent]
region=eu-west-1
role_arn=arn:aws:iam::760097843905:role/ci-agent
source_profile=default

[experience-ci]
region=eu-west-1
role_arn=arn:aws:iam::130871440101:role/experience-ci
source_profile=ci-agent

If in pipeline.yml you have:

- label: "deploy edge_lambdas"
  if: build.branch == "main"
  plugins:
    - wellcomecollection/aws-assume-role#v0.2.2:
        role: "arn:aws:iam::130871440101:role/experience-ci"
    - ecr#v2.1.1:
        login: true
    - docker-compose#v3.5.0:
        run: edge_lambdas
        command: [ "yarn", "deploy" ]
        env:
          - AWS_ACCESS_KEY_ID
          - AWS_SECRET_ACCESS_KEY
          - AWS_SESSION_TOKEN

You should update docker-compose.yml to look as follows.

services:
  edge_lambdas:
    build:
      context: ./cache/edge_lambdas
    command: [ "yarn", "deploy" ]
    volumes:
      - /my/home/folder/.aws:/root/.aws:ro
    environment:
      - AWS_PROFILE=experience-ci

You will need to add a command, volumes and environment block to specify the required command and mount your AWS credentials in the running container.

You can then run docker-compose commands as would occur in the CI environment.

docker-compose edge_lambdas build
docker-compose edge_lambdas run

Linting

We use ESLint to lint the project. The config is global.

We use stylelint to lint styled-components. The config is global.

We extend a few configs, including prettier, which we configure separately.

 VSCode setup

It's easiest to use Dirk Baumer's VSCode plugin.

If you have prettier (esbenp.prettier-vscode) set as default formatter, we'll get conflicts.

Linting does not happen in CI, so to enable linting on save, you can add this to your workspace settings:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "stylelint.validate": ["typescriptreact"],
}

Other pieces of the Wellcome Collection puzzle

Wellcome Collection Digital Platform.

Stacks, Wellcome Collection's musings on digital developments.

Catalogue API documentation.

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.