Skip to content

Commit 9a8e388

Browse files
danadajiandanadajian
committed
get frontend working in dev mode
1 parent 4d7fe35 commit 9a8e388

File tree

9 files changed

+54
-131
lines changed

9 files changed

+54
-131
lines changed

‎.gitignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,3 @@ app/frontend/cypress/screenshots
3232
app/frontend/cypress/videos
3333

3434
.nx/
35-
36-
app/public/*
37-
!app/public/island.svg

‎app/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
public/style.css

‎app/app.tsx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { PropsWithChildren } from 'react';
1+
import React from 'react';
22
import { MainPage } from './frontend/components/main-page';
33
import { ClientProvider } from './frontend/providers/client-provider';
44
import { BaseImageStateProvider } from './frontend/providers/base-image-state-provider';
@@ -31,22 +31,3 @@ export function App(props: {
3131
</ClientProvider>
3232
);
3333
}
34-
35-
export function OuterHtml(props: PropsWithChildren) {
36-
return (
37-
<html lang="en">
38-
<head>
39-
<meta charSet="UTF-8" />
40-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
41-
<link rel="icon" type="image/svg+xml" href="/public/island.svg" />
42-
<link
43-
rel="stylesheet"
44-
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
45-
/>
46-
<link rel="stylesheet" href="/public/globals.css" />
47-
<title>Comparadise</title>
48-
</head>
49-
<body>{props.children}</body>
50-
</html>
51-
);
52-
}

‎app/backend/src/router.ts‎

Lines changed: 1 addition & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
1-
import { AnyTRPCRouter, initTRPC } from '@trpc/server';
2-
import {
3-
type FetchHandlerRequestOptions,
4-
fetchRequestHandler
5-
} from '@trpc/server/adapters/fetch';
1+
import { initTRPC } from '@trpc/server';
62
import {
73
fetchCurrentPageInputSchema,
84
updateBaseImagesInputSchema
95
} from './schema';
106
import { fetchCurrentPage } from './fetchCurrentPage';
117
import { updateBaseImagesInS3 } from './updateBaseImagesInS3';
12-
import Elysia from 'elysia';
138

149
const t = initTRPC.create();
1510

@@ -23,47 +18,3 @@ export const router = t.router({
2318
});
2419

2520
export type AppRouter = typeof router;
26-
27-
type TRPCOptions = {
28-
endpoint?: string;
29-
} & Omit<
30-
FetchHandlerRequestOptions<AnyTRPCRouter>,
31-
'req' | 'router' | 'endpoint'
32-
>;
33-
34-
export const trpcRouter =
35-
(
36-
router: AnyTRPCRouter,
37-
{ endpoint = '/trpc', ...options }: TRPCOptions = { endpoint: '/trpc' }
38-
) =>
39-
(app: Elysia) => {
40-
return app
41-
.onParse(({ request: { url } }) => {
42-
if (getPath(url).startsWith(endpoint)) return true;
43-
})
44-
.get(`${endpoint}/*`, async ({ request }) => {
45-
return fetchRequestHandler({
46-
...options,
47-
req: request,
48-
router,
49-
endpoint
50-
});
51-
})
52-
.post(`${endpoint}/*`, async ({ request }) => {
53-
return fetchRequestHandler({
54-
...options,
55-
req: request,
56-
router,
57-
endpoint
58-
});
59-
});
60-
};
61-
62-
const getPath = (url: string) => {
63-
const start = url.indexOf('/', 9);
64-
const end = url.indexOf('?', start);
65-
66-
if (end === -1) return url.slice(start);
67-
68-
return url.slice(start, end);
69-
};

‎app/client.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
/// <reference lib="dom" />
2-
/// <reference lib="dom.iterable" />
31
import React from 'react';
4-
import { hydrateRoot } from 'react-dom/client';
2+
import { App } from './app';
3+
4+
import { createRoot } from 'react-dom/client';
55
import { BrowserRouter } from 'react-router-dom';
6-
import { App, OuterHtml } from './app';
76

8-
hydrateRoot(
9-
document,
10-
<BrowserRouter>
11-
<OuterHtml>
7+
document.addEventListener('DOMContentLoaded', () => {
8+
const root = createRoot(document.getElementById('root')!);
9+
root.render(
10+
<BrowserRouter>
1211
<App />
13-
</OuterHtml>
14-
</BrowserRouter>
15-
);
12+
</BrowserRouter>
13+
);
14+
});

‎app/package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"private": true,
44
"dependencies": {
55
"@aws-sdk/client-s3": "3.717.0",
6-
"@elysiajs/static": "1.1.2",
76
"@headlessui/react": "2.2.0",
87
"@octokit/rest": "20.1.1",
98
"@tanstack/react-query": "5.62.8",
@@ -13,11 +12,11 @@
1312
"@types/lodash": "4.17.13",
1413
"@types/react": "19.0.2",
1514
"@types/react-dom": "19.0.2",
16-
"elysia": "1.1.26",
1715
"lodash": "4.17.21",
1816
"react": "19.0.0",
1917
"react-dom": "19.0.0",
2018
"react-router-dom": "7.1.0",
19+
"trpc-bun-adapter": "1.2.2",
2120
"tailwindcss": "3.4.17",
2221
"zod": "3.24.1"
2322
},
@@ -29,7 +28,7 @@
2928
},
3029
"scripts": {
3130
"dev": "NODE_ENV=development bun --hot ./server.tsx",
32-
"prestart": "tailwindcss -o ./public/globals.css",
31+
"prestart": "tailwindcss -o ./public/style.css",
3332
"start": "bun ./server.tsx",
3433
"test": "nx docker comparadise && nx test:e2e frontend"
3534
}

‎app/public/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<html lang="en">
2+
<head>
3+
<title>Comparadise</title>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" type="image/svg+xml" href="./island.svg" />
7+
<link
8+
rel="stylesheet"
9+
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
10+
/>
11+
<script src="https://cdn.tailwindcss.com"></script>
12+
<link rel="stylesheet" href="./style.css" />
13+
</head>
14+
<body>
15+
<div id="root"></div>
16+
<script src="../client.tsx" type="module"></script>
17+
</body>
18+
</html>

‎app/server.tsx‎

Lines changed: 18 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,21 @@
1-
import { staticPlugin } from '@elysiajs/static';
2-
import Elysia from 'elysia';
3-
import { router, trpcRouter } from './backend/src/router';
4-
import { StaticRouter } from 'react-router-dom';
5-
import React from 'react';
6-
import { App, OuterHtml } from './app';
7-
// @ts-expect-error - have to import from server.browser for some reason
8-
import { renderToReadableStream } from 'react-dom/server.browser';
1+
import { router } from './backend/src/router';
2+
import { createBunHttpHandler } from 'trpc-bun-adapter';
3+
import { serve } from 'bun';
4+
import index from './public/index.html';
95

10-
await Bun.build({
11-
entrypoints: ['./client.tsx'],
12-
outdir: './public',
13-
minify: true,
14-
target: 'bun'
15-
});
16-
17-
const app = new Elysia()
18-
.get('/health', () => 'healthy')
19-
.use(trpcRouter(router))
20-
.use(staticPlugin())
21-
.get('*', async context => {
22-
const stream = await renderToReadableStream(
23-
<StaticRouter location={context.path}>
24-
<OuterHtml>
25-
<App
26-
bucket={context.query.bucket}
27-
commitHash={context.query.commitHash}
28-
diffId={context.query.diffId}
29-
/>
30-
{process.env.NODE_ENV === 'development' && (
31-
<script src="https://cdn.tailwindcss.com" />
32-
)}
33-
</OuterHtml>
34-
</StaticRouter>,
35-
{
36-
bootstrapScripts: ['./public/client.js']
37-
}
6+
const server = serve({
7+
static: {
8+
'/': index
9+
},
10+
port: process.env.PORT ?? 8080,
11+
async fetch(request, response) {
12+
const trpcHandler = createBunHttpHandler({ router, endpoint: '/trpc' });
13+
return (
14+
trpcHandler(request, response) ??
15+
new Response('Not found', { status: 404 })
3816
);
39-
return new Response(stream, {
40-
headers: { 'Content-Type': 'text/html' }
41-
});
42-
})
43-
.listen(process.env.PORT ?? 8080);
17+
},
18+
development: process.env.NODE_ENV === 'development'
19+
});
4420

45-
console.info(
46-
`App is running at http://${app.server?.hostname}:${app.server?.port}`
47-
);
21+
console.log(`Server running at ${server.url}`);

‎bun.lock‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)