remoll/moll.re
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

using jsx

Browse Source
This commit is contained in:
Remy Moll 2024-02-08 14:42:18 +01:00
parent 5f0c06216d
commit adf5dde73c
5 changed files with 40 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/Dockerfile
View File

@ -1,35 +1,20 @@
FROM docker.io/oven/bun as base FROM docker.io/oven/bun as base
WORKDIR /usr/src/app
# install dependencies into temp directory # install dependencies into temp directory
FROM base AS install FROM base AS install
RUN mkdir -p /temp/dev WORKDIR /modules
COPY package.json bun.lockb /temp/dev/ COPY package.json bun.lockb /modules/
RUN cd /temp/dev && bun install --frozen-lockfile RUN bun install --frozen-lockfile --production
# install with --production (exclude devDependencies)
RUN mkdir -p /temp/prod
COPY package.json bun.lockb /temp/prod/
RUN cd /temp/prod && bun install --frozen-lockfile --production
# copy node_modules from temp directory
# then copy all (non-ignored) project files into the image
FROM base AS prerelease
COPY --from=install /temp/dev/node_modules node_modules
COPY . .
# [optional] tests & build
ENV NODE_ENV=production
RUN bun test
RUN bun run build
# copy production dependencies and source code into final image # copy production dependencies and source code into final image
FROM base AS release FROM base AS release
COPY --from=install /temp/prod/node_modules node_modules WORKDIR /usr/src/app
COPY --from=prerelease /usr/src/app/index.ts .
COPY --from=prerelease /usr/src/app/package.json . COPY --from=install /modules/node_modules node_modules
COPY src .
# run the app # run the app
USER bun USER bun
EXPOSE 3000/tcp EXPOSE 3000/tcp
ENTRYPOINT [ "bun", "run", "index.ts" ] ENTRYPOINT [ "bun", "run", "index.tsx" ]

4
frontend/package.json
View File

@ -4,9 +4,9 @@
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"dev": "bun run tailwind:dev | bun run elxsia:dev", "dev": "bun run tailwind:dev | bun run elxsia:dev",
"elxsia:dev": "bun --watch src/index.ts", "elxsia:dev": "bun --watch src/index.tsx",
"build": "bun run tailwind:build", "build": "bun run tailwind:build",
"start": "bun run src/index.ts", "start": "bun run src/index.tsx",
"tailwind:build": "bunx tailwindcss -i ./src/style.css -o ./public/style.css --minify", "tailwind:build": "bunx tailwindcss -i ./src/style.css -o ./public/style.css --minify",
"tailwind:dev": "bunx tailwindcss -i ./src/style.css -o ./public/style.css --watch" "tailwind:dev": "bunx tailwindcss -i ./src/style.css -o ./public/style.css --watch"
}, },

5
frontend/src/index.ts → frontend/src/index.tsx
View File

@ -6,6 +6,8 @@ import { staticPlugin } from "@elysiajs/static";
// // @ts-ignore // // @ts-ignore
// import data from "../package.json"; // import data from "../package.json";
import { HomeLayout } from "./layout";
export const server = new Elysia() export const server = new Elysia()
.use(html()) .use(html())
.use(staticPlugin()) .use(staticPlugin())
@ -17,12 +19,11 @@ export const server = new Elysia()
.onError(({ code, error }) => { .onError(({ code, error }) => {
console.error(code, error); console.error(code, error);
}) })
.get("/", () => "Hello World") .get("/", ({html}) => html(<HomeLayout><div>hello world</div></HomeLayout>))
.listen(Bun.env["PORT"] ?? 3000); .listen(Bun.env["PORT"] ?? 3000);
console.log( console.log(
`app is running at ${server.server?.hostname}:${server.server?.port}`, `app is running at ${server.server?.hostname}:${server.server?.port}`,
); );

23
frontend/src/layout.tsx Normal file
View File

@ -0,0 +1,23 @@
import { html } from "@elysiajs/html";
const HomeLayout = ({ children }: elements.Children) => `
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/htmx.org@1.9.5"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link href="/public/style.css" rel="stylesheet" type="text/css" />
// not working
<title>BETH STACK</title>
</head>
<body class="h-screen w-screen flex flex-col gap-3 items-center justify-center">
<span class='text-xl font-semibold'>BETH STACK</span>
<div class='flex flex-col items-center justify-center gap-2 mb-5'>
<span class='text-neutral-500 font-semibold'>Bun 1.0</span>
<span class='text-violet-500 font-semibold'>Elysia</span>
<span class='text-lime-500 font-semibold'>Turso</span>
<span class='text-sky-500 font-semibold'>Htmx</span>
</div>
${children}
</body>
`;
export { HomeLayout }

4
frontend/tsconfig.json
View File

@ -1,5 +1,9 @@
{ {
"compilerOptions": { "compilerOptions": {
"jsx": "react",
"jsxFactory": "Html.createElement",
"jsxFragmentFactory": "Html.Fragment",
/* Visit https://aka.ms/tsconfig to read more about this file */ /* Visit https://aka.ms/tsconfig to read more about this file */
/* Projects */ /* Projects */