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 designs for the experience are created and shared in Figma.
To get a login, ask a friendly experience team member near you.
-
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.
- Tools to allow people to browse and dig deeper into our catalogue.
code
.
- Wellcome Collection's design system.
code
.
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
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.
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
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"],
}
Wellcome Collection Digital Platform.
Stacks, Wellcome Collection's musings on digital developments.
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.