Skip to content

chore(vercel): add react-router preview build and fix dir-index navigation #31105

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

Merged
ShaneK merged 1 commit into from
Apr 30, 2026
Merged

chore(vercel): add react-router preview build and fix dir-index navigation #31105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
56 changes: 46 additions & 10 deletions core/scripts/vercel-build.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@
# Vercel preview build script
#
# Builds core component tests (same as before) plus framework test apps
# (Angular, React, Vue) so they're all accessible from a single preview URL.
# (Angular, React, React Router, Vue) so they're all accessible from a single
# preview URL.
#
# Core tests: /src/components/{name}/test/{scenario}
# Angular test app: /angular/
# React test app: /react/
# Vue test app: /vue/
# Core tests: /src/components/{name}/test/{scenario}
# Angular test app: /angular/
# React test app: /react/
# React Router test app: /react-router/
# Vue test app: /vue/
#
set -e

Expand Down Expand Up @@ -62,6 +64,12 @@ generate_dir_index() {
# Skip if an index.html already exists (it's an actual test page)
[ -f "${dir}/index.html" ] && return

# Absolute hrefs based on url_path. Vercel does not redirect to add trailing
# slashes, so a relative href like "basic/" from a URL without a trailing
# slash resolves against the parent directory and breaks navigation.
local parent_path="${url_path%/}"
parent_path="${parent_path%/*}/"

local entries=""
for child in "${dir}"/*/; do
[ -d "${child}" ] || continue
Expand All @@ -70,7 +78,7 @@ generate_dir_index() {
case "${name}" in *-snapshots|.*) continue ;; esac
# Only include if there's at least one index.html somewhere underneath
find "${child}" -name "index.html" -print -quit | grep -q . || continue
entries="${entries}<a href=\"${name}/\">${name}/</a>\n"
entries="${entries}<a href=\"${url_path}${name}/\">${name}/</a>\n"
done

[ -z "${entries}" ] && return
Expand All @@ -92,7 +100,7 @@ generate_dir_index() {
</head>
<body>
<h1>Index of ${url_path}</h1>
<a class="up" href="../">../</a>
<a class="up" href="${parent_path}">../</a>
$(echo -e "${entries}")
</body>
</html>
Expand Down Expand Up @@ -254,8 +262,29 @@ build_vue_test() {
echo "[vue] Done."
}

# TODO: Add build_react_router_test() when reactrouter6-* apps are added to
# packages/react-router/test/apps/
build_react_router_test() {
local APP
APP=$(pick_app "${REPO_ROOT}/packages/react-router/test") || {
echo "[react-router] No test app found, skipping."
return 0
}
echo "[react-router] Building ${APP}..."

cd "${REPO_ROOT}/packages/react-router/test"
./build.sh "${APP}"
cd "build/${APP}"
# The react-router test apps require --legacy-peer-deps (mixed react versions
# across @ionic/react peer ranges).
Comment on lines +276 to +277

@thetaPC thetaPC Apr 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Assuming there's a ticket to remove the --legacy-peer-deps, let's add the TODO here.

@ShaneK ShaneK Apr 30, 2026 •
edited
Loading

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

There's not, and I don't really want to. Any time we upgrade react router we'd have to add it back and there's no harm in having it at this point.

npm install --legacy-peer-deps
npm run sync
# IonReactRouter basename is derived from import.meta.env.BASE_URL which Vite
# sets from --base, so routing works under the /react-router/ sub-path.
npx vite build --base /react-router/

mkdir -p "${OUTPUT_DIR}/react-router"
cp -r dist/* "${OUTPUT_DIR}/react-router/"
echo "[react-router] Done."
}

TEST_FAILED=""

Expand All @@ -266,6 +295,8 @@ fi
if $REACT_PKG_OK; then
build_react_test > /tmp/vercel-react-test.log 2>&1 &
PID_REACT_TEST=$!
build_react_router_test > /tmp/vercel-react-router-test.log 2>&1 &
PID_REACT_ROUTER_TEST=$!
fi
if $VUE_PKG_OK; then
build_vue_test > /tmp/vercel-vue-test.log 2>&1 &
Expand All @@ -276,7 +307,8 @@ if $ANG_PKG_OK; then
wait $PID_ANG_TEST || { echo "Angular test app failed:"; tail -30 /tmp/vercel-angular-test.log; TEST_FAILED="${TEST_FAILED} angular"; }
fi
if $REACT_PKG_OK; then
wait $PID_REACT_TEST || { echo "React test app failed:"; tail -30 /tmp/vercel-react-test.log; TEST_FAILED="${TEST_FAILED} react"; }
wait $PID_REACT_TEST || { echo "React test app failed:"; tail -30 /tmp/vercel-react-test.log; TEST_FAILED="${TEST_FAILED} react"; }
wait $PID_REACT_ROUTER_TEST || { echo "React Router test app failed:"; tail -30 /tmp/vercel-react-router-test.log; TEST_FAILED="${TEST_FAILED} react-router"; }
fi
if $VUE_PKG_OK; then
wait $PID_VUE_TEST || { echo "Vue test app failed:"; tail -30 /tmp/vercel-vue-test.log; TEST_FAILED="${TEST_FAILED} vue"; }
Expand Down Expand Up @@ -339,6 +371,10 @@ cat > "${OUTPUT_DIR}/index.html" << 'LANDING_EOF'
<h2>React</h2>
<p>@ionic/react overlays, hooks, tabs, form controls</p>
</a>
<a class="card" href="/react-router/">
<h2>React Router</h2>
<p>@ionic/react-router routing, tabs, swipe-to-go-back, overlays</p>
</a>
<a class="card" href="/vue/">
<h2>Vue</h2>
<p>@ionic/vue overlays, router, tabs, lifecycle</p>
Expand Down
1 change: 1 addition & 0 deletions core/vercel.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"rewrites": [
{ "source": "/angular/:path*", "destination": "/angular/index.html" },
{ "source": "/react/:path*", "destination": "/react/index.html" },
{ "source": "/react-router/:path*", "destination": "/react-router/index.html" },
{ "source": "/vue/:path*", "destination": "/vue/index.html" }
]
}
3 changes: 2 additions & 1 deletion packages/react-router/test/base/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ const App: React.FC = () => {
return (
<IonApp>
<ModeSwitcher />
<IonReactRouter>
{/* Vercel previews serve this app under /react-router/, so derive basename from Vite's base URL */}
<IonReactRouter basename={import.meta.env?.BASE_URL?.replace(/\/$/, '') || undefined}>
<IonRouterOutlet>
<Route path="/" element={<Main />} />
<Route path="/routing/*" element={<Routing />} />
Expand Down
8 changes: 8 additions & 0 deletions packages/react-router/test/base/src/react-app-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,14 @@ declare namespace NodeJS {
}
}

interface ImportMetaEnv {
readonly BASE_URL?: string;
}

interface ImportMeta {
readonly env?: ImportMetaEnv;
}

declare module '*.bmp' {
const src: string;
export default src;
Expand Down
Loading