Solving PageRoute import and other issues on example app

[jacobo-dominguez-wgu]

Description

It solves the following issues on example app:

• PageRoute import not found
• Missing env variables
• Replaces deprecated ReactDOM render

Also upgrades the version for @edx/frontend-platform on example app.

closes #3838.

Warning

Due to some code conflicts I had to regenerate the package-lock.json file.
I am not sure if this may cause delay on this pr due to node 24 migration and related with the comment here #3687 and this ticket #3854

How to test it

A tutor plugin is required to patch CORS settings with the example app url:

1. Create a new file (i.e. paragon-example-app.py) in your tutor plugins folder (tutor plugins printroot to get the path)
2. Edit the file with the following code:

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. Save configs and restart: tutor config save && tutor dev restart

Then run the example app:

1. npm install
2. npm run example:start
3. Go to http://localhost:8080/

Deploy Preview

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the #wg-paragon Open edX Slack channel.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @jacobo-dominguez-wgu!

This repository is currently maintained by @openedx/committers-paragon.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

• If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
  • This process (including the steps you'll need to take) is documented here.
• If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

• Dependencies

  This PR must be merged before / after / at the same time as ...

• Blockers

  This PR is waiting for OEP-1234 to be accepted.

• Timeline information

  This PR must be merged by XX date because ...

• Partner information

  This is for a course on edx.org.

• Supporting documentation
• Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Details

---

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

• Overview of Review Process for Community Contributions
• Pull Request Status Guide
• Making changes to your pull request

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

• The size and impact of the changes that it introduces
• The need for product review
• Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

[netlify]

✅ Deploy Preview for paragon-openedx-v23 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	1117233
🔍 Latest deploy log	https://app.netlify.com/projects/paragon-openedx-v23/deploys/69383c63b1967e00088dc152
😎 Deploy Preview	https://deploy-preview-3956--paragon-openedx-v23.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.37%. Comparing base (cce7beb) to head (1117233).
⚠️ Report is 16 commits behind head on release-23.x.

Additional details and impacted files

@@              Coverage Diff              @@
##           release-23.x    #3956   +/-   ##
=============================================
  Coverage         94.37%   94.37%           
=============================================
  Files               242      242           
  Lines              4282     4287    +5     
  Branches           1016     1017    +1     
=============================================
+ Hits               4041     4046    +5     
+ Misses              237      233    -4     
- Partials              4        8    +4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jacobo-dominguez-wgu]

Hi @PKulkoRaccoonGang Can I get another review here? CC @brian-smith-tcril

[PKulkoRaccoonGang]

Sorry for the delay. I tried running the example app from this PR by following the steps in the "How to test" it section, but I encountered the following errors. I also tried logging in through my locally running Tutor Open edX instance, but the errors still persist. Is there anything else I need to set up before following the "How to test" it instructions?

Access to XMLHttpRequest at 'http://local.openedx.io:8000/login_refresh' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

POST http://local.openedx.io:8000/login_refresh net::ERR_FAILED 401 (Unauthorized)

[jacobo-dominguez-wgu]

Sorry for the delay. I tried running the example app from this PR by following the steps in the "How to test" it section, but I encountered the following errors. I also tried logging in through my locally running Tutor Open edX instance, but the errors still persist. Is there anything else I need to set up before following the "How to test" it instructions?

Access to XMLHttpRequest at 'http://local.openedx.io:8000/login_refresh' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

POST http://local.openedx.io:8000/login_refresh net::ERR_FAILED 401 (Unauthorized)

@PKulkoRaccoonGang It is also needed to patch CORS settings to bypass example app url. I updated the how to test it section with the instructions to create a tutor plugin to do that, try that and lets see if that fixes your errors.

[PKulkoRaccoonGang]

Thank you for this PR! I tested it locally, and everything works as expected. I did notice some styling issues in the example app, but since this PR is specifically aimed at resolving the routing problems, it seems reasonable to handle the styling fixes in a separate issue (#4032).

I’ve added a minor comment about updating the documentation in the "Steps to install the example app" section. I believe making this update would simplify running the example app going forward 💯

[PKulkoRaccoonGang]

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.

[jacobo-dominguez-wgu]

I updated the readme with the instructions.

[jacobo-dominguez-wgu]

@PKulkoRaccoonGang I have addressed your comments, can you do another review?