chore: Make example app compatible with a tutor dev environment (#819)

* chore: update dev ports to be compatible with tutor dev

* chore: update dev hosts from localhost to local.openedx.io

* docs: explain a way to overcome CORS issue in example app

* fixup! docs: explain a way to overcome CORS issue in example app

Author: Taylor Payne

.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:18150
+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:18381
-PUBLISHER_BASE_URL=http://localhost:18400
-ECOMMERCE_BASE_URL=http://localhost:18130
+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: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
-ORDER_HISTORY_URL=http://localhost:1996/orders
-REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/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

.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.
 

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
 
@@ -149,6 +149,19 @@ 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. To overcome this, patch `openedx-lms-development-settings` with the following settings (via a tutor plugin):
+
+```python
+# 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")
+```
+
+Make sure the plugin is installed, enabled, and then run `tutor dev restart lms` to make sure the new configuration is picked up.
+
 # Production Deployment Strategy
 
 For any MFE built on top of the frontend-platform, the deployment strategy will be something like the following:

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'],
+  },
 });