|
| 1 | +# frontend-app-catalog |
| 2 | + |
| 3 | +[](https://github.com/openedx/frontend-app-catalog/blob/master/LICENSE) |
| 4 | + |
| 5 | +[](https://codecov.io/github/openedx/frontend-app-catalog?branch=master) |
| 6 | + |
| 7 | +## Purpose |
| 8 | + |
| 9 | +This is the Catalog micro-frontend application, currently under development. |
| 10 | + |
| 11 | +**What is the domain of this MFE?** |
| 12 | + |
| 13 | +- Home / Index page |
| 14 | +- Course About page |
| 15 | +- Course Catalog page |
| 16 | + |
| 17 | +These are public-facing pages intended for unauthenticated users. |
| 18 | +The goal is to replace legacy views in `edx-platform` with modern, React and Paragon-based implementations. |
| 19 | + |
| 20 | +## Installing |
| 21 | + |
| 22 | +As of the [Open edX Ulmo release](https://docs.openedx.org/en/latest/community/release_notes/ulmo/ulmo_catalog.html), |
| 23 | +this MFE can be installed and configured to replace the legacy Home, Course About, and Course Catalog pages. |
| 24 | + |
| 25 | +This involves |
| 26 | + |
| 27 | +* Hosting the MFE bundle |
| 28 | +* Setting `CATALOG_MICROFRONTEND_URL` |
| 29 | +* Setting `ENABLE_CATALOG_MICROFRONTEND` to `True` |
| 30 | + |
| 31 | +### Installing in Tutor |
| 32 | + |
| 33 | +The following Tutor plugin code can be used to install and configure this MFE in a Tutor environment. |
| 34 | + |
| 35 | +```python3 |
| 36 | +from tutormfe.hooks import MFE_APPS |
| 37 | +from tutor import hooks |
| 38 | + |
| 39 | +@MFE_APPS.add() |
| 40 | +def _add_catalog_mfe(mfes): |
| 41 | + mfes["catalog"] = { |
| 42 | + "repository": "https://github.com/openedx/frontend-app-catalog.git", |
| 43 | + "port": 1998, |
| 44 | + "version": "master", # optional, will default to the Open edX current tag. |
| 45 | + } |
| 46 | + return mfes |
| 47 | + |
| 48 | +catalog_mfe_url = """ |
| 49 | +CATALOG_MICROFRONTEND_URL = "http://{{ MFE_HOST }}/catalog" |
| 50 | +""" |
| 51 | + |
| 52 | +catalog_mfe_url_dev = """ |
| 53 | +CATALOG_MICROFRONTEND_URL = "http://{{ MFE_HOST }}:{{ get_mfe('catalog').port }}/catalog" |
| 54 | +""" |
| 55 | + |
| 56 | +env_items = [ |
| 57 | + ( |
| 58 | + "openedx-common-settings", |
| 59 | + catalog_mfe_url, |
| 60 | + ), |
| 61 | + ( |
| 62 | + "openedx-development-settings", |
| 63 | + catalog_mfe_url_dev, |
| 64 | + ), |
| 65 | + ( |
| 66 | + "openedx-lms-common-settings", |
| 67 | + "ENABLE_CATALOG_MICROFRONTEND = True", |
| 68 | + ), |
| 69 | +] |
| 70 | + |
| 71 | +for item in env_items: |
| 72 | + hooks.Filters.ENV_PATCHES.add_item(item) |
| 73 | +``` |
| 74 | + |
| 75 | +> [!WARNING] |
| 76 | +> The `ulmo.1` release does not include [the updated version of `edx-search`](https://github.com/openedx/edx-search/releases/tag/v4.4.0) |
| 77 | +> required for this MFE to function correctly. |
| 78 | +> |
| 79 | +> This will be resolved for `ulmo.2` and future Open edX releases, as it has been addressed by https://github.com/openedx/openedx-platform/pull/37948 and https://github.com/openedx/openedx-platform/pull/37949. |
| 80 | +> |
| 81 | +> To use this MFE with `ulmo.1`, the following Tutor plugin can be used: |
| 82 | +> ```python3 |
| 83 | +> from tutor import hooks |
| 84 | +> |
| 85 | +> INSTALL_SEARCH_440 = r""" |
| 86 | +> RUN --mount=type=cache,target=/openedx/.cache/pip,sharing=shared \ |
| 87 | +> pip install "edx-search==4.4.0" |
| 88 | +> """ |
| 89 | +> |
| 90 | +> hooks.Filters.ENV_PATCHES.add_items([ |
| 91 | +> ("openedx-dockerfile-post-python-requirements", INSTALL_SEARCH_440), |
| 92 | +> ("openedx-dev-dockerfile-post-python-requirements", INSTALL_SEARCH_440), |
| 93 | +> ]) |
| 94 | +
|
| 95 | +## Getting Started |
| 96 | +
|
| 97 | +### Prerequisites |
| 98 | +
|
| 99 | +The [Tutor](https://github.com/overhangio/tutor) platform is a prerequisite for developing an MFE. |
| 100 | +Utilize [relevant tutor-mfe documentation](https://github.com/overhangio/tutor-mfe#mfe-development) to guide you through |
| 101 | +the process of MFE development within the Tutor environment. |
| 102 | +
|
| 103 | +### Cloning and Startup |
| 104 | +
|
| 105 | +1. Clone the repo: |
| 106 | +
|
| 107 | +> `git clone https://github.com/openedx/frontend-app-catalog.git` |
| 108 | +
|
| 109 | +2. Use the version of node in the `.nvmrc` file. |
| 110 | +
|
| 111 | +> The current version of the micro-frontend build scripts supports the node version in `.nvmrc`. |
| 112 | +> Using other major versions of node *may* work, but this is unsupported. For |
| 113 | +> convenience, this repository includes an .nvmrc file to help in setting the |
| 114 | +> correct node version via [`nvm`](https://github.com/nvm-sh/nvm). |
| 115 | +
|
| 116 | +3. Install npm dependencies: |
| 117 | +
|
| 118 | +> `cd frontend-app-catalog && npm ci` |
| 119 | +
|
| 120 | +4. Mount the frontend-app-catalog MFE in Tutor: |
| 121 | +
|
| 122 | +> `tutor mounts add <your-tutor-project-dir>/frontend-app-catalog` |
| 123 | +
|
| 124 | +5. Build the Docker image: |
| 125 | +
|
| 126 | +> `tutor images build catalog-dev` |
| 127 | +
|
| 128 | +6. Launch the development server with Tutor: |
| 129 | +
|
| 130 | +> `tutor dev start catalog` |
| 131 | +
|
| 132 | +
|
| 133 | +The dev server is running at [http://apps.local.openedx.io:1998/catalog/](http://apps.local.openedx.io:1998/catalog/). |
| 134 | +
|
| 135 | +If you start Tutor with `tutor dev start catalog` |
| 136 | +that should give you everything you need as a companion to this frontend. |
| 137 | +
|
| 138 | +### Internationalization |
| 139 | +
|
| 140 | +Please see refer to the [frontend-platform i18n howto](https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst) for documentation on |
| 141 | +internationalization. |
| 142 | +
|
| 143 | +### Plugins |
| 144 | +
|
| 145 | +This MFE can be customized using [Frontend Plugin Framework](https://github.com/openedx/frontend-plugin-framework). |
| 146 | +
|
| 147 | +The parts of this MFE that can be customized in that manner are documented [here](/src/plugin-slots). |
| 148 | +
|
| 149 | +## Getting Help |
| 150 | +
|
| 151 | +If you're having trouble, we have discussion forums at |
| 152 | +https://discuss.openedx.org where you can connect with others in the community. |
| 153 | +
|
| 154 | +Our real-time conversations are on Slack. You can request a [Slack |
| 155 | +invitation](https://openedx.org/slack), then join our [community Slack workspace](https://openedx.org/slack). Because this is a |
| 156 | +frontend repository, the best place to discuss it would be in the [#wg-frontend |
| 157 | +channel](https://openedx.slack.com/archives/C04BM6YC7A6). |
| 158 | +
|
| 159 | +For anything non-trivial, the best path is to open an issue in this repository |
| 160 | +with as many details about the issue you are facing as you can provide. |
| 161 | +
|
| 162 | +https://github.com/openedx/frontend-app-catalog/issues |
| 163 | +
|
| 164 | +For more information about these options, see the [Getting Help](https://openedx.org/getting-help) page. |
| 165 | +
|
| 166 | +## License |
| 167 | +
|
| 168 | +The code in this repository is licensed under the AGPLv3 unless otherwise |
| 169 | +noted. |
| 170 | +
|
| 171 | +Please see [LICENSE](LICENSE) for details. |
| 172 | +
|
| 173 | +## Contributing |
| 174 | +
|
| 175 | +Contributions are very welcome. Please read [How To Contribute](https://openedx.org/r/how-to-contribute) for details. |
| 176 | +
|
| 177 | +This project is currently accepting all types of contributions, bug fixes, |
| 178 | +security fixes, maintenance work, or new features. However, please make sure |
| 179 | +to have a discussion about your new feature idea with the maintainers prior to |
| 180 | +beginning development to maximize the chances of your change being accepted. |
| 181 | +You can start a conversation by creating a new issue on this repo summarizing |
| 182 | +your idea. |
| 183 | +
|
| 184 | +## The Open edX Code of Conduct |
| 185 | +
|
| 186 | +All community members are expected to follow the [Open edX Code of Conduct](https://openedx.org/code-of-conduct/). |
| 187 | +
|
| 188 | +## People |
| 189 | +
|
| 190 | +The assigned maintainers for this component and other project details may be |
| 191 | +found in [Backstage](https://open-edx-backstage.herokuapp.com/catalog/default/component/frontend-app-catalog). Backstage pulls this data from the `catalog-info.yaml` |
| 192 | +file in this repo. |
| 193 | +
|
| 194 | +## Reporting Security Issues |
| 195 | +
|
| 196 | +Please do not report security issues in public, and email security@openedx.org instead. |
0 commit comments