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

Running the app with local APIs

To run the app using a local copy of the concept, content, and/or catalogue APIs you can run:

yarn config-local-apis

Configure the content app to use the local APIs under https:///api-dev.wellcomecollection.org/ by adding the following to the .env file in ./content:

NEXT_PUBLIC_API_ENV_OVERRIDE="dev"

This will configure local version of nginx to proxy requests to the local APIs, see scripts/configure-local-apis for more information.

Running the app with local Identity

Currently the identity app is not included in the local APIs configuration, so you will need to run it separately. In order to run content & identity together, you will need to run the following commands in different terminal windows while not using the local APIs configuration:

yarn content

yarn identity

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.