@edx/frontend-component-ai-translations-edx v1.7.1
frontend-component-ai-translations-edx
AI Translations UI components
Getting Started
- Clone repo into the src folder in edx directory locally
- Make sure you are running node 18 and run
npm install
- Follow the readme to set course authoring app locally https://github.com/openedx/frontend-app-course-authoring(this should also include lms+cms). The comment in https://2u-internal.atlassian.net/browse/NOVA-89?focusedCommentId=738274 can also be used as a supplement.
- Right now, we don't have our package in the cloud/npm(this is a work in progress). To install frontend-component-ai-translations-edx in the course-authoring app, you need to make use of
npm link
.- Run
npm link
in the frontend-component-ai-translations-edx directory and runnpm link @edx/frontend-component-ai-translations-edx
in the frontend-app-course-authoring directory. This should install the @edx/frontend-component-ai-translations-edx package into node_modules. - To use the exported app component, you could import and add it around here https://github.com/openedx/frontend-app-course-authoring/blob/master/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx#L109. Although, there is work been done to achieve that.
- Run
In the course authoring app, follow the guide to use your local verison of frontend-component-ai-translations-edx. The module.config.js in the frontend-app-course-authoring repo will be: ` module.exports = { /* Modules you want to use from local source code. Adding a module here means that when this app runs its build, it'll resolve the source from peer directories of this app.
moduleName: the name you use to import code from the module. dir: The relative path to the module's source code. dist: The sub-directory of the source code where it puts its build artifact. Often "dist". To use a module config: 1. Copy module.config.js.example and remove the '.example' extension 2. Uncomment modules below in the localModules array to load them from local source code. 3. Remember to re-build the production builds of those local modules if they have one. See note below. */ localModules: [ /********************************************************************************************* IMPORTANT NOTE: If any of the below packages (like paragon or frontend-platform) have a build step that populates their 'dist' directories, you must manually run that step. For paragon and frontend-platform, for instance, you need to run `npm run build` in the repo before module.config.js will work. **********************************************************************************************/ // { moduleName: '@edx/brand', dir: '../brand-openedx' }, // replace with your brand checkout // { moduleName: '@edx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' }, // { moduleName: '@edx/paragon/icons', dir: '../paragon', dist: 'icons' }, // { moduleName: '@edx/paragon', dir: '../paragon', dist: 'dist' }, // { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' }, // NOTE: This is the relative path of the frontend-component-ai-translations-edx in the frontend-app-course-authoring container. { moduleName: '@edx/frontend-component-ai-translations-edx', dir: '../src/frontend-component-ai-translations-edx', dist: 'dist' }, ], };
`
Getting Started with Devstack
To use this feature fully in Devstack requires a number of different dependancies.
- Devstack running the correct set of containers
- Run
make dev.up.cms+lms+frontend-app-course-authoring
in your devstack directory
- Run
- Correct set of waffle flags to enable the MFE component in the CMS/Studio videos page
- Local video pipeline configuration
- (optional) The ai-translations IDA running locally
In the course authoring app, follow the guide to use your local verison of frontend-lib-content-components. The module.config.js in the frontend-app-course-authoring repo will be:
module.exports = {
/*
Modules you want to use from local source code. Adding a module here means that when this app
runs its build, it'll resolve the source from peer directories of this app.
moduleName: the name you use to import code from the module.
dir: The relative path to the module's source code.
dist: The sub-directory of the source code where it puts its build artifact. Often "dist".
To use a module config:
1. Copy module.config.js.example and remove the '.example' extension
2. Uncomment modules below in the localModules array to load them from local source code.
3. Remember to re-build the production builds of those local modules if they have one.
See note below.
*/
localModules: [
/*********************************************************************************************
IMPORTANT NOTE: If any of the below packages (like paragon or frontend-platform) have a build
step that populates their 'dist' directories, you must manually run that step. For paragon
and frontend-platform, for instance, you need to run `npm run build` in the repo before
module.config.js will work.
**********************************************************************************************/
// { moduleName: '@edx/brand', dir: '../brand-openedx' }, // replace with your brand checkout
// { moduleName: '@edx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' },
// { moduleName: '@edx/paragon/icons', dir: '../paragon', dist: 'icons' },
// { moduleName: '@edx/paragon', dir: '../paragon', dist: 'dist' },
// { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
// NOTE: This is the relative path of the frontend-component-ai-translations-edx in the frontend-app-course-authoring container.
{ moduleName: '@edx/frontend-component-ai-translations', dir: '../src/frontend-component-ai-translations-edx', dist: 'dist' },
],
};
Testing Package
We have had to handle issues where the published NPM package is not working but this repo, when configure in Devstack, works. This issue is related to the dependancies and combine with the Course-Authoring-MFE can break things.
To test the package locally the npm pack
command can be used.