Developing with a Dev Container

This repo is integrated with @guardian/devenv for containerised development. This gives us a consistent development environment isolated from the host machine, allowing us to use tools like GitHub CLI more securely.

As with local development, Mise is our tool of choice for installing the correct versions of top level dependencies on the project (Java, Node, SBT etc).

Setup

On the host machine, you'll need to be running Docker. We recommend Docker Desktop.

In the root of the project:

$ devenv generate

Now open the project in your IDE. VS Code and IntelliJ are supported.

VSCode

You'll need to install the Dev Containers extension (ms-vscode-remote.remote-containers).

Use the command palette to Dev Containers: Reopen in Container.

To disconnect run Dev Containers: Reopen Folder Locally.

IntellIJ

TODO

Both IDEs will spin up and connect to a container. The first time the container is created the post create steps will run and setup your environment (install the correct tools etc).

Development

Within the container development mostly works just like on the host.

Set AWS credentials for local development by copy pasting from Janus (the usual way) into your IDE's terminal.

Run the site using the devrun.sh script. This will bring up Webpack, the Scala backend and Storybook.

Setup and run dev-nginx on the host. Now you'll be able to access https://support.thegulocal.com from a browser on the host machine. This will connect to services running in the container (port forwarding makes this work).

Running the Playwright tests within the container

This requires some additional setup within the container. From the ./support-frontend subdirectory:

$ ./setup_devcontainer.sh

This will setup and run nginx, dev-nginx and Chromium in the container. It also configures and installs SSL certificates.

Playwright tests must be run in headless mode:

$ pnpm --filter support-e2e test-smoke-dev

To access the Playwright report, run:

$ pnpm --filter support-e2e show-report

Then in a browser on the host visit http://localhost:9500.