Skip to content

Solving PageRoute import and other issues on example app #3956

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jacobo-dominguez-wgu wants to merge 6 commits into
base: release-23.x
Choose a base branch
from
Open

Solving PageRoute import and other issues on example app #3956

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d9e2805
fix: solving pageroute import issue on example app
jacobo-dominguez-wgu Oct 28, 2025
acf5f5a
Merge branch 'release-23.x' of https://github.com/WGU-Open-edX/parago…
jacobo-dominguez-wgu Oct 28, 2025
b96e1ab
fix: lint
jacobo-dominguez-wgu Oct 28, 2025
7ba708c
revert: restoring package-lock and reverting frontend platform upgrade
jacobo-dominguez-wgu Oct 29, 2025
cdb7bd0
chore: comments addressed
jacobo-dominguez-wgu Dec 8, 2025
1117233
docs: updating example app running instructions
jacobo-dominguez-wgu Dec 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 27 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -514,10 +514,34 @@ Paragon components can have different behavior in the MFE environment. `example`

Steps to install the `example` app.

To set up the example app with a local Tutor installation, you'll need to configure a Tutor plugin to handle CORS settings

Prerequisites.

Before running the example app, ensure you have a local Tutor installation configured.
1. Create a new file (i.e. `paragon-example-app.py`) in your tutor plugins folder (`tutor plugins printroot` to get the path).
2. Add the following content to the paragon-example-app.py file:
```
from tutor import hooks

hooks.Filters.ENV_PATCHES.add_item(
(
"openedx-lms-development-settings",
"""
CORS_ORIGIN_WHITELIST.append("http://localhost:8080")
LOGIN_REDIRECT_WHITELIST.append("http://localhost:8080")
CSRF_TRUSTED_ORIGINS.append("http://localhost:8080")
"""
)
)
```
3. Enable the plugin: `tutor plugins enable paragon-example-app`
4. Apply configuration changes: `tutor config save` && `tutor dev restart`

Running the Example App:
1. `npm install` to install dependencies.
Copy link
Contributor

@PKulkoRaccoonGang PKulkoRaccoonGang Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given the instructions outlined in the "How to test it" section of this PR, would it make sense to update the "Steps to install the example app" section too? Since devstack has been deprecated, it seems worthwhile to update the documentation on how to run the example app.

Copy link
Contributor Author

@jacobo-dominguez-wgu jacobo-dominguez-wgu Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated the readme with the instructions.

2. Launch any devstack. It is required for MFE to login into the system and set up configs.
3. `npm run start-example-mfe` to start the app.
4. Go to the `example/src/MyComponent.jsx` and use Paragon components inside the MFE environment.
2. `npm run example:start` to start the app.
3. Go to the `example/src/MyComponent.jsx` and use Paragon components inside the MFE environment.

## Semantic Release

Expand Down
12 changes: 8 additions & 4 deletions example/.env.development
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
NODE_ENV='development'
REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
LMS_BASE_URL='http://localhost:18000'
ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
NODE_ENV=development
REFRESH_ACCESS_TOKEN_ENDPOINT=http://local.openedx.io:8000/login_refresh
LMS_BASE_URL=http://local.openedx.io:8000
ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
BASE_URL=http://local.openedx.io:8080
LOGIN_URL=http://local.openedx.io:8000/login
LOGOUT_URL=http://local.openedx.io:8000/logout
CSRF_TOKEN_API_PATH=/csrf/api/v1/token
2 changes: 1 addition & 1 deletion example/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en-us">
<head>
<title>Example</title>
<title>Paragon Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Expand Down
21 changes: 10 additions & 11 deletions example/src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,30 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import {
AppProvider,
ErrorPage,
PageRoute,
PageWrap,
} from '@edx/frontend-platform/react';
import { APP_INIT_ERROR, APP_READY, initialize } from '@edx/frontend-platform';
import { subscribe } from '@edx/frontend-platform/pubSub';
import MyComponent from './MyComponent';

import './index.scss';

const container = document.getElementById('root');
const root = createRoot(container);

subscribe(APP_READY, () => {
ReactDOM.render(
root.render(
<AppProvider>
<PageRoute
exact
path="/"
component={MyComponent}
/>
<PageWrap>
<MyComponent />
</PageWrap>
</AppProvider>,
document.getElementById('root'),
);
});

subscribe(APP_INIT_ERROR, (error) => {
ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
root.render(<ErrorPage message={error.message} />);
});

initialize({
Expand Down