feat: begin new ui
Some checks failed
/ build (push) Failing after 10s

fix: attempt to build using local docker file
This commit is contained in:
Kakious 2024-11-23 01:06:37 -05:00
parent 0f3e9e5363
commit 994a94f9e3
21 changed files with 894 additions and 179 deletions

View file

@ -19,8 +19,8 @@ jobs:
- name: Build and push frontend
uses: docker/build-push-action@v2
with:
context: .
file: ./apps/frontend/Dockerfile
context: ./apps/frontend/
file: Dockerfile
platforms: linux/amd64,linux/arm64
push: true
tags: |
@ -30,8 +30,8 @@ jobs:
- name: Build and push backend
uses: docker/build-push-action@v2
with:
context: .
file: ./apps/backend/Dockerfile
context: ./apps/backend/
file: Dockerfile
platforms: linux/amd64,linux/arm64
push: true
tags: |

View file

@ -1,39 +1,25 @@
FROM node:22-bookworm AS base
FROM node:22-alpine AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
FROM base AS base-build
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
COPY . /usr/src/app
WORKDIR /usr/src/app
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
FROM base-build AS backend-build
RUN pnpm run build-backend
RUN pnpm deploy --filter=backend --prod /prod/backend
FROM base-build AS frontend-build
RUN pnpm run build-frontend
RUN pnpm deploy --filter=frontend --prod /prod/frontend
FROM base AS builder-frontend
COPY --from=deps /usr/src/app /usr/src/app
RUN pnpm deploy --target frontend
FROM node:22-slim AS backend
FROM node:22-alpine AS frontend
WORKDIR /app
COPY --from=backend-build /prod/backend/package*.json ./
COPY --from=backend-build /prod/backend/dist ./dist
COPY --from=backend-build /prod/frontend/node_modules ./node_modules
COPY --from=backend-build /usr/src/app/keys ./keys
ENV NODE_ENV=production
EXPOSE 3001
CMD [ "node", "dist/main.js" ]
FROM node:22-slim AS frontend
WORKDIR /app
COPY --from=frontend-build /prod/frontend/package*.json ./
COPY --from=frontend-build /prod/frontend/.next ./.next
COPY --from=frontend-build /prod/frontend/node_modules ./node_modules
COPY --from=base-build /prod/frontend/.next ./.next
COPY --from=base-build /usr/src/app/apps/frontend/public ./.next/standalone/public
ENV NODE_ENV=production
EXPOSE 3000
CMD ["pnpm", "start"]
CMD ["node", ".next/standalone/server.js"]

View file

@ -14,7 +14,7 @@ COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
elif [ -f package-lock.json ]; then npm ci; \
elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --no-frozen-lockfile; \
else echo "Lockfile not found." && exit 1; \
fi
@ -22,7 +22,7 @@ RUN \
# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY ./apps/frontend .
COPY . .
RUN rm -rf /app/node_modules
COPY --from=deps /app/node_modules ./node_modules

View file

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

View file

@ -0,0 +1,35 @@
import type { Metadata } from 'next';
import './globals.css';
import '@mantine/core/styles.css';
import {
createTheme,
ColorSchemeScript,
MantineProvider,
// localStorageColorSchemeManager,
} from '@mantine/core';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
const theme = createTheme({});
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
<ColorSchemeScript defaultColorScheme="dark" />
</head>
<body>
<MantineProvider theme={theme} defaultColorScheme="dark">
{children}
</MantineProvider>
</body>
</html>
);
}

View file

@ -0,0 +1,9 @@
import { Center } from '@mantine/core';
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return <Center h={'100vh'}>{children}</Center>;
}

View file

@ -0,0 +1,5 @@
import LoginCard from './../../../components/auth/login/LoginCard';
export default async function Login() {
return <LoginCard />;
}

View file

@ -0,0 +1,9 @@
'use client';
export default function Providers({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return <>{children}</>;
}

View file

@ -0,0 +1,2 @@
.card {
}

View file

@ -0,0 +1,17 @@
import { Button, Card, Checkbox, Stack, TextInput } from '@mantine/core';
import classes from './LoginCard.module.css';
export default function LoginCard() {
return (
<Card shadow="sm" padding="lg" className={classes.card}>
<Stack gap={20}>
<TextInput label="Email" placeholder="Your email" />
<TextInput label="Password" placeholder="Your password" type="password" />
<Checkbox label="Remember me" variant="outline"></Checkbox>
<Button type="submit" variant="gradient" gradient={{ from: 'blue', to: 'purple', deg: 45 }}>
Login
</Button>
</Stack>
</Card>
);
}

View file

@ -1,8 +1,32 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
typescript: {
tsconfigPath: './tsconfig.next.json',
},
experimental: {
optimizePackageImports: [
'@mantine/core',
'@mantine/hooks',
'@mantine/dates',
'@mantine/form',
'@mantine/modals',
'@mantine/notifications',
'@mantine/nprogress',
'@mantine/dropzone',
'@mantine/charts',
],
},
output: 'standalone',
async redirects() {
return [
{
source: '/',
destination: '/login',
permanent: true,
},
];
},
};
export default nextConfig;

View file

@ -9,19 +9,33 @@
"lint": "next lint"
},
"dependencies": {
"@mantine/charts": "^7.14.1",
"@mantine/core": "^7.14.1",
"@mantine/dates": "^7.14.1",
"@mantine/dropzone": "^7.14.1",
"@mantine/form": "^7.14.1",
"@mantine/hooks": "^7.14.1",
"@mantine/modals": "^7.14.1",
"@mantine/notifications": "^7.14.1",
"@mantine/nprogress": "^7.14.1",
"dayjs": "^1.11.13",
"frontend": "link:",
"next": "14.2.15",
"react": "^18",
"react-dom": "^18",
"next": "14.2.15"
"recharts": "2"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"eslint": "^8",
"eslint-config-next": "14.2.15"
"eslint-config-next": "14.2.15",
"postcss": "^8.4.47",
"postcss-preset-mantine": "^1.17.0",
"postcss-simple-vars": "^7.0.1",
"tailwindcss": "^3.4.1",
"typescript": "^5"
},
"packageManager": "pnpm@9.5.0+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903"
"packageManager": "pnpm@9.5.0+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903"
}

View file

@ -2,6 +2,16 @@
const config = {
plugins: {
tailwindcss: {},
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};

View file

@ -1,31 +0,0 @@
import type { Metadata } from 'next';
import localFont from 'next/font/local';
import './globals.css';
const geistSans = localFont({
src: './fonts/GeistVF.woff',
variable: '--font-geist-sans',
weight: '100 900',
});
const geistMono = localFont({
src: './fonts/GeistMonoVF.woff',
variable: '--font-geist-mono',
weight: '100 900',
});
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
</html>
);
}

View file

@ -1,101 +0,0 @@
import Image from 'next/image';
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="https://nextjs.org/icons/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2">
Get started by editing{' '}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
src/app/page.tsx
</code>
.
</li>
<li>Save and see your changes instantly.</li>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="https://nextjs.org/icons/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org
</a>
</footer>
</div>
);
}

View file

@ -1,16 +1,16 @@
import type { Config } from "tailwindcss";
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
background: 'var(--background)',
foreground: 'var(--foreground)',
},
},
},

739
pnpm-lock.yaml generated

File diff suppressed because it is too large Load diff

View file

@ -11,8 +11,7 @@
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"paths": {
"@server/*": ["./apps/backend/src/*"],
"@web/*": ["./apps/frontend/*"]
"@server/*": ["./apps/backend/src/*"]
}
}
}