cal.com
cal.com copied to clipboard
calcom
feat!: Add uri on self-hosting
What does this PR do?
Add NEXT_PUBLIC_WEBAPP_URI env variable to be able to host cal.com on a URI.
Fixes # (issue)
https://github.com/calcom/cal.com/issues/5980
Environment: Staging(main branch) / Production
Type of change
- [x] New feature (non-breaking change which adds functionality)
- [x] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [x] This change requires a documentation update
How should this be tested?
- [ ] Build with URI and test each route
Checklist
- I haven't added tests that prove my fix is effective or that my feature works
@Quentin-Guillemin is attempting to deploy a commit to the cal Team on Vercel.
A member of the Team first needs to authorize it.
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| ui | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jun 5, 2023 3:00pm |
📦 Next.js Bundle Analysis
This analysis was generated by the next.js bundle analysis action 🤖
⚠️ Global Bundle Size Increased
| Page | Size (compressed) |
|---|---|
global |
210.94 KB (🟡 +42 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Seventy-one Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load | % of Budget (350 KB) |
|---|---|---|---|
/404 |
8.51 KB |
219.46 KB | 62.70% (🟡 +0.04%) |
/500 |
5.96 KB |
216.9 KB | 61.97% (+/- <0.01%) |
/[user] |
111.28 KB |
322.22 KB | 92.06% (🟢 -0.01%) |
/[user]/[type] |
99.82 KB |
310.76 KB | 88.79% (🟢 -0.01%) |
/[user]/[type]/embed |
99.84 KB |
310.78 KB | 88.80% (🟢 -0.01%) |
/[user]/book |
190.87 KB |
401.81 KB | 114.80% (🟢 -0.10%) |
/[user]/embed |
111.35 KB |
322.29 KB | 92.08% (🟢 -0.01%) |
/apps |
171.46 KB |
382.4 KB | 109.26% (🟡 +0.04%) |
/apps/[slug] |
195.15 KB |
406.1 KB | 116.03% (🟡 +0.03%) |
/apps/[slug]/[...pages] |
396.37 KB |
607.31 KB | 173.52% (🟢 -0.08%) |
/apps/categories |
155.93 KB |
366.87 KB | 104.82% (🟢 -0.08%) |
/apps/categories/[category] |
160.2 KB |
371.15 KB | 106.04% (🟡 +0.04%) |
/apps/installed/[category] |
201.32 KB |
412.26 KB | 117.79% (🟡 +0.03%) |
/auth/error |
19.22 KB |
230.16 KB | 65.76% (🟢 -0.01%) |
/auth/forgot-password |
25.96 KB |
236.9 KB | 67.69% (🟡 +0.10%) |
/auth/forgot-password/[id] |
41.28 KB |
252.22 KB | 72.06% (🟡 +0.11%) |
/auth/login |
40.05 KB |
250.99 KB | 71.71% (+/- <0.01%) |
/auth/logout |
7.55 KB |
218.49 KB | 62.43% (🟢 -0.01%) |
/auth/new |
321 B |
211.25 KB | 60.36% (+/- <0.01%) |
/auth/setup |
103.87 KB |
314.81 KB | 89.95% (🟡 +0.11%) |
/availability |
159.13 KB |
370.08 KB | 105.74% (🟢 -0.08%) |
/availability/[schedule] |
275.89 KB |
486.83 KB | 139.09% (🟢 -0.09%) |
/availability/troubleshoot |
156.61 KB |
367.55 KB | 105.02% (🟢 -0.09%) |
/booking/[uid] |
131.77 KB |
342.71 KB | 97.92% (🟡 +0.09%) |
/bookings/[status] |
268.8 KB |
479.74 KB | 137.07% (🟢 -0.08%) |
/d/[link]/[slug] |
99.46 KB |
310.41 KB | 88.69% (🟢 -0.01%) |
/d/[link]/[slug]/embed |
99.49 KB |
310.44 KB | 88.70% (🟢 -0.01%) |
/d/[link]/book |
190.52 KB |
401.46 KB | 114.70% (🟢 -0.10%) |
/event-types |
353.78 KB |
564.72 KB | 161.35% (🟢 -0.07%) |
/event-types/[type] |
386.4 KB |
597.34 KB | 170.67% (🟢 -0.10%) |
/getting-started/[[...step]] |
334.55 KB |
545.49 KB | 155.85% (🟡 +0.11%) |
/more |
155.55 KB |
366.49 KB | 104.71% (🟢 -0.08%) |
/payment/[uid] |
68.75 KB |
279.69 KB | 79.91% (+/- <0.01%) |
/settings/admin |
160.99 KB |
371.93 KB | 106.27% (🟢 -0.09%) |
/settings/admin/apps |
193.9 KB |
404.85 KB | 115.67% (🟢 -0.08%) |
/settings/admin/apps/[category] |
193.89 KB |
404.83 KB | 115.67% (🟢 -0.08%) |
/settings/admin/impersonation |
161.26 KB |
372.21 KB | 106.34% (🟢 -0.08%) |
/settings/billing |
161.19 KB |
372.13 KB | 106.32% (🟢 -0.06%) |
/settings/developer/api-keys |
190.26 KB |
401.2 KB | 114.63% (🟢 -0.08%) |
/settings/developer/webhooks |
163.58 KB |
374.52 KB | 107.01% (🟢 -0.09%) |
/settings/developer/webhooks/[id] |
194.44 KB |
405.38 KB | 115.82% (🟢 -0.08%) |
/settings/developer/webhooks/new |
194.3 KB |
405.25 KB | 115.78% (🟢 -0.08%) |
/settings/my-account/appearance |
175.08 KB |
386.02 KB | 110.29% (🟢 -0.08%) |
/settings/my-account/calendars |
195.65 KB |
406.59 KB | 116.17% (🟡 +0.02%) |
/settings/my-account/conferencing |
166.88 KB |
377.82 KB | 107.95% (🟢 -0.08%) |
/settings/my-account/general |
270.16 KB |
481.11 KB | 137.46% (🟢 -0.08%) |
/settings/my-account/profile |
429.2 KB |
640.14 KB | 182.90% (🟡 +0.02%) |
/settings/security/impersonation |
163.14 KB |
374.08 KB | 106.88% (🟢 -0.08%) |
/settings/security/password |
196.45 KB |
407.39 KB | 116.40% (🟢 -0.08%) |
/settings/security/sso |
170.84 KB |
381.78 KB | 109.08% (🟢 -0.08%) |
/settings/security/two-factor-auth |
165.99 KB |
376.93 KB | 107.69% (🟡 +0.03%) |
/settings/teams |
160.74 KB |
371.68 KB | 106.19% (🟢 -0.08%) |
/settings/teams/[id]/appearance |
175.1 KB |
386.04 KB | 110.30% (🟢 -0.08%) |
/settings/teams/[id]/billing |
160.97 KB |
371.91 KB | 106.26% (🟢 -0.08%) |
/settings/teams/[id]/members |
301.63 KB |
512.57 KB | 146.45% (🟢 -0.08%) |
/settings/teams/[id]/onboard-members |
74.12 KB |
285.06 KB | 81.45% (+/- <0.01%) |
/settings/teams/[id]/profile |
273.37 KB |
484.31 KB | 138.37% (🟢 -0.08%) |
/settings/teams/[id]/sso |
170.93 KB |
381.87 KB | 109.11% (🟢 -0.09%) |
/settings/teams/new |
113.4 KB |
324.34 KB | 92.67% (+/- <0.01%) |
/signup |
25.8 KB |
236.74 KB | 67.64% (🟡 +0.10%) |
/team/[slug] |
113.87 KB |
324.82 KB | 92.80% (+/- <0.01%) |
/team/[slug]/[type] |
99.47 KB |
310.41 KB | 88.69% (🟢 -0.01%) |
/team/[slug]/[type]/embed |
99.5 KB |
310.44 KB | 88.70% (🟢 -0.01%) |
/team/[slug]/book |
190.52 KB |
401.46 KB | 114.70% (🟢 -0.10%) |
/team/[slug]/embed |
113.94 KB |
324.88 KB | 92.82% (+/- <0.01%) |
/teams |
155.77 KB |
366.71 KB | 104.77% (🟢 -0.08%) |
/video/meeting-ended/[uid] |
22.76 KB |
233.7 KB | 66.77% (+/- <0.01%) |
/video/meeting-not-started/[uid] |
22.4 KB |
233.34 KB | 66.67% (+/- <0.01%) |
/video/no-meeting-found |
6.59 KB |
217.53 KB | 62.15% (+/- <0.01%) |
/workflows |
168.67 KB |
379.61 KB | 108.46% (🟢 -0.08%) |
/workflows/[workflow] |
298.49 KB |
509.43 KB | 145.55% (🟢 -0.08%) |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Thanks for comments @hariombalhara @zomars :pray:
I try to use next assetPrefix property and remove url's that start with / but it doesn't work in all cases as sub pages like /apps/[any-app].
Example for Apple calendar
My URL is : https://DOMAIN/cal-com/apps/apple-calendar
I remove first / for images on apps/web/components/apps/App.tsx
<img
key={descriptionItem}
src={descriptionItem.substring(1, descriptionItem.length)}
alt={`Screenshot of app ${name}`}
className="mr-4 h-auto max-h-80 max-w-[90%] snap-center rounded-md object-contain last:mb-0 md:max-h-min lg:mb-4 lg:mr-0 lg:max-w-full"
/>
[...]
<img className="min-h-16 min-w-16 h-16 w-16" src={logo.substring(1, logo.length)} alt={name} />
But next search files with /apps :
- https://DOMAIN/cal-com/apps/api/app-store/applecalendar/1.jpg
- https://DOMAIN/cal-com/apps/api/app-store/applecalendar/icon.svg
It works pretty well for /apps doing the same things
Information
I create a function cFetch that just add WEBAPP_PREFIX_PATH to fetched resource for less impact.
I don't know how to add WEBAPP_PREFIX_PATH in an other way than add it for each file or use a custom component for image rendering.
You're already use WEBAPP_URL for some images like EventTeamTab.tsx#L24. Is this the solution?
Let me know what to do,
Best regards
@Quentin-Guillemin I was talking about using base HTML tag. Found an article that recommends that https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/
But there is a problem with this approach as well, we would have to convert all paths to relative paths, which is also not straightforward.
One approach might be to just prefix every image src with WEBAPP_URL and have a linting rule that ensures it is always done.
I would have to test more to understand what approach will work best.
📦 Next.js Bundle Analysis for @calcom/web
This analysis was generated by the Next.js Bundle Analysis action. 🤖
⚠️ Global Bundle Size Increased
| Page | Size (compressed) |
|---|---|
global |
152.04 KB (🟡 +763 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Seventy-one Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load | % of Budget (350 KB) |
|---|---|---|---|
/500 |
88.58 KB |
240.62 KB | 68.75% (🟢 -0.18%) |
/[user] |
135.88 KB |
287.92 KB | 82.26% (🟢 -0.18%) |
/[user]/[type] |
183.51 KB |
335.55 KB | 95.87% (🟢 -0.20%) |
/[user]/[type]/embed |
183.54 KB |
335.57 KB | 95.88% (🟢 -0.20%) |
/[user]/book |
254.54 KB |
406.58 KB | 116.17% (🟢 -0.22%) |
/[user]/embed |
135.95 KB |
287.99 KB | 82.28% (🟢 -0.18%) |
/_error |
33 KB |
185.03 KB | 52.87% (🟢 -0.20%) |
/apps/[slug]/[...pages] |
458.77 KB |
610.81 KB | 174.52% (🟢 -0.38%) |
/apps/[slug]/setup |
88.15 KB |
240.19 KB | 68.63% (🟢 -0.18%) |
/apps/categories |
241.13 KB |
393.16 KB | 112.33% (🟢 -0.20%) |
/auth/error |
100.6 KB |
252.64 KB | 72.18% (🟢 -0.18%) |
/auth/login |
149.56 KB |
301.6 KB | 86.17% (🟢 -0.19%) |
/auth/logout |
88.98 KB |
241.01 KB | 68.86% (🟢 -0.18%) |
/auth/saml-idp |
82.93 KB |
234.97 KB | 67.13% (🟢 -0.18%) |
/auth/signin |
83.01 KB |
235.05 KB | 67.16% (🟢 -0.18%) |
/auth/sso/[provider] |
83.07 KB |
235.1 KB | 67.17% (🟢 -0.18%) |
/auth/sso/direct |
82.98 KB |
235.01 KB | 67.15% (🟢 -0.18%) |
/auth/verify |
100.68 KB |
252.71 KB | 72.20% (🟢 -0.18%) |
/availability |
246.45 KB |
398.49 KB | 113.85% (🟢 -0.20%) |
/availability/[schedule] |
332.72 KB |
484.76 KB | 138.50% (🟢 -0.19%) |
/availability/troubleshoot |
241.82 KB |
393.86 KB | 112.53% (🟢 -0.21%) |
/d/[link]/[slug] |
183.15 KB |
335.19 KB | 95.77% (🟢 -0.20%) |
/d/[link]/[slug]/embed |
183.18 KB |
335.22 KB | 95.78% (🟢 -0.21%) |
/d/[link]/book |
254.19 KB |
406.22 KB | 116.06% (🟢 -0.21%) |
/event-types |
427.33 KB |
579.36 KB | 165.53% (🟢 -0.18%) |
/event-types/[type] |
479.14 KB |
631.18 KB | 180.34% (🟢 -0.21%) |
/insights |
448.55 KB |
600.59 KB | 171.60% (🟢 -0.20%) |
/maintenance |
83.15 KB |
235.19 KB | 67.20% (🟢 -0.18%) |
/more |
240.75 KB |
392.79 KB | 112.23% (🟢 -0.20%) |
/new-booker/[user]/[type] |
289.73 KB |
441.77 KB | 126.22% (🟢 -0.21%) |
/new-booker/d/[link]/[slug] |
289.73 KB |
441.77 KB | 126.22% (🟢 -0.21%) |
/new-booker/team/[slug]/[type] |
289.74 KB |
441.77 KB | 126.22% (🟢 -0.21%) |
/payment/[uid] |
109.95 KB |
261.99 KB | 74.85% (🟢 -0.18%) |
/settings/admin |
246.28 KB |
398.31 KB | 113.80% (🟢 -0.21%) |
/settings/admin/apps |
258.03 KB |
410.06 KB | 117.16% (🟢 -0.21%) |
/settings/admin/apps/[category] |
258.01 KB |
410.05 KB | 117.16% (🟢 -0.22%) |
/settings/admin/flags |
249.01 KB |
401.05 KB | 114.58% (🟢 -0.21%) |
/settings/admin/impersonation |
246.55 KB |
398.59 KB | 113.88% (🟢 -0.21%) |
/settings/admin/users |
247.7 KB |
399.74 KB | 114.21% (🟢 -0.21%) |
/settings/admin/users/[id]/edit |
333.96 KB |
485.99 KB | 138.86% (🟢 -0.22%) |
/settings/admin/users/add |
333.63 KB |
485.67 KB | 138.76% (🟢 -0.21%) |
/settings/billing |
246.42 KB |
398.46 KB | 113.85% (🟢 -0.22%) |
/settings/developer/api-keys |
275.03 KB |
427.06 KB | 122.02% (🟢 -0.22%) |
/settings/developer/webhooks |
249.43 KB |
401.46 KB | 114.70% (🟢 -0.21%) |
/settings/developer/webhooks/[id] |
251.11 KB |
403.15 KB | 115.18% (🟢 -0.21%) |
/settings/developer/webhooks/new |
250.97 KB |
403 KB | 115.14% (🟢 -0.21%) |
/settings/my-account/appearance |
260.68 KB |
412.71 KB | 117.92% (🟢 -0.21%) |
/settings/my-account/conferencing |
252 KB |
404.03 KB | 115.44% (🟢 -0.21%) |
/settings/my-account/general |
331.28 KB |
483.31 KB | 138.09% (🟢 -0.21%) |
/settings/security/impersonation |
248.23 KB |
400.27 KB | 114.36% (🟢 -0.21%) |
/settings/security/password |
257.6 KB |
409.64 KB | 117.04% (🟢 -0.21%) |
/settings/security/sso |
255.78 KB |
407.81 KB | 116.52% (🟢 -0.22%) |
/settings/teams |
246.04 KB |
398.08 KB | 113.74% (🟢 -0.22%) |
/settings/teams/[id]/appearance |
260.6 KB |
412.64 KB | 117.90% (🟢 -0.21%) |
/settings/teams/[id]/billing |
246.28 KB |
398.32 KB | 113.81% (🟢 -0.22%) |
/settings/teams/[id]/members |
359.14 KB |
511.18 KB | 146.05% (🟢 -0.21%) |
/settings/teams/[id]/onboard-members |
163.63 KB |
315.67 KB | 90.19% (🟢 -0.19%) |
/settings/teams/[id]/profile |
369.29 KB |
521.33 KB | 148.95% (🟢 -0.21%) |
/settings/teams/[id]/sso |
255.87 KB |
407.91 KB | 116.55% (🟢 -0.22%) |
/settings/teams/new |
186.58 KB |
338.62 KB | 96.75% (🟢 -0.20%) |
/team/[slug] |
155.48 KB |
307.51 KB | 87.86% (🟢 -0.18%) |
/team/[slug]/[type] |
183.16 KB |
335.19 KB | 95.77% (🟢 -0.20%) |
/team/[slug]/[type]/embed |
183.19 KB |
335.22 KB | 95.78% (🟢 -0.20%) |
/team/[slug]/book |
254.19 KB |
406.23 KB | 116.07% (🟢 -0.22%) |
/team/[slug]/embed |
155.54 KB |
307.58 KB | 87.88% (🟢 -0.18%) |
/teams |
240.84 KB |
392.88 KB | 112.25% (🟢 -0.20%) |
/video/meeting-ended/[uid] |
95.94 KB |
247.97 KB | 70.85% (🟢 -0.18%) |
/video/meeting-not-started/[uid] |
95.58 KB |
247.61 KB | 70.75% (🟢 -0.18%) |
/video/no-meeting-found |
87.86 KB |
239.9 KB | 68.54% (🟢 -0.18%) |
/workflows |
253.7 KB |
405.74 KB | 115.93% (🟢 -0.20%) |
/workflows/[workflow] |
367.74 KB |
519.78 KB | 148.51% (🟢 -0.20%) |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-
@hariombalhara @zomars Are we good to come back and review this once more?
@keithwillcode There are just too many changes with the current approach. Unless we figure out a way to solve it in a trivial manner, we should avoid the implementation as it isn't a very common requirement.
@keithwillcode There are just too many changes with the current approach. Unless we figure out a way to solve it in a trivial manner, we should avoid the implementation as it isn't a very common requirement.
I agree with @hariombalhara here. So much goin on here with little known potential side-effects. Very niche request.
@Quentin-Guillemin this seems like it's solving a problem for yourself, I think its smart to keep this fix in your own personal fork for now! Thank you for the effort of raising this PR tho!
closing
