Versions Compared

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)

Note

When working with Tutor, you need to take into account the purpose of the directory in the module configuration (you should check for the presence of: "**./**mfe" in Tutor, we place all the packages that we use for override in module.config.js in the MFEs directory);

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

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

      Example (package.json):
      "@edx/paragon": "21.0.0-alpha.40"

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

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

      Example (package.json):
      "@edx/frontend-build": "github:openedx/frontend-build#ags/2321"

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

    1. Requires https://github.com/openedx/frontend-platform/pull/440

      Example (module.config.js):

Code Block
languagejs
module.exports = {
    localModules: [
        { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'src' }
    ],
};
  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-edx', dist: 'dist' }
    ],
};
  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-edx', dist: 'dist' },
        { moduleName: '@edx/frontend-component-footer/dist', dir: '../frontend-component-footer-edx', dist: 'dist' }
    ],
};
  1. [Optional] Install a compatible version of 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.16"

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-edx', dist: 'dist' },
        { moduleName: '@edx/frontend-component-footer/dist', dir: '../frontend-component-footer-edx', dist: 'dist' },
        { moduleName: '@edx/brand', dir: '../brand-edx.org/' }
    ],
};

...