Skip to content
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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

feugy
Copy link
Member

@feugy feugy commented Nov 21, 2024

🖖 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

Copy link

vercel bot commented Nov 21, 2024

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 21, 2024 1:26pm
speed-insights-nextjs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 21, 2024 1:26pm
speed-insights-nuxt ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 21, 2024 1:26pm
speed-insights-remix ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 21, 2024 1:26pm
speed-insights-sveltekit ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 21, 2024 1:26pm
speed-insights-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 21, 2024 1:26pm

Copy link

socket-security bot commented Nov 21, 2024

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 +34 6.69 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] eval, filesystem Transitive: environment, network, shell, unsafe +76 10.1 MB egoist
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/@remix-run/[email protected], npm/@remix-run/[email protected], npm/@swc/[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], npm/[email protected]

View full report↗︎

Copy link

@kakadiadarpan kakadiadarpan left a 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 :blob_pray:

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';

Choose a reason for hiding this comment

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

Suggested change
// import { cssBundleHref } from '@remix-run/css-bundle';

Comment on lines +12 to +14
// export const links: LinksFunction = () => [
// ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
// ];

Choose a reason for hiding this comment

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

Suggested change
// export const links: LinksFunction = () => [
// ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
// ];

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.

2 participants