Skip to content

Bundle Bootstrap via Vite instead of jsDelivr CDN - #2639

Merged
willdavsmith merged 2 commits into
radius-project:v0.59from
zachcasper:fix-css
Aug 10, 2026
Merged

Bundle Bootstrap via Vite instead of jsDelivr CDN#2639
willdavsmith merged 2 commits into
radius-project:v0.59from
zachcasper:fix-css

Conversation

@zachcasper

Copy link
Copy Markdown
Contributor

Summary

Bundle Bootstrap through the Vite build instead of loading it from the jsDelivr CDN, so the Todo list demo renders with correct styling even when an organization's Microsoft Defender policy blocks npm-backed CDN URLs.

Reason for change

client/index.html referenced Bootstrap CSS and JS from cdn.jsdelivr.net. In environments where Microsoft Defender blocks npm-backed jsDelivr URLs, the browser fails to load these resources (ERR_SOCKET_NOT_CONNECTED), so the demo loads without Bootstrap styling. Installing Bootstrap as a client dependency and importing it into the Vite bundle removes the runtime dependency on an external CDN.

Fixes #2638

How to test

  1. Build the demo image (pass an approved npm registry if the default is blocked):

    docker build --build-arg NPM_CONFIG_REGISTRY="$(npm config get registry)" -t ghcr.io/radius-project/samples/demo:test ./samples/demo

  2. Load it into a local Kind cluster and deploy:

    kind load docker-image ghcr.io/radius-project/samples/demo:test --name <cluster>

  3. Edit the container image in the app.bicep to point to :test rather than :latest

  4. Deploy

    rad deploy ./samples/demo/app.bicep --application demo --environment default

  5. Port-forward the demo container and open it in a browser.

  6. Confirm the UI renders with Bootstrap styling and the served HTML contains no cdn.jsdelivr.net references.

File change summary

File Summary of change
samples/demo/client/src/index.tsx Import Bootstrap CSS and JS from the bundle; remove duplicate index.css import
samples/demo/client/index.html Remove jsDelivr Bootstrap CSS and JS references
samples/demo/client/public/index.html Remove jsDelivr Bootstrap CSS and JS references
samples/demo/client/package.json Add bootstrap as a client dependency
samples/demo/client/package-lock.json Lockfile entry for bootstrap
samples/demo/package.json Remove unused server-side bootstrap dependency
samples/demo/package-lock.json Remove server-side bootstrap lockfile entry
samples/demo/Dockerfile Add NPM_CONFIG_REGISTRY build arg so the image can build through an approved npm registry proxy

@zachcasper
zachcasper requested review from a team as code owners August 10, 2026 17:22
Comment thread samples/demo/README.md
Comment thread samples/demo/Dockerfile
@willdavsmith
willdavsmith merged commit 9bf63f7 into radius-project:v0.59 Aug 10, 2026
13 checks passed
@zachcasper
zachcasper deleted the fix-css branch August 10, 2026 21:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Demo app CSS is not loading when jsdelivr.net is blocked

2 participants