{"id":20037763,"url":"https://github.com/openedx/frontend-app-authoring","last_synced_at":"2025-04-06T07:09:43.535Z","repository":{"id":37887144,"uuid":"261847095","full_name":"openedx/frontend-app-authoring","owner":"openedx","description":"Front-end for the Open edX Studio experience, implemented in React and Paragon.","archived":false,"fork":false,"pushed_at":"2025-03-21T07:31:11.000Z","size":33557,"stargazers_count":13,"open_issues_count":233,"forks_count":101,"subscribers_count":54,"default_branch":"master","last_synced_at":"2025-03-21T18:03:11.803Z","etag":null,"topics":["pr-sandboxes-enabled"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/openedx.png","metadata":{"files":{"readme":"README.rst","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-06T18:34:51.000Z","updated_at":"2025-03-20T19:49:40.000Z","dependencies_parsed_at":"2024-01-19T17:29:38.652Z","dependency_job_id":"68b8af52-e0cb-4231-81ba-03cbe1a5c946","html_url":"https://github.com/openedx/frontend-app-authoring","commit_stats":null,"previous_names":["openedx/frontend-app-authoring","openedx/frontend-app-course-authoring"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openedx%2Ffrontend-app-authoring","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openedx%2Ffrontend-app-authoring/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openedx%2Ffrontend-app-authoring/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openedx%2Ffrontend-app-authoring/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/openedx","download_url":"https://codeload.github.com/openedx/frontend-app-authoring/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445667,"owners_count":20939958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pr-sandboxes-enabled"],"created_at":"2024-11-13T10:21:53.011Z","updated_at":"2025-04-06T07:09:43.523Z","avatar_url":"https://github.com/openedx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"frontend-app-authoring\n######################\n\n|license-badge| |status-badge| |codecov-badge|\n\n\nPurpose\n*******\n\nThis implements most of the frontend for **Open edX Studio**, allowing authors to create and edit courses, libraries, and their learning components.\n\nA few parts of Studio still default to the `\"legacy\" pages defined in edx-platform \u003chttps://github.com/openedx/edx-platform/tree/master/cms\u003e`_, but those are rapidly being deprecated and replaced with the React- and Paragon-based pages defined here.\n\n\nGetting Started\n************\n\nPrerequisites\n=============\n\n`Tutor`_ is currently recommended as a development environment for the Authoring\nMFE. Most likely, it already has this MFE configured; however, you'll need to\nmake some changes in order to run it in development mode. You can refer\nto the `relevant tutor-mfe documentation`_ for details, or follow the quick\nguide below.\n\n.. _Tutor: https://github.com/overhangio/tutor\n\n.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development\n\n\nCloning and Setup\n=================\n\n1. Clone your new repo:\n\n.. code-block:: bash\n\n    git clone https://github.com/openedx/frontend-app-authoring.git\n\n2. Use the version of Node specified in the ``.nvmrc`` file.\n\n  The current version of the micro-frontend build scripts supports node 20.\n  Using other major versions of node *may* work, but this is unsupported.  For\n  convenience, this repository includes an ``.nvmrc`` file to help in setting the\n  correct node version via `nvm \u003chttps://github.com/nvm-sh/nvm\u003e`_.\n\n3. Stop the Tutor devstack, if it's running: ``tutor dev stop``\n\n4. Next, we need to tell Tutor that we're going to be running this repo in\n   development mode, and it should be excluded from the ``mfe`` container that\n   otherwise runs every MFE. Run this:\n\n.. code-block:: bash\n\n    tutor mounts add /path/to/frontend-app-authoring\n\n5. Start Tutor in development mode. This command will start the LMS and Studio,\n   and other required MFEs like ``authn`` and ``account``, but will not start\n   the Authoring MFE, which we're going to run on the host instead of in a\n   container managed by Tutor. Run:\n\n.. code-block:: bash\n\n    tutor dev start lms cms mfe\n\nStartup\n=======\n\n1. Install npm dependencies:\n\n.. code-block:: bash\n\n  cd frontend-app-authoring \u0026\u0026 npm ci\n\n2. Start the dev server:\n\n.. code-block:: bash\n\n  npm run dev\n\nThen you can access the app at http://apps.local.openedx.io:2001/course-authoring/home\n\nTroubleshooting\n---------------\n\n* If you see an \"Invalid Host header\" error, then you're probably using a different domain name for your devstack such as\n  ``local.edly.io`` or ``local.overhang.io`` (not the new recommended default, ``local.openedx.io``). In that case, run\n  these commands to update your devstack's domain names:\n\n.. code-block:: bash\n\n  tutor dev stop\n  tutor config save --set LMS_HOST=local.openedx.io --set CMS_HOST=studio.local.openedx.io\n  tutor dev launch -I --skip-build\n  tutor dev stop authoring  # We will run this MFE on the host\n\n* If tutor-mfe is not starting the authoring MFE in development mode (eg. `tutor dev start authoring` fails), it may be due to\n  using a tutor version that expects the MFE name to be frontend-app-course-authoring (the previous name of this repo). To fix\n  this, you can rename the cloned repo directory to frontend-app-course-authoring. More information can be found in \n  `this forum post \u003chttps://discuss.openedx.org/t/repo-rename-frontend-app-course-authoring-frontend-app-authoring/13930/2\u003e`__.\n\n\nFeatures\n********\n\nFeature: Pages and Resources Studio Tab\n=======================================\n\nEnables a \"Pages \u0026 Resources\" menu item in Studio, under the \"Content\" menu.\n\n.. image:: ./docs/readme-images/feature-pages-resources.png\n\nRequirements\n------------\n\nThe following are requirements for this feature to function correctly:\n\n* ``edx-platform`` Waffle flags:\n\n  * ``discussions.pages_and_resources_mfe``: must be enabled for the set of users meant to access this feature.\n\n* `frontend-app-learning \u003chttps://github.com/openedx/frontend-app-learning\u003e`_: This MFE expects it to be the LMS frontend.\n* `frontend-app-discussions \u003chttps://github.com/openedx/frontend-app-discussions/\u003e`_: This is what the \"Discussions\" configuration provided by this feature actually configures.  Without it, discussion settings are ignored.\n\nConfiguration\n-------------\n\nIn additional to the standard settings, the following local configuration items are required:\n\n* ``LEARNING_BASE_URL``: points to Learning MFE; necessary so that the `View Live` button works\n* ``ENABLE_PROGRESS_GRAPH_SETTINGS``: allow enabling or disabling the learner progress graph course-wide\n\nFeature Description\n-------------------\n\nClicking on the \"Pages \u0026 Resources\" menu item takes the user to the course's ``pages-and-resources`` standalone page in this MFE.  (In a devstack, for instance: http://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/pages-and-resources.)\n\nUX-wise, **Pages \u0026 Resources** is meant to look like a Studio tab, so reproduces Studio's header.\n\nFor a particular course, this page allows one to:\n\n* Configure the new Discussions MFE (making this a requirement for it).  This includes:\n\n  * Enabling/disabling the feature entirely\n  * Picking a different discussion provider, while showing a comparison matrix between them:\n\n    * edX\n    * Ed Discussion\n    * InScribe\n    * Piazza\n    * Yellowdig\n\n  * Allowing to configure the selected provider\n\n* Enable/Disable learner progress\n* Enable/Disable learner notes\n* Enable/Disable the learner wiki\n* Enable/Disable the LMS calculator\n* Go to the textbook management page in Studio (in a devstack: http://localhost:18010/textbooks/course-v1:edX+DemoX+Demo_Course)\n* Go to the custom page management page in Studio(in a devstack http://localhost:18010/tabs/course-v1:edX+DemoX+Demo_Course)\n\nFeature: New React XBlock Editors\n=================================\n\n.. image:: ./docs/readme-images/feature-problem-editor.png\n\nThis allows an operator to enable the use of new React editors for the HTML, Video, and Problem XBlocks, all of which are provided here.\n\nRequirements\n------------\n\n* ``edx-platform`` Waffle flags:\n\n  * ``new_core_editors.use_new_text_editor``: must be enabled for the new HTML Xblock editor to be used in Studio\n  * ``new_core_editors.use_new_video_editor``: must be enabled for the new Video Xblock editor to be used in Studio\n  * ``new_core_editors.use_new_problem_editor``: must be enabled for the new Problem Xblock editor to be used in Studio\n\nFeature Description\n-------------------\n\nWhen a corresponding waffle flag is set, upon editing a block in Studio, the view is rendered by this MFE instead of by the XBlock's authoring view.  The user remains in Studio.\n\nFeature: New Proctoring Exams View\n==================================\n\n.. image:: ./docs/readme-images/feature-proctored-exams.png\n\nRequirements\n------------\n\n* ``edx-platform`` Django settings:\n\n  * ``ZENDESK_*``: necessary if automatic ZenDesk ticket creation is desired\n\n* ``edx-platform`` Feature flags:\n\n  * ``ENABLE_EXAM_SETTINGS_HTML_VIEW``: this feature flag must be enabled for the link to the settings view to be shown\n\n* `edx-exams \u003chttps://github.com/edx/edx-exams\u003e`_: for this feature to work, the ``edx-exams`` IDA must be deployed and its API accessible by the browser\n\nConfiguration\n-------------\n\nIn additional to the standard settings, the following local configuration item is required:\n\n* ``EXAMS_BASE_URL``: URL to the ``edx-exams`` deployment\n\nFeature Description\n-------------------\n\nIn Studio, a new item (\"Proctored Exam Settings\") is added to \"Other Course Settings\" in the course's \"Certificates\" settings page.  When clicked, this takes the author to the corresponding page in the Course Authoring MFE, where one can:\n\n* Enable proctored exams for the course\n* Allow opting out of proctored exams\n* Select a proctoring provider\n* Enable automatic creation of Zendesk tickets for \"suspicious\" proctored exam attempts\n\nFeature: Advanced Settings\n==========================\n\n.. image:: ./docs/readme-images/feature-advanced-settings.png\n\nRequirements\n------------\n\n* ``edx-platform`` Waffle flags:\n\n  * ``contentstore.new_studio_mfe.use_new_advanced_settings_page``: this feature flag must be enabled for the link to the settings view to be shown. It can be enabled on a per-course basis.\n\nFeature Description\n-------------------\n\nIn Studio, the \"Advanced Settings\" page for each enabled course will now be served by this frontend, instead of the UI built into edx-platform. The advanced settings page holds many different settings for the course, such as what features or XBlocks are enabled.\n\nFeature: Files \u0026 Uploads\n==========================\n\n.. image:: ./docs/readme-images/feature-files-uploads.png\n\nRequirements\n------------\n\n* ``edx-platform`` Waffle flags:\n\n  * ``contentstore.new_studio_mfe.use_new_files_uploads_page``: this feature flag must be enabled for the link to the Files \u0026 Uploads page to go to the MFE. It can be enabled on a per-course basis.\n\nFeature Description\n-------------------\n\nIn Studio, the \"Files \u0026 Uploads\" page for each enabled course will now be served by this frontend, instead of the UI built into edx-platform. This page allows managing static asset files like PDFs, images, etc. used for the course.\n\nFeature: Course Updates\n==========================\n\n.. image:: ./docs/readme-images/feature-course-updates.png\n\nRequirements\n------------\n\n* ``edx-platform`` Waffle flags:\n\n  * ``contentstore.new_studio_mfe.use_new_updates_page``: this feature flag must be enabled.\n\nFeature: Import/Export Pages\n============================\n\n.. image:: ./docs/readme-images/feature-export.png\n\nRequirements\n------------\n\n* ``edx-platform`` Waffle flags:\n\n  * ``contentstore.new_studio_mfe.use_new_export_page``: this feature flag will change the CMS to link to the new export page.\n  * ``contentstore.new_studio_mfe.use_new_import_page``: this feature flag will change the CMS to link to the new import page.\n\nFeature: Tagging/Taxonomy Pages\n================================\n\n.. image:: ./docs/readme-images/feature-tagging-taxonomy-pages.png\n\nRequirements\n------------\n\n* ``edx-platform`` Waffle flags:\n\n  * ``new_studio_mfe.use_tagging_taxonomy_list_page``: this feature flag must be enabled.\n\nConfiguration\n-------------\n\nIn additional to the standard settings, the following local configuration items are required:\n\n* ``ENABLE_TAGGING_TAXONOMY_PAGES``: must be enabled (which it is by default) in order to actually enable/show the new \nTagging/Taxonomy functionality.\n\n\nFeature: Libraries V2/Legacy Tabs\n=================================\n\nConfiguration\n-------------\n\nIn additional to the standard settings, the following local configurations can be set to switch between different library modes:\n\n* ``MEILISEARCH_ENABLED``: Studio setting which is enabled when the `meilisearch plugin`_ is installed.\n* ``edx-platform`` Waffle flags:\n\n  * ``contentstore.new_studio_mfe.disable_legacy_libraries``: this feature flag must be OFF to show legacy Libraries V1\n  * ``contentstore.new_studio_mfe.disable_new_libraries``: this feature flag must be OFF to show Content Libraries V2\n\n.. _meilisearch plugin: https://github.com/open-craft/tutor-contrib-meilisearch\n\nDeveloping\n**********\n\n`Tutor \u003chttps://docs.tutor.edly.io/\u003e`_ is the community-supported Open edX development environment. See the `tutor-mfe plugin README \u003chttps://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development\u003e`_ for more information.\n\n\nIf your devstack includes the default Demo course, you can visit the following URLs to see content:\n\n- `Pages and Resources \u003chttp://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/pages-and-resources\u003e`_\n\nTroubleshooting\n========================\n\n* ``npm ERR! gyp ERR! build error`` while running npm install on Macs with M1 processors: Probably due to a compatibility issue of node-canvas with M1.\n  \n  Run ``brew install pkg-config pixman cairo pango libpng jpeg giflib librsvg`` before ``npm install`` to get the correct versions of the dependencies.\n  If there is still an error, look for \"no package [...] found\" in the error message and install missing package via brew.\n  (https://github.com/Automattic/node-canvas/issues/1733)\n\n\nDeploying\n*********\n\nProduction Build\n================\n\nThe production build is created with ``npm run build``.\n\n.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-app-course-authoring.svg?branch=master\n   :target: https://travis-ci.com/edx/frontend-app-course-authoring\n.. |Codecov| image:: https://codecov.io/gh/edx/frontend-app-course-authoring/branch/master/graph/badge.svg\n   :target: https://codecov.io/gh/edx/frontend-app-course-authoring\n.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-authoring.svg\n   :target: @edx/frontend-app-authoring\n\nInternationalization\n====================\n\nPlease see refer to the `frontend-platform i18n howto`_ for documentation on\ninternationalization.\n\n.. _frontend-platform i18n howto: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst\n\n\nGetting Help\n************\n\nIf you're having trouble, we have discussion forums at\nhttps://discuss.openedx.org where you can connect with others in the community.\n\nOur real-time conversations are on Slack. You can request a `Slack\ninvitation`_, then join our `community Slack workspace`_.  Because this is a\nfrontend repository, the best place to discuss it would be in the `#wg-frontend\nchannel`_.\n\nFor anything non-trivial, the best path is to open an issue in this repository\nwith as many details about the issue you are facing as you can provide.\n\nhttps://github.com/openedx/frontend-app-course-authoring/issues\n\nFor more information about these options, see the `Getting Help`_ page.\n\n.. _Slack invitation: https://openedx.org/slack\n.. _community Slack workspace: https://openedx.slack.com/\n.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6\n.. _Getting Help: https://openedx.org/community/connect\n\n\nLicense\n*******\n\nThe code in this repository is licensed under the AGPLv3 unless otherwise\nnoted.\n\nPlease see `LICENSE \u003cLICENSE\u003e`_ for details.\n\n\nContributing\n************\n\nContributions are very welcome.  Please read `How To Contribute`_ for details.\n\n.. _How To Contribute: https://openedx.org/r/how-to-contribute\n\nThis project is currently accepting all types of contributions, bug fixes,\nsecurity fixes, maintenance work, or new features.  However, please make sure\nto have a discussion about your new feature idea with the maintainers prior to\nbeginning development to maximize the chances of your change being accepted.\nYou can start a conversation by creating a new issue on this repo summarizing\nyour idea.\n\n\nThe Open edX Code of Conduct\n****************************\n\nAll community members are expected to follow the `Open edX Code of Conduct`_.\n\n.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/\n\nPeople\n******\n\nThe assigned maintainers for this component and other project details may be\nfound in `Backstage`_. Backstage pulls this data from the ``catalog-info.yaml``\nfile in this repo.\n\n.. _Backstage: https://open-edx-backstage.herokuapp.com/catalog/default/component/frontend-app-course-authoring\n\n\nReporting Security Issues\n*************************\n\nPlease do not report security issues in public, and email security@openedx.org instead.\n\n.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-course-authoring.svg\n    :target: https://github.com/openedx/frontend-app-course-authoring/blob/master/LICENSE\n    :alt: License\n\n.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen\n\n.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-course-authoring/coverage.svg?branch=master\n    :target: https://codecov.io/github/openedx/frontend-app-course-authoring?branch=master\n    :alt: Codecov\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenedx%2Ffrontend-app-authoring","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopenedx%2Ffrontend-app-authoring","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenedx%2Ffrontend-app-authoring/lists"}