-
Notifications
You must be signed in to change notification settings - Fork 9
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
feat: support configurable deployment basepath #88
base: main
Are you sure you want to change the base?
feat: support configurable deployment basepath #88
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
92ef234
to
c7a2916
Compare
c7a2916
to
58c0f23
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! Thanks for the clear instructions on how to test
Tested all the example apps with custom env var and without it to make sure the existing behaviour remains the same.
@@ -1,20 +1,19 @@ | |||
import { cssBundleHref } from '@remix-run/css-bundle'; | |||
// import { cssBundleHref } from '@remix-run/css-bundle'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// import { cssBundleHref } from '@remix-run/css-bundle'; |
// export const links: LinksFunction = () => [ | ||
// ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []), | ||
// ]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// export const links: LinksFunction = () => [ | |
// ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []), | |
// ]; |
🖖 What's in there?
Since ages, we're considering the possibility to configure, at build time, the basepath used for both downloading the injected script and reporting the collected metrics.
This PR brings such capability, and works with our supported frameworks: plain React (CRA), Next, Nuxt, Vue, Sveltkit, Astro, Remix (only when used with vite).
🤺 How to test?
Check the vercel deployments of each example app.
To reproduce locally, and set custom basepath:
pnpm i && pnpm -F @vercel/speed-insights build
Then:
For Nextjs app
NEXT_PUBLIC_VERCEL_OBSERVABILITY_BASEPATH="/abc" pnpm -F nextjs build pnpm -F nextjs start
browse to http://localhost:3000 and check your console: it's trying (and failing) to download
/abc/insights/script.js
For Sveltekit app
VITE_VERCEL_OBSERVABILITY_BASEPATH="/hij" pnpm -F svelte build pnpm -F svelte preview
browse to http://localhost:4173 and check your console: it's trying (and failing) to download
/hij/insights/script.js
For vue app
VITE_VERCEL_OBSERVABILITY_BASEPATH="/klm" pnpm -F vue build pnpm -F vue preview
browse to http://localhost:4173 and check your console: it's trying (and failing) to download
/klm/insights/script.js
For nuxt app
VITE_VERCEL_OBSERVABILITY_BASEPATH="/nop" pnpm -F nuxt build pnpm -F nuxt preview
browse to http://localhost:3000 and check your console: it's trying (and failing) to download
/nop/insights/script.js
For remix app
VITE_VERCEL_OBSERVABILITY_BASEPATH="/qrs" pnpm -F remix build pnpm -F remix start
browse to http://localhost:3000 and check your console: it's trying (and failing) to download
/qrs/insights/script.js
For astro app
PUBLIC_VERCEL_OBSERVABILITY_BASEPATH="/tuv" pnpm -F astro build pnpm -F astro preview
browse to http://localhost:4321 and check your console: it's trying (and failing) to download
/tuv/insights/script.js
There is no example for CRA.
🔬Notes to reviewers
This is a generic solution, heavily inspired by @emspishak (thanks for the work!), and would replace #87.
I've changed the example app for Remix to used the vite, as per the latest official recommendation (remix 2.14 to date).
I've also replaced Jest with vitest, because the primer couldn't handle
import.meta
properly. And it's superior in my opinion (look at the reduced number of deps and shorter configuration).🔗 Related PRs