Replace Next with Vite + tanstack/router #4612

kamilkisiela · 2024-04-29T20:42:18Z

Build

pnpm deploy is no longer needed
vite builds static files, runify builds a server code to serve static files and handle api routes.
turbo can now cache pnpm build of @hive/app

Development

pnpm dev gives us hot reloading and in general similar experience to what we had with Next
The HTTP server framework of choice is fastify as it has a good integration with vite (@fastify/vite, there was vite-express but we already use fastify in Hive, so it was an obvious choice). The @fastify/vite is only used in development node.

Production

files generated by vite build are served by @fastify/static
api routes are served by fastify

Docker

From now on, we serve @hive/app in the same fashion as other services, no dedicated docker file or configuration. The size of a docker image is now 4x lower than the previous one.

Routing

We moved from file-based to code-base routing and all routes are in router.tsx file. I hope you like it :)

All pages are in src/page directory, stored as flat files. To be honest, we could have a hierarchy there driven by directory structure, but I prefer flat files as it's easier to navigate and we avoid doing ../../../../ shit.

Thanks to @tanstack/router, all pieces of routing are type-safe, even params, you will love it.

I also removed useRouteSelector hook that gave us {organization|project|target}Id props based on an URL. We simply pass these using props.

Runtime Environment Variables

To still be able to build the app, ship it as a Docker image and pass env vars when running the docker container, we handle GET /__env.js in fastify, instead of generating a file.

fix <title> at target level
links to docs are not really pointing to docs

changeset-bot · 2024-04-29T20:42:22Z

⚠️ No Changeset found

Latest commit: b0c6a62

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2024-05-07T09:26:42Z

📚 Storybook Deployment

The latest changes are available as preview in: https://f71e2555.hive-storybook.pages.dev

github-actions · 2024-05-07T09:30:09Z

🐋 This PR was built and pushed to the following Docker images (tag: b0c6a62ec387c36b5dde702ad8b7382f8f052023):

Docker Bake metadata

{
"app": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/50x7p9242vij5ll2lhhv03hn1",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:ed86ef30a616e9aba55f71bed30989f7ba44573c62f190d97fa0b46b9bd45846",
    "size": 685
  },
  "containerimage.digest": "sha256:ed86ef30a616e9aba55f71bed30989f7ba44573c62f190d97fa0b46b9bd45846",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/app:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/app:kamil_vite"
},
"composition-federation-2": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/mvkna7sjqydul6ialr2aevgdv",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:109ff969ae378dc413dae2f85901d8ce1912a4f6b01bed4756a19843b9d6282b",
    "size": 685
  },
  "containerimage.digest": "sha256:109ff969ae378dc413dae2f85901d8ce1912a4f6b01bed4756a19843b9d6282b",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/composition-federation-2:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/composition-federation-2:kamil_vite"
},
"emails": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/mpb1chu6w7tekkuo328iwrzql",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:9b2fae5a3953f96fe56e677f1c2e265258257bd49840d6490313f1a7e9407d46",
    "size": 685
  },
  "containerimage.digest": "sha256:9b2fae5a3953f96fe56e677f1c2e265258257bd49840d6490313f1a7e9407d46",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/emails:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/emails:kamil_vite"
},
"policy": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/zctl7m7yaoksmqhtm3o2sliru",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:4ba5340caf12c5003de456cad579425908d06411135d6d88fa48d7d1b3435e74",
    "size": 685
  },
  "containerimage.digest": "sha256:4ba5340caf12c5003de456cad579425908d06411135d6d88fa48d7d1b3435e74",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/policy:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/policy:kamil_vite"
},
"rate-limit": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/yu0ye16xo776ui4rmryp6yiv2",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:df133c96c72d22e3c2b548a4782bfc4b59bebee68410113d4b82b5592936ad8b",
    "size": 685
  },
  "containerimage.digest": "sha256:df133c96c72d22e3c2b548a4782bfc4b59bebee68410113d4b82b5592936ad8b",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/rate-limit:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/rate-limit:kamil_vite"
},
"schema": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/t0c1lb1ms9eoonh3uxfuve6hd",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:2ac6352655835c4500553fd86e0695e35bdb166a63ee6e526064893bd7e86f06",
    "size": 685
  },
  "containerimage.digest": "sha256:2ac6352655835c4500553fd86e0695e35bdb166a63ee6e526064893bd7e86f06",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/schema:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/schema:kamil_vite"
},
"server": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/vxtj2ewllv4l4lei6v7snr4pq",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:5f20d51b4871cc1299840ff113a289f16d66b9313a3f40b613714680d9ff712b",
    "size": 685
  },
  "containerimage.digest": "sha256:5f20d51b4871cc1299840ff113a289f16d66b9313a3f40b613714680d9ff712b",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/server:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/server:kamil_vite"
},
"storage": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/txyvtzc5tj61zgjv2yjme63a9",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:e6ed1bc821b1aca65dea5a85504c92fdaa2757381f3ccab8a7a5bbad3225dfc9",
    "size": 685
  },
  "containerimage.digest": "sha256:e6ed1bc821b1aca65dea5a85504c92fdaa2757381f3ccab8a7a5bbad3225dfc9",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/storage:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/storage:kamil_vite"
},
"stripe-billing": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/azykd1aja7i7z18kxkejlbqr8",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:ac51273950d379b45664c1dabd06d6bc76c45e8fcfceab7727a946e47df90d25",
    "size": 685
  },
  "containerimage.digest": "sha256:ac51273950d379b45664c1dabd06d6bc76c45e8fcfceab7727a946e47df90d25",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/stripe-billing:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/stripe-billing:kamil_vite"
},
"tokens": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/iel6wpk68ikl4ox5362den1ka",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:4a35003563a8e1a7bca22a299a46f8df493cad8ec6e2aa08fa4e9ef53cfc9485",
    "size": 685
  },
  "containerimage.digest": "sha256:4a35003563a8e1a7bca22a299a46f8df493cad8ec6e2aa08fa4e9ef53cfc9485",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/tokens:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/tokens:kamil_vite"
},
"usage": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/4jlsi222vgwpot1auyqu2eq7a",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:f0de9eae867bfccd48649877a7343772a1e50f6445580f434b9c4c5aa8d1d058",
    "size": 685
  },
  "containerimage.digest": "sha256:f0de9eae867bfccd48649877a7343772a1e50f6445580f434b9c4c5aa8d1d058",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/usage:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/usage:kamil_vite"
},
"usage-estimator": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/6yxp9qhp17mqxalbltmwcadsr",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:68bf39b0ec87a2ec51db6fdc0cd7f872b6bae8f585f085af572115d8f71b1e95",
    "size": 685
  },
  "containerimage.digest": "sha256:68bf39b0ec87a2ec51db6fdc0cd7f872b6bae8f585f085af572115d8f71b1e95",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/usage-estimator:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/usage-estimator:kamil_vite"
},
"usage-ingestor": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/mau9bkdcc2jm8ctgrgfhu79l5",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:80271e7322ec70d8fa8ec22ca455c0a86cf299b5838b0a227b3335c6e621b5cd",
    "size": 685
  },
  "containerimage.digest": "sha256:80271e7322ec70d8fa8ec22ca455c0a86cf299b5838b0a227b3335c6e621b5cd",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/usage-ingestor:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/usage-ingestor:kamil_vite"
},
"webhooks": {
  "buildx.build.ref": "builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c/builder-c9e33c35-67fe-4abb-98c7-dac5f2f9c64c0/focx954nustfb1zeua4k5jm18",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:94db34157fb5a608ed305e234ccad045d2e1bb6400d8b27ecc7ac938c811838c",
    "size": 685
  },
  "containerimage.digest": "sha256:94db34157fb5a608ed305e234ccad045d2e1bb6400d8b27ecc7ac938c811838c",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/webhooks:b0c6a62ec387c36b5dde702ad8b7382f8f052023,ghcr.io/kamilkisiela/graphql-hive/webhooks:kamil_vite"
}
}

dotansimha · 2024-05-08T13:48:34Z

docker/app.dockerfile

@@ -1,24 +0,0 @@
-FROM node:21.7.3-slim


you can also consider using a simple HTTP server to serve the artifact, right?
something like busybox (https://lipanski.com/posts/smallest-docker-image-static-website)

true but we have routes there as well, we need an http server

we could move them to graphql-api and serve from there, but I did not want to do it in this PR

TuvalSimha · 2024-05-15T12:54:22Z

packages/web/app/src/components/v2/modals/delete-organization.tsx

              },
            });
-            void (await replace('/'));
+            void router.navigate({


I guess we need to handle users who have more than one organization?

if (props.organizations.length > 1) { const notCurrentOrg = props.organizations.find((org: any) => org.cleanId !== props.organizationId); router.navigate({ to: `/${notCurrentOrg.cleanId}`, }); } else { router.navigate({ to: '/org/new', }); }

hmmm it's redirecting to /.
When you enter /, it will find an organization you visited previously or redirect you to one of them.

TuvalSimha

left one comment about router and how to handle delete organization when user have more then 1 organizations

…ete it

github-actions · 2024-05-17T09:55:43Z

💻 Website Preview

The latest changes are available as preview in: https://dfa37297.hive-landing-page.pages.dev

kamilkisiela force-pushed the kamil-vite branch from 1b4fb29 to 3c137e0 Compare May 7, 2024 09:24

kamilkisiela force-pushed the kamil-vite branch from 133fc54 to 6acd093 Compare May 8, 2024 09:04

kamilkisiela marked this pull request as ready for review May 8, 2024 10:17

theguild-bot had a problem deploying to staging May 8, 2024 11:03 Failure

theguild-bot temporarily deployed to staging May 8, 2024 11:29 Inactive

theguild-bot temporarily deployed to staging May 8, 2024 11:55 Inactive

kamilkisiela force-pushed the kamil-vite branch from b15d41f to 55f3732 Compare May 8, 2024 12:35

theguild-bot temporarily deployed to staging May 8, 2024 12:44 Inactive

dotansimha approved these changes May 8, 2024

View reviewed changes

dotansimha reviewed May 8, 2024

View reviewed changes

kamilkisiela force-pushed the kamil-vite branch 2 times, most recently from 96d59bc to c3bf244 Compare May 9, 2024 11:12

kamilkisiela changed the title ~~Vite + tanstack/router~~ Replace Next with Vite + tanstack/router May 9, 2024

kamilkisiela force-pushed the kamil-vite branch 2 times, most recently from 8f9f5e3 to e4c2afd Compare May 15, 2024 10:59

theguild-bot temporarily deployed to staging May 15, 2024 11:15 Inactive

TuvalSimha self-requested a review May 15, 2024 12:51

TuvalSimha reviewed May 15, 2024

View reviewed changes

TuvalSimha requested changes May 15, 2024

View reviewed changes

kamilkisiela added 6 commits May 17, 2024 11:52

Replace Next with Vite + tanstack/router

26979a9

Fixes

317759f

Gracefully handle missing previously visited organization when we del…

757df60

…ete it

todos

46bcc4a

Fixes

02cee9c

Fixes

8e58e9d

kamilkisiela force-pushed the kamil-vite branch from 55a39b9 to 8e58e9d Compare May 17, 2024 09:52

theguild-bot temporarily deployed to staging May 17, 2024 10:12 Inactive

kamilkisiela added 4 commits May 17, 2024 12:15

eslint fixes

d726c44

react-helmet-async

be2fbc6

A proper fix

b6d8b59

A proper fix

e5e8183

theguild-bot temporarily deployed to staging May 17, 2024 11:49 Inactive

fixes

b0c6a62

theguild-bot temporarily deployed to staging May 17, 2024 12:21 Inactive

kamilkisiela merged commit 368f284 into main May 17, 2024
25 checks passed

kamilkisiela deleted the kamil-vite branch May 17, 2024 12:30

kamilkisiela mentioned this pull request May 21, 2024

Evaluate vite/vite-plugin-ssr as a Next.js replacement #430

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace Next with Vite + tanstack/router #4612

Replace Next with Vite + tanstack/router #4612

kamilkisiela commented Apr 29, 2024 •

edited

changeset-bot bot commented Apr 29, 2024 •

edited

github-actions bot commented May 7, 2024 •

edited

github-actions bot commented May 7, 2024 •

edited

dotansimha May 8, 2024

kamilkisiela May 8, 2024

kamilkisiela May 8, 2024

TuvalSimha May 15, 2024

kamilkisiela May 15, 2024

TuvalSimha left a comment

github-actions bot commented May 17, 2024 •

edited

Replace Next with Vite + tanstack/router #4612

Replace Next with Vite + tanstack/router #4612

Conversation

kamilkisiela commented Apr 29, 2024 • edited

Build

Development

Production

Docker

Routing

Runtime Environment Variables

changeset-bot bot commented Apr 29, 2024 • edited

⚠️ No Changeset found

github-actions bot commented May 7, 2024 • edited

📚 Storybook Deployment

github-actions bot commented May 7, 2024 • edited

dotansimha May 8, 2024

Choose a reason for hiding this comment

kamilkisiela May 8, 2024

Choose a reason for hiding this comment

kamilkisiela May 8, 2024

Choose a reason for hiding this comment

TuvalSimha May 15, 2024

Choose a reason for hiding this comment

kamilkisiela May 15, 2024

Choose a reason for hiding this comment

TuvalSimha left a comment

Choose a reason for hiding this comment

github-actions bot commented May 17, 2024 • edited

💻 Website Preview

kamilkisiela commented Apr 29, 2024 •

edited

changeset-bot bot commented Apr 29, 2024 •

edited

github-actions bot commented May 7, 2024 •

edited

github-actions bot commented May 7, 2024 •

edited

github-actions bot commented May 17, 2024 •

edited