Code for Life Community hub
Python DenRapid RouterCode for Life website
  • 💛Welcome
  • 📅Release Notes
  • âĪïļBecome a Contributor
  • ðŸŠīIndustry Experience
  • 🏆Wall of Fame
  • ðŸ“ĶRepositories and Packages
  • ðŸī󠁧ó Ēó Ĩó Ū󠁧ó ŋNational Curriculum alignment
  • ðŸī󠁧ó Ēó ģó Ģó īó ŋNational Curriculum alignment
  • â„đïļGlossary
  • COMMUNICATIONS
    • 📖Publications
  • 🗞ïļNewsletters
    • 🎊Spring 2025
    • 🌷Bett show 2025
    • 🎄December 2024
    • 🍁Autumn 2024
    • ðŸŒŧSummer 2024
    • 🐰Spring 2024
    • ❄ïļWinter 2024
    • 🎄December 2023
    • 🍁Autumn 2023
    • ðŸŒŧSummer 2023
    • 🌷Spring 2023
    • 🎄December 2022
    • 🍁Autumn 2022
    • ðŸŒŧSummer 2022
    • 🌷Spring 2022
    • 🎄December 2021
  • ðŸ§ĐNewsletter challenges
    • ðŸĪ–Ocado Robot Debugging Challenge!
  • ðŸĪ–Books of Robots
  • Community resource hub
    • ðŸ’ŧHow do Computers work?
    • 🔐Safety online: Passwords and Security
    • ðŸĪ–The World of Robotics
    • ðŸĶūCareers in technology
      • 📃Careers posters
      • ðŸ“―ïļCareer based videos
  • ðŸ§ĐBlockly to Python Guide
  • Python Commands
  • 🗚ïļLevel Maps 1‒50
  • 🗚ïļLevel maps 51–67
  • Software Developer Guide
    • ðŸ’ŧDev Environment Setup
    • 🔝Code Promotion Strategy
    • ðŸ’ŋBack End
      • â„đïļOverview
      • ✍ïļCoding Patterns
      • 🧊Testing Strategy
    • ðŸ–ąïļFront End
      • â„đïļOverview
      • ✍ïļCoding Patterns
      • 🧊Testing Strategy
  • Links
    • Code Workspace
    • Visit our Site
  • Rapid Router Repo
Powered by GitBook
LogoLogo

Copyright Ocado Group 2025

On this page
  • Technology Stack
  • Code Repositories
  • Template
  • CI/CD Pipelines
  • main.yaml
  • contributing.yaml
  • JavaScript Package

Was this helpful?

Export as PDF
  1. Software Developer Guide
  2. Front End

Overview

About our front ends

PreviousFront EndNextCoding Patterns

Last updated 8 months ago

Was this helpful?

Technology Stack

We have built our front ends primarily using , , and .

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 GitHub organisation which follows the naming convention:

codeforlife-{service}-frontend

our front end repos on GitHub.

Template

To speed up the process of creating a new front end repo, we created the template repo which can be used to scaffold a new service's front end repo. Read 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 , and reference them in each front end service. In GitHub's terminology, these are referred to as .

There are 2 main pipelines in each front end service.

main.yaml

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.

JavaScript Package

The main pipeline for each front end service which simply reuses the 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 .

You can see an example of this pipeline in the .

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

Learn more about our JavaScript package .

ðŸ–ąïļ
â„đïļ
Node.js
React
Redux Toolkit
Ocado Technology
View
codeforlife-template-frontend
here
workspace repo
reusable workflows
frontend
front end template repo
front end template repo
codeforlife-package-javascript
semantic versioning
here