[jpan-box]

Overview

The HTML demos load again through a static server rooted at the repo. start:dev used to serve the bundles from memory at /dev/en-US/. The tags and the dev publicPath now point at dist/dev, which is where the development webpack build writes. A local static server then answers both the HTML page and the script.

• Blast radius: the local HTML demos and the development webpack publicPath.

What

flowchart LR
  oldMem["old: start:dev served /dev/en-US/ from memory"] -.-> form["Person types a folder id and a token"]
  build["build:dev:dist writes dist/dev/en-US"] --> serve["http-server serves that folder"] --> form

Loading

removes the webpack-dev-server URL.

• A static server on port 8080 answers /test/explorer.html and /dist/dev/en-US/explorer.js.
• The person still types a folder id and a developer token. The element does not mount until that token is real.

Why

• start:dev is gone, so nothing serves /dev/en-US/.
• The development build writes dist/dev//.
• Opening the HTML file from Finder uses a file URL, and chunk paths that start with / still miss the repo.

How

• publicPath gains the dist prefix only when the build writes under dist//. Production and OUTPUT=dist stay on ///.
• Start at scripts/webpack.config.js and test/explorer.html.

Detail, verification, and deferred work

Before, with yarn start:dev:

1. yarn start:dev installed, built the locale files, and started webpack-dev-server on port 8080.
2. You opened http://127.0.0.1:8080/test/explorer.html.
3. The tag ../dev/en-US/explorer.js became http://127.0.0.1:8080/dev/en-US/explorer.js. The dev server answered that URL from memory. Lazy chunks used the same /dev/en-US/ path.
4. You typed a folder id and a developer token. The page ran new Box.ContentExplorer().

After:

1. yarn build:i18n
2. yarn build:dev:dist writes dist/dev/en-US/explorer.js
3. yarn http-server . -p 8080
4. You open http://127.0.0.1:8080/test/explorer.html
5. The tag is ../dist/dev/en-US/explorer.js and the dev publicPath is /dist/dev/en-US/.
6. You type the folder id and the token, same as before.

Checks on this branch:

1. http://127.0.0.1:8080/test/explorer.html returned 200.
2. http://127.0.0.1:8080/dist/dev/en-US/explorer.css returned 200.
3. http://127.0.0.1:8080/dist/dev/en-US/explorer.js returned 200, including a direct request.
4. The page showed Folder Id, Auth Token, and Submit.
5. http://127.0.0.1:8080/test/pickers.html returned 200, with picker.css and picker.js at 200, and showed Folder Id, Auth Token, and Submit.
6. No file list was shown. The explorer area displayed a loading message because the page calls load() with an empty token.
7. The pre-push hook compiled the ES build, built locale bundles, and Jest found no related tests.

Summary by CodeRabbit

• Chores
  • Updated development test pages to load assets from the dist output paths and standardized HTML doctype formatting.
  • Updated React and ReactDOM CDN versions on applicable test pages to 18.3.1.
  • Updated development builds to use automatic public asset paths; other builds retain their versioned paths.
• Documentation
  • Added instructions for building and serving the development distribution and opening the test explorer.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

• Last reviewed commit: 56204ac

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• Resume reviews
• Trigger review

No actionable comments were generated in the recent review.

Walkthrough

Development builds now use webpack’s automatic public path. Test pages load assets from dist/dev, and the test README documents local build and serving commands.

Changes

Development Asset Paths

Layer / File(s)	Summary
Webpack development public path scripts/webpack.config.js	Development builds use webpack’s automatic public path. Other builds retain the version- and language-based path.
Test page asset references test/*.html	Test pages load stylesheets and scripts from dist/dev, including pseudo-locale assets. Some pages update React CDN versions from 17.0.1 to 18.3.1 or remove a React development script. Doctype and function formatting changes do not change behavior.
Local test instructions test/README.md	The README describes the demos and gives commands to build translations and the development distribution, serve the repository, and open the explorer locally.

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Possibly related PRs

• box/box-ui-elements#4910: Its i18n build changes affect the localization bundles consumed by the development build.
• box/box-ui-elements#4887: It adds the http-server dependency used by the README’s local server command.

Suggested reviewers: greg-in-a-box, tjuanitas

Merge Risk: Minimal · up to 56204

The asset-path changes are consistent with the documented development build and serving workflow.

Pre-merge checks: 5

Check name	Status	Explanation
Title check		The title "fix(dev): serve html demos from dist" matches the main change. The PR repoints the HTML demo script and stylesheet paths from dev/en-US to dist/dev/en-US, and sets the development webpack p…
Description check		The description follows the repository's template in substance. It has no ready-to-merge checklist, but that section is contributor guidance inside an HTML comment in the template, not content the aut…
Docstring Coverage		No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Title check

Explanation

The title "fix(dev): serve html demos from dist" matches the main change. The PR repoints the HTML demo script and stylesheet paths from dev/en-US to dist/dev/en-US, and sets the development webpack publicPath to match, so the demos load from a static server rooted at the repo. The conventional-commit prefix and the short wording are clear and specific.

Full details: Description check

Explanation

The description follows the repository's template in substance. It has no ready-to-merge checklist, but that section is contributor guidance inside an HTML comment in the template, not content the author must fill in. The description gives a clear overview, the blast radius, a before-and-after workflow, the reasons for the change, the implementation details, and verification results with HTTP status checks. It also includes a screenshot and a diagram. The description accurately matches the raw summary: publicPath changes for dev builds only, and the test HTML pages move to dist/dev/en-US.

Full details: Docstring Coverage

Explanation

No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 1 files. (1 skipped: 1 unsupported.)

Finishing Touches

Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit checks the paths with care,
The bundles wait in dist/dev there.
The pages load, the styles appear,
The local steps are written clear.
One hop, one build, then tests begin,
The hare trots off with a satisfied grin.}

Recent review info

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 8e9ff3dc-6ce1-4089-a1b6-e199167eefa3

Commits

Reviewing files that changed from the base of the PR and between 12e7bde and 56204ac.

Files selected for processing: 2

• scripts/webpack.config.js
• test/README.md

Files skipped from review as they are similar to previous changes: 1

• test/README.md

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

[coderabbitai]

• Fix comments: Fix CodeRabbit comments on this PR

[jfox-box]

Could we use 'auto' here? https://webpack.js.org/guides/public-path/#automatic-publicpath

Suggested change

	publicPath: isDevBuild ? `/dist/${version}/${language}/` : `/${version}/${language}/`,
	publicPath: isDevBuild ? `'auto' : `/${version}/${language}/`,

[jpan-box]

oh i didn't know that! yes!

[jfox-box]

Could you put a bit more context here, maybe just a title saying "How to run the HTML demos"

[jpan-box]

yes yes yes that'd probably be good