feat: support configurable deployment basepath

[feugy]

🖖 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:

1. 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

2. 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

3. 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

4. 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

5. 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

6. 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

• Add an option to prefix an endpoint path with an environment variable. #85

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
speed-insights-astro	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 22, 2024 8:07am
speed-insights-nextjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 22, 2024 8:07am
speed-insights-nuxt	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 22, 2024 8:07am
speed-insights-remix	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 22, 2024 8:07am
speed-insights-sveltekit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 22, 2024 8:07am
speed-insights-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 22, 2024 8:07am

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@nuxt/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	+233	74.7 MB	antfu
npm/@playwright/[email protected]	None	+2	11.1 MB	dgozman-ms, mxschmitt, pavelfeldman, ...1 more
npm/@remix-run/[email protected]	environment, filesystem Transitive: eval, network, shell, unsafe	+506	71.6 MB	mjackson
npm/@remix-run/[email protected]	Transitive: environment, eval, filesystem, network	+50	15.4 MB	mjackson
npm/@remix-run/[email protected]	environment, network Transitive: filesystem	+17	8.61 MB	mjackson
npm/@remix-run/[email protected]	Transitive: environment, eval, filesystem, network, unsafe	+128	18.1 MB	mjackson
npm/@sveltejs/[email protected]	Transitive: environment, filesystem, network, shell	+32	8.3 MB	conduitry, dominik_g, rich_harris, ...1 more
npm/@swc/[email protected]	None	+2	211 kB	kdy1, kwonoj
npm/@types/[email protected]	None	+1	2.36 MB	types
npm/@types/[email protected]	None	+2	1.69 MB	types
npm/[email protected]	environment Transitive: filesystem, shell	+10	2.74 MB	ai
npm/[email protected]	None	0	27.3 kB	omrilotan
npm/[email protected]	Transitive: environment, filesystem, network	+37	9.98 MB	domenic, joris-van-der-wel, sebmaster, ...3 more
npm/[email protected]	environment, filesystem, network, shell, unsafe	+73	137 MB	vercel-release-bot
npm/[email protected]	environment	+3	4.63 MB	react-bot
npm/[email protected]	environment	+2	339 kB	react-bot
npm/[email protected]	None	+16	4.24 MB	conduitry, rich_harris, svelte-admin
npm/[email protected]	environment, filesystem Transitive: network, shell, unsafe	+106	15.4 MB	adamwathan
npm/[email protected]	eval, filesystem Transitive: environment, network, shell, unsafe	+76	10.1 MB	egoist
npm/[email protected]	filesystem Transitive: environment, eval, unsafe	+4	379 kB	aleclarson
npm/[email protected]	Transitive: environment, filesystem, network, shell, unsafe	+40	10.7 MB	antfu, oreanno, patak, ...1 more
npm/[email protected]	None	+1	864 kB	posva, yyx990803
npm/[email protected]	environment, eval Transitive: filesystem, unsafe	+22	16.3 MB	yyx990803

🚮 Removed packages: npm/@jest/[email protected], npm/@nuxt/[email protected], npm/@playwright/[email protected], npm/@remix-run/[email protected], npm/@remix-run/[email protected], npm/@remix-run/[email protected], npm/@remix-run/[email protected], npm/@swc/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎

[kakadiadarpan]

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.