ℹ️Overview

About our front ends

Technology Stack

We have built our front ends primarily using Node.js, React, and Redux Toolkit.

We recommend getting familiar with the basics of each technology before contributing to one of our front ends.

Code Repositories

Each service has a front end code repository in the Ocado Technology GitHub organisation which follows the naming convention:

codeforlife-{service}-frontend

View our front end repos on GitHub.

Template

To speed up the process of creating a new front end repo, we created the template repo codeforlife-template-frontend which can be used to scaffold a new service's front end repo. Read here on how to create a repo from a template.

After creating a repo from the template, run a case-insensitive search across all files for replace-me. Replace these strings with the appropriate value; this will most likely be the service's name.

CI/CD Pipelines

In order to avoid repeating the same pipelines in every front end service, we centrally define the pipelines in our workspace repo, and reference them in each front end service. In GitHub's terminology, these are referred to as reusable workflows.

There are 2 main pipelines in each front end service.

main.yaml

The main pipeline for each front end service which simply reuses the frontend pipeline located in the workspace. This pipeline is responsible for testing and deploying a front end service.

You can see an example of this pipeline in the front end template repo.

contributing.yaml

This pipeline is responsible for managing the process of contributing to our code base, such as checking our contributors have signed our contributor agreement, auto-assigning/-unassigning contributors to issues, and more.

You can see an example of this pipeline in the front end template repo.

JavaScript Package

To avoid repeating code across 2 or more front ends, we have created the repo codeforlife-package-javascript which automatically tests and releases new version of the package using semantic versioning. These versioned packages can then be installed into our JavaScript environment (node_modules).

Learn more about our JavaScript package here.