From 9130568ed4d33f165a49a816b639e5cea61c64df Mon Sep 17 00:00:00 2001 From: Taylor Payne Date: Tue, 27 May 2025 09:34:27 -0600 Subject: [PATCH 1/4] chore: update dev ports to be compatible with tutor dev --- .env.development | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/.env.development b/.env.development index ab3fd28bf..694b0b851 100644 --- a/.env.development +++ b/.env.development @@ -3,20 +3,20 @@ ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload ACCOUNT_PROFILE_URL=http://localhost:1995 ACCOUNT_SETTINGS_URL=http://localhost:1997 BASE_URL=http://localhost:8080 -CREDENTIALS_BASE_URL=http://localhost:18150 +CREDENTIALS_BASE_URL=http://localhost:8150 CSRF_TOKEN_API_PATH=/csrf/api/v1/token -DISCOVERY_API_BASE_URL=http://localhost:18381 -PUBLISHER_BASE_URL=http://localhost:18400 -ECOMMERCE_BASE_URL=http://localhost:18130 +DISCOVERY_API_BASE_URL=http://localhost:8381 +PUBLISHER_BASE_URL=http://localhost:8400 +ECOMMERCE_BASE_URL=http://localhost:8130 LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference LEARNING_BASE_URL=http://localhost:2000 -LMS_BASE_URL=http://localhost:18000 -LOGIN_URL=http://localhost:18000/login -LOGOUT_URL=http://localhost:18000/logout -STUDIO_BASE_URL=http://localhost:18010 -MARKETING_SITE_BASE_URL=http://localhost:18000 +LMS_BASE_URL=http://localhost:8000 +LOGIN_URL=http://localhost:8000/login +LOGOUT_URL=http://localhost:8000/logout +STUDIO_BASE_URL=http://localhost:8010 +MARKETING_SITE_BASE_URL=http://localhost:8000 ORDER_HISTORY_URL=http://localhost:1996/orders -REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh +REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:8000/login_refresh SEGMENT_KEY='' SITE_NAME=localhost USER_INFO_COOKIE_NAME=edx-user-info From f229925498b3f08e03a0bed2642b5e82e7a6bf0c Mon Sep 17 00:00:00 2001 From: Taylor Payne Date: Wed, 11 Jun 2025 21:48:38 -0600 Subject: [PATCH 2/4] chore: update dev hosts from localhost to local.openedx.io --- .env.development | 32 ++++++++++++++++---------------- .github/PULL_REQUEST_TEMPLATE.md | 2 +- README.md | 2 +- webpack.dev.config.js | 3 +++ 4 files changed, 21 insertions(+), 18 deletions(-) diff --git a/.env.development b/.env.development index 694b0b851..ad08b5ebb 100644 --- a/.env.development +++ b/.env.development @@ -1,24 +1,24 @@ EXAMPLE_VAR=Example Value ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload -ACCOUNT_PROFILE_URL=http://localhost:1995 -ACCOUNT_SETTINGS_URL=http://localhost:1997 -BASE_URL=http://localhost:8080 -CREDENTIALS_BASE_URL=http://localhost:8150 +ACCOUNT_PROFILE_URL=http://apps.local.openedx.io:1995/profile +ACCOUNT_SETTINGS_URL=http://apps.local.openedx.io:1997/account +BASE_URL=http://local.openedx.io:8080 +CREDENTIALS_BASE_URL=http://credentials.local.openedx.io:8150 CSRF_TOKEN_API_PATH=/csrf/api/v1/token -DISCOVERY_API_BASE_URL=http://localhost:8381 -PUBLISHER_BASE_URL=http://localhost:8400 -ECOMMERCE_BASE_URL=http://localhost:8130 +DISCOVERY_API_BASE_URL=http://discovery.local.openedx.io:8381 +PUBLISHER_BASE_URL=http://apps.local.openedx.io:8400/publisher +ECOMMERCE_BASE_URL= LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference -LEARNING_BASE_URL=http://localhost:2000 -LMS_BASE_URL=http://localhost:8000 -LOGIN_URL=http://localhost:8000/login -LOGOUT_URL=http://localhost:8000/logout -STUDIO_BASE_URL=http://localhost:8010 -MARKETING_SITE_BASE_URL=http://localhost:8000 -ORDER_HISTORY_URL=http://localhost:1996/orders -REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:8000/login_refresh +LEARNING_BASE_URL=http://apps.local.openedx.io:2000 +LMS_BASE_URL=http://local.openedx.io:8000 +LOGIN_URL=http://local.openedx.io:8000/login +LOGOUT_URL=http://local.openedx.io:8000/logout +STUDIO_BASE_URL=http://studio.local.openedx.io:8001 +MARKETING_SITE_BASE_URL=http://local.openedx.io:8000 +ORDER_HISTORY_URL= +REFRESH_ACCESS_TOKEN_ENDPOINT=http://local.openedx.io:8000/login_refresh SEGMENT_KEY='' -SITE_NAME=localhost +SITE_NAME=local.openedx.io USER_INFO_COOKIE_NAME=edx-user-info LOGO_URL=https://edx-cdn.org/v3/default/logo.svg LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index b2f4c4eaa..c9979a1e8 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -4,7 +4,7 @@ Describe what this pull request changes, and why. Include implications for peopl **Merge checklist:** -- [ ] Consider running your code modifications in the included example app within `frontend-platform`. This can be done by running `npm start` and opening http://localhost:8080. +- [ ] Consider running your code modifications in the included example app within `frontend-platform`. This can be done by running `npm start` and opening http://local.openedx.io:8080. - [ ] Consider testing your code modifications in another local micro-frontend using local aliases configured via [the `module.config.js` file in `frontend-build`](https://github.com/openedx/frontend-build#local-module-configuration-for-webpack). - [ ] Verify your commit title/body conforms to the conventional commits format (e.g., `fix`, `feat`) and is appropriate for your code change. Consider whether your code is a breaking change, and modify your commit accordingly. diff --git a/README.md b/README.md index 3684fb65a..208e3b5f5 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ dependencies based on this new package file. Delete `node_modules`, and run `npm 1. `npm install` 2. `npm start` -3. Open http://localhost:8080 to view the example app. +3. Open http://local.openedx.io:8080 to view the example app. ## Architecture diff --git a/webpack.dev.config.js b/webpack.dev.config.js index 1bc77c6f5..1ac2a36da 100644 --- a/webpack.dev.config.js +++ b/webpack.dev.config.js @@ -14,4 +14,7 @@ module.exports = createConfig('webpack-dev', { '@edx/frontend-platform': path.resolve(__dirname, 'src'), }, }, + devServer: { + allowedHosts: ['.local.openedx.io'], + }, }); From f00e0fa3d63478ac6866471b820eb6628d02141b Mon Sep 17 00:00:00 2001 From: Taylor Payne Date: Wed, 11 Jun 2025 22:43:44 -0600 Subject: [PATCH 3/4] docs: explain a way to overcome CORS issue in example app --- README.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/README.md b/README.md index 208e3b5f5..fd717292d 100644 --- a/README.md +++ b/README.md @@ -149,6 +149,33 @@ When making changes to frontend-platform, be sure to manually run the included e If you want to test changes to frontend-platform against a micro-frontend locally, follow the directions here: https://github.com/openedx/frontend-build#local-module-configuration-for-webpack +## Getting the example app to work with a tutor dev environment + +Part of the example app functionality includes an API request to get the logged in user's profile information. This request will fail by default due to CORS restrictions. One way to overcome this is to create a tutor plugin that patches the settings needed for the request to be allowed. + +1. Create an `example.py` file with the following contents: + +```python +from tutor import hooks + +hooks.Filters.ENV_PATCHES.add_items([ + ( + "openedx-lms-development-settings", + """ +# Used for the example app in the frontend-plugin library +CORS_ORIGIN_WHITELIST.append("http://local.openedx.io:8080") +LOGIN_REDIRECT_WHITELIST.append("local.openedx.io:8080") +CSRF_TRUSTED_ORIGINS.append("http://local.openedx.io:8080") + """ + ), +]) +``` + +2. Install the plugin: `tutor plugins install example.py` +3. Enable the plugin: `tutor plugins enable example` +4. Restart the lms service: `tutor dev restart lms` +5. http://local.openedx.io:8080/ should now successfully fetch the logged in user's name (if available) + # Production Deployment Strategy For any MFE built on top of the frontend-platform, the deployment strategy will be something like the following: From d31a1c62c1209ada70815bb53c36a478d65f9027 Mon Sep 17 00:00:00 2001 From: Taylor Payne Date: Fri, 20 Jun 2025 15:09:21 -0600 Subject: [PATCH 4/4] fixup! docs: explain a way to overcome CORS issue in example app --- README.md | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index fd717292d..2242ec395 100644 --- a/README.md +++ b/README.md @@ -151,30 +151,16 @@ If you want to test changes to frontend-platform against a micro-frontend locall ## Getting the example app to work with a tutor dev environment -Part of the example app functionality includes an API request to get the logged in user's profile information. This request will fail by default due to CORS restrictions. One way to overcome this is to create a tutor plugin that patches the settings needed for the request to be allowed. - -1. Create an `example.py` file with the following contents: +Part of the example app functionality includes an API request to get the logged in user's profile information. This request will fail by default due to CORS restrictions. To overcome this, patch `openedx-lms-development-settings` with the following settings (via a tutor plugin): ```python -from tutor import hooks - -hooks.Filters.ENV_PATCHES.add_items([ - ( - "openedx-lms-development-settings", - """ # Used for the example app in the frontend-plugin library CORS_ORIGIN_WHITELIST.append("http://local.openedx.io:8080") LOGIN_REDIRECT_WHITELIST.append("local.openedx.io:8080") CSRF_TRUSTED_ORIGINS.append("http://local.openedx.io:8080") - """ - ), -]) ``` -2. Install the plugin: `tutor plugins install example.py` -3. Enable the plugin: `tutor plugins enable example` -4. Restart the lms service: `tutor dev restart lms` -5. http://local.openedx.io:8080/ should now successfully fetch the logged in user's name (if available) +Make sure the plugin is installed, enabled, and then run `tutor dev restart lms` to make sure the new configiration is picked up. # Production Deployment Strategy