Skip to content
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.

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

[DO NOT MERGE] Set up source map to connect with local server #2287

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

alexvuong
Copy link
Collaborator

Description

This PR provides guide to create a custom webpack to generate source map files that will allow connection with local server for a MRT production debugging.

  1. installed webpack and related packages (see the diff in package.json in this PR) in your root project
  2. Add a webpack customisation to your Root project that would automatically generate map files for all o your project code on build time.
  3. Adjust package.json to exclude serving all *.map files in ssr_only. This will prevent leaking source map files on client-side
  4. Push and deploy your bundle to an MRT env
  5. Run npx http-server build --cors to start your local server to host your map files.
    If you server is up correct, you should see some screenshot below
    image
  6. Start debugging with your MRT site. Open you MRT site as normal. Any error happens there should be loaded with source map in your local server. Sample env with and without source-map connected. https://scaffold-pwa-test-env-2.mobify-storefront.com/
  • with source-map
    image
  • Without source-map
    image

Types of Changes

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Documentation update
  • Breaking change (could cause existing functionality to not work as expected)
  • Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

  • Removing a public function or component or prop
  • Adding a required argument to a function
  • Changing the data type of a function parameter or return value
  • Adding a new peer dependency to package.json

Changes

How to Test-Drive This PR

  • (step1)

Checklists

General

  • Changes are covered by test cases
  • CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

  • There are no changes to UI

or...

Localization

  • Changes include a UI text update in the Retail React App (which requires translation)

@alexvuong alexvuong added the do not merge No matter what, do not merge this pr label Feb 24, 2025
@alexvuong alexvuong requested a review from a team as a code owner February 24, 2025 22:45
clientConfig.plugins.push(
new webpack.SourceMapDevToolPlugin({
filename: '[file].map[query]',
append: `\n\n//# sourceMappingURL=http://localhost:8080/[url]`
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is to tell webpack to expend the sourceMapUrl to a local server that we will run on dev machine.

@@ -58,7 +58,7 @@ module.exports = {
externals: [],
pageNotFoundURL: '/page-not-found',
ssrEnabled: true,
ssrOnly: ['ssr.js', 'ssr.js.map', 'node_modules/**/*.*'],
ssrOnly: ['ssr.js', '*.map', 'node_modules/**/*.*'],
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is important so that MRT does not server source map files to client side

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
do not merge No matter what, do not merge this pr
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant