frontend-app-profile

The Profile app is a frontend-base application: a library that plugs into the Open edX frontend shell, rather than a standalone micro-frontend bundled with its own webpack build.

Purpose

This app displays and updates learner profiles.

When learners view their own profile, they get fields to edit their full name, country, primary spoken language, education, social links and bio, along with their photo. Each field has a control to select its visibility, that is, whether other learners can see it.

When learners view someone else's profile, they see the fields that learner has made public.

Account settings, including the fields this page links out to edit, are a separate app (Account).

Branches and Releases

This app is published to NPM by semantic-release, and its branches follow OEP-10 ADR 0002:

master

Unstable. Every merge publishes a prerelease on the alpha dist-tag, which also owns latest until stable is first published. Breaking changes land here with no DEPR process and no warning, so it is not supported in production. All changes, including bug fixes, should target this branch first.

stable

Carries the newest stable major and owns the latest dist-tag. Changes arrive here as backports from master, and no breaking change lands after publication.

n.x and n.m.x

Maintenance branches for majors and minors that stable has moved past. Each owns the dist-tag matching its own name, so consumers select a maintained line by semver range, e.g. "1.x".

stable is cut but has not published yet; #1406 tracks the rest. Both .releaserc and the Release CI workflow already know the whole layout, including the maintenance branch patterns, so a new line starts publishing as soon as it is pushed.

This repository is no longer branched or tagged for Open edX releases in its own right. It participates by published version instead, per OEP-10 ADR 0003.

The micro-frontend this app replaces goes on living on the legacy-mfe branch, which is where any further release/RELEASENAME branches for it are cut, for as long as a supported release still ships it.

Getting Started

Prerequisites

A running Open edX instance is needed to serve this app's backend APIs. Tutor in development mode is the usual choice, and site.config.dev.tsx already points at its default hostnames.

Unlike a micro-frontend, this app is neither built nor served by tutor-mfe. The dev server below runs on the host.

Cloning and Startup

1. Clone the repo:

   git clone https://github.com/openedx/frontend-app-profile.git

2. Use the version of Node specified in the .nvmrc file.

   Using other major versions of Node may work, but is unsupported. This repository includes an .nvmrc file to help set the correct Node version via nvm.

3. Install npm dependencies:

   cd frontend-app-profile && npm install

4. Start the dev server:

   npm run dev

The dev server defaults to PORT=1995 PUBLIC_PATH=/profile (set in the dev script in package.json) and serves a learner's profile at http://apps.local.openedx.io:1995/profile/u/staff. The /profile/u/<username> path is fixed: it is what the shell's header and the LMS link to.

Configuration used by the dev server is defined in site.config.dev.tsx at the repo root.

Local Development Against frontend-base

To develop this app and a local checkout of frontend-base in tandem, use the built-in npm workspace support:

mkdir -p packages/frontend-base
sudo mount --bind /path/to/frontend-base packages/frontend-base
npm install
npm run dev:packages

Bind mounts are used instead of symlinks because Node resolves symlinks to their real paths, which breaks hoisted dependency resolution. When you are done, unmount with sudo umount packages/frontend-base.

Configuration

This app is no longer configured by build-time environment variables. Its config resolves three sources, in order of increasing precedence: the app's bundled defaultConfig, the site's commonAppConfig, and the app's config. The first is the app author's, at build time; the other two are the operator's, the second applying to every app on the site and the third to this app alone. Components read the result with useAppConfig, so they follow a config change at runtime.

The keys keep the names the micro-frontend read from its environment, so values that reach the app through the MFE config API keep working. Booleans accept either a boolean or the strings 'true' and 'false'.

Name	Description / Usage	Default
DISABLE_VISIBILITY_EDITING	Hides the per-field visibility controls, leaving the account-wide privacy setting in charge of who sees what.	false
CREDENTIALS_BASE_URL	The Learner Record service, linked from the "View My Records" button on a learner's own profile. The button is hidden when this is unset.	null

The site name and LMS URL come from the site config's siteName and lmsBaseUrl.

The link to account settings on the full name field resolves the org.openedx.frontend.role.account route role, so it stays in the site when the Account app is installed alongside this one, and falls back to the LMS's own /account/settings page otherwise.

Slots

This app offers slots for operators to customize its pages. See src/slots/ for the current list and per-slot READMEs with usage examples.

Developing

Project Structure

The layout follows the standard frontend-base app layout:

• src/app.ts - the app definition imported by site.config.*.tsx, including its defaultConfig.
• src/constants.ts - the app's appId and route role identifiers.
• src/index.ts - the package's public exports (this is a library).
• src/routes.tsx - the app's react-router routes: the profile page at profile/u/:username, and an index route answering the bare profile path, which names no learner, with the not-found page.
• src/Main.tsx - the root component for the app's routes.
• src/slots.tsx - slot operations this app performs on other apps' slots (none at present).
• src/slots/ - the slots this app offers to consumers.
• src/style.scss - app-scoped runtime styles, with partials in src/sass/.

Everything else under src/ is a feature directory: profile/ for the page, its forms and its data layer, and data/ for the shared react-query options and the country and language lists.

For more, see the frontend-base migration how-to.

Build Process Notes

Library build

npm run build compiles the library into dist/ via tsc and tsc-alias, and copies the SCSS and asset files across. This is what gets published and consumed by sites.

CI build

npm run build:ci runs openedx build against site.config.ci.tsx so webpack traverses the full app graph. This catches issues, such as broken lazy-loaded imports, that tsc and Jest would not surface.

Internationalization

Please refer to the frontend-base i18n howto for documentation on internationalization.

Getting Help

If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in the community.

Our real-time conversations are on Slack. You can request a Slack invitation, then join our community Slack workspace. Because this is a frontend repository, the best place to discuss it would be in the #wg-frontend channel.

For anything non-trivial, the best path is to open an issue in this repository with as many details about the issue you are facing as you can provide.

https://github.com/openedx/frontend-app-profile/issues

For more information about these options, see the Getting Help page.

License

The code in this repository is licensed under the AGPLv3 unless otherwise noted.

Please see LICENSE for details.

Contributing

Contributions are very welcome. Please read How To Contribute for details.

This project is currently accepting all types of contributions, bug fixes, security fixes, maintenance work, or new features. However, please make sure to have a discussion about your new feature idea with the maintainers prior to beginning development to maximize the chances of your change being accepted. You can start a conversation by creating a new issue on this repo summarizing your idea.

The Open edX Code of Conduct

All community members are expected to follow the Open edX Code of Conduct.

People

The assigned maintainers for this component and other project details may be found in Backstage. Backstage pulls this data from the catalog-info.yaml file in this repo.

Reporting Security Issues

Please do not report security issues in public, and email security@openedx.org instead.