Versions Compared

Version Old Version 55 New Version 56
Changes made by

Peter Kulko

Peter Kulko

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Expand

Requirements:

Note

In case of conflicts with dependency versions, a temporary solution is to install modules using the npm install --force command.

Note

It should also be remembered that some components with the deprecated marker were removed in the alpha version of Paragon. Errors with imports are expected. In the future, these deprecated components will be replaced with new ones (See - Removal-previous-deprecated-components)

  1. Install a compatible version of Paragon. Must support design tokens (currently, only @openedx/paragon@alpha).

    1. https://github.com/openedx/paragon/tree/alpha.

      Example (package.json):
      "@openedx/paragon": "22.0.0-alpha.25"

  2. Install a compatible version of @edx/frontend-build

    1. Requires https://github.com/openedx/frontend-build/pull/365

      Example (package.json):
      "@openedx/frontend-build": "github:edunext/frontend-build#dcoa/design-tokens-support"

  3. Install a compatible version of @edx/frontend-platform.

    1. Requires https://github.com/openedx/frontend-platform/pull/689
      Example (module.config.js):

Code Block
languagejs
module.exports = {
    localModules: [
        { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'src' }
    ],
};
Info

For Tutor add a mount in the next format:

Code Block
languagejs
tutor mounts add <MFE>:<local-path>:/openedx/<npm-package-name>

  1. Install a compatible version of @edx/frontend-component-header (version/PR TBD).

    1. OpenEdx Frontend-component-header - https://github.com/openedx/frontend-component-header/pull/351
      OR

    2. Edx Frontend-component-header - https://github.com/edx/frontend-component-header-edx/pull/393

      Example (module.config.js):

Code Block
languagejs
module.exports = {
    localModules: [
        { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'src' },
        { moduleName: '@edx/frontend-component-header/dist', dir: '../frontend-component-header', dist: 'dist' }
    ],
};
};
Info

For Tutor add a mount in the next format:

Code Block
languagejs
tutor mounts add <MFE>:<local-path>:/openedx/<npm-package-name>

  1. Install a compatible version of @edx/frontend-component-footer (version/PR TBD).

    1. OpenEdx Frontend-component-footer - https://github.com/openedx/frontend-component-footer/pull/303
      OR

    2. Edx Frontend-component-footer - https://github.com/edx/frontend-component-footer-edx/pull/294 .

      Example (module.config.js):

Code Block
languagejs
module.exports = {
    localModules: [
        { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'src' },
        { moduleName: '@edx/frontend-component-header/dist', dir: '../frontend-component-header', dist: 'dist' },
        { moduleName: '@edx/frontend-component-footer/dist', dir: '../frontend-component-footer', dist: 'dist' }
    ],
};
Info

For Tutor add a mount in the next format:

Code Block
languagejs
tutor mounts add <MFE>:<local-path>:/openedx/<npm-package-name>

  1. [Optional] Install a compatible version of the Brand. Must support design tokens (currently, only @edx/brand-edx.org@alpha).

    1. https://github.com/edx/brand-edx.org/tree/alpha

      Example (package.json):
      "@edx/brand": "npm:@edx/brand-edx.org@2.2.0-alpha.17"

OR

Code Block
languagejs
module.exports = {
    localModules: [
        { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'src' },
        { moduleName: '@edx/frontend-component-header/dist', dir: '../frontend-component-header', dist: 'dist' },
        { moduleName: '@edx/frontend-component-footer/dist', dir: '../frontend-component-footer', dist: 'dist' },
        { moduleName: '@edx/brand', dir: '../brand-edx.org/' }
    ],
};

  1. Replace @edx/paragon with @openedx/paragon

Code Block
languagejs
paragon migrate-to-openedx-scope .

  1. Replace SCSS variables usages or definitions with CSS variables

Code Block
languagejs
paragon replace-variables -p . -t usage
Code Block
languagejs
paragon replace-variables -p . -t definition

...

  1. Configure external Paragon CSS URLs (e.g., from a hosted CDN).

    1. The quickest way to get started is to use jsDelivr, a global production-ready CDN that has deep integrations with NPM, and a $paragonVersion wildcard to rely on the same version of @openedx/paragon installed in your MFE. Configure the PARAGON_THEME_URLS in your MFE configuration (you can use either of the approaches explained below).
      Example:

      1. Code Block
        languagepy
        {
    "MFE_CONFIG_OVERRIDES": {
        "frontend-app-discussions<APP_ID>": {
            "PARAGON_THEME_URLS": {
                "core": {
                    "urls": {
                        "default": "https://cdn.jsdelivr.net/npm/@openedx/paragon@$paragonVersion/dist/core.min.css"
                    }
                },
                "defaults": {
                    "light": "light",
                    "dark": "dark"
                },
                "variants": {
                    "light": {
                        "urls": {
                            "default": "https://cdn.jsdelivr.net/npm/@openedx/paragon@$paragonVersion/dist/light.min.css"
                        }
                    },
                    "dark": {
                        "urls": {
                            "default": "https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha@openedx/paragon@$paragonVersion/dist/lightdark.min.css"
                        }
                    }
                }
            }
        }
    }
}

    2. Configuration approaches:

      1. JavaScript-based configuration

      2. MFE runtime configuration API

  2. Import custom media breakpoints from Paragon into the SCSS entry point of your MFE.

    1. Code Block
      languagecss
      // Within `src/index.scss` of your MFE
@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;

// If using `@edx/brand` to customize the default Paragon theme, also include:
@use "@edx/brand/paragon/css/core/custom-media-breakpoints.css" as brandCustomMediaBreakpoints;

    2. Note: you must utilize @use instead of @import with this file. The SASS team also discourages the continued use of @import, and plans to eventually remove it from the language entirely. See more information here.

...