Setting up a frontend module

Prerequisites

To work on the O3 frontend, you will need to have the following tools and technologies set up:

• Git - We use git for version control.
• Node.js - We use Node for compiling and bundling frontend code. We don’t use Node for running the backend or server. Use the Node version expected by the repo you are working in, usually documented in .nvmrc, .node-version, CI config, or the repo README. If the repo does not specify one, use the active LTS version and manage Node versions with nvm  or a similar tool.
• Yarn and Corepack - Most current frontend repos use Yarn v4, but some older repos still use Yarn v3 or Yarn v1. Check the packageManager field in the repo’s package.json and use the matching version. Run corepack enable once on your machine so the repo’s declared Yarn version is activated automatically.
• OpenMRS backend access - You’ll need access to an OpenMRS backend (dev3 or local) for yarn start to work.

Code organization

Code in O3 is organized into several domain-specific monorepos:

• openmrs-esm-core  - contains the core packages for the 3.x frontend. The packages handle cross-cutting concerns such as error handling, extensions, React utils, the style guide, the core framework, and more.
• openmrs-esm-patient-chart  - contains the patient dashboard which renders several widgets including allergies, conditions, medications, vitals and biometrics.
• openmrs-esm-patient-management  - handles concerns related to managing patients. Includes frontend modules for the home page, patient search, patient registration, patient lists, appointment scheduling, service queues, and bed management.

Installation

Most of the time, you’ll work within one monorepo. Generally speaking, to set up one of these monorepos locally, you’ll need to:

• Clone the repo of interest.
• cd into the root directory of the repo on your local copy.
• Run corepack enable if you have not enabled Corepack on your machine yet.
• Run yarn to install dependencies with the version declared by the repo.

Editor setup

We typically use Visual Studio Code when developing on O3. We recommend setting up the following extensions to enhance your development workflow:

• Prettier  - automatic code formatting. All our monorepos contain a Prettier configuration. Setting up this extension enables Prettier to automatically format your code each time you make a commit.
• ESLint  - static code analysis tool. ESLint finds and fixes problems in your code and will help flag lint issues as you write your code.

Next steps

You’re ready to build with O3. Read the frontend module development guide to run modules locally, the contributing guide to understand the contribution flow, and the coding conventions to align with code style expectations.