fix: fix css not loading (#1217)

* fix: fix css not loading

* chore: update public api endpoint for tasks

* feat: update docker version for tasks

* chore: update default env variables

---------

Co-authored-by: Felix Evers <git@felixevers.de>

Author: DasProffi

Dockerfile.tasks

@@ -1,43 +1,44 @@
-FROM node:20.18.1 as build
-ENV NEXT_TELEMETRY_DISABLED 1
+FROM node:22.15.1 AS build
+
+ENV NEXT_TELEMETRY_DISABLED=1
 ARG WS="@helpwave/tasks"
 
-# install pnpm
-RUN npm install --global pnpm@9
+RUN npm install -g pnpm@9
 
 WORKDIR /web
 
-# copy all dependency declarations inside the container
-COPY package.json .
-COPY pnpm-lock.yaml .
-COPY pnpm-workspace.yaml .
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
 COPY tasks/package.json ./tasks/
 COPY api-services/package.json ./api-services/
 
-# install dependencies
 RUN CI=1 pnpm install
 
-# build tasks app
 COPY tasks ./tasks/
 COPY api-services ./api-services/
+
 RUN pnpm --filter $WS run build
 
-FROM node:20.18.1-alpine
+
+FROM node:22.15.1-alpine
 
 LABEL maintainer="tech@helpwave.de"
 
-ENV NEXT_TELEMETRY_DISABLED 1
+ENV NEXT_TELEMETRY_DISABLED=1
+
 WORKDIR /web
 
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
+RUN addgroup -g 1001 nodejs && \
+    adduser -S -u 1001 -G nodejs nextjs
 
-# copy transpiled app
 COPY --from=build --chown=nextjs:nodejs /web/tasks/build/standalone ./
 COPY --from=build --chown=nextjs:nodejs /web/tasks/public ./tasks/public
 COPY --from=build --chown=nextjs:nodejs /web/tasks/build/static ./tasks/build/static
 
+USER nextjs
+
 EXPOSE 80
-ENV PORT 80
-ENV HOSTNAME 0.0.0.0
+ENV PORT=80
+ENV HOSTNAME=0.0.0.0
+ENV NODE_ENV=production
+
 CMD ["node", "tasks/server.js"]

api-services/config/config.ts

@@ -26,10 +26,10 @@ import { z } from 'zod'
 
 const configSchema = z.object({
   NODE_ENV: z.literal('production').or(z.literal('development')).default('production'),
-  NEXT_PUBLIC_API_URL: z.string().url().default('https://api.helpwave.de'),
+  NEXT_PUBLIC_API_URL: z.string().url().default('https://services.helpwave.de'),
   NEXT_PUBLIC_OFFLINE_API: z.literal('true').or(z.literal('false')).optional(),
   NEXT_PUBLIC_REQUEST_LOGGING: z.literal('true').or(z.literal('false')).optional(),
-  NEXT_PUBLIC_OAUTH_ISSUER_URL: z.string().url().default('https://auth.helpwave.de'),
+  NEXT_PUBLIC_OAUTH_ISSUER_URL: z.string().url().default('https://id.helpwave.de'),
   NEXT_PUBLIC_OAUTH_REDIRECT_URI: z.string().url().default('https://tasks.helpwave.de/auth/callback'),
   NEXT_PUBLIC_OAUTH_CLIENT_ID: z.string().default('425f8b8d-c786-4ff7-b2bf-e52f505fb588'),
   NEXT_PUBLIC_OAUTH_SCOPES: z.string().default('openid,offline_access,email,nickname,name,organizations'),

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-NEXT_PUBLIC_API_URL=https://staging.api.helpwave.de
+NEXT_PUBLIC_API_URL=https://services.helpwave.de
 NEXT_PUBLIC_OFFLINE_API=false
 NEXT_PUBLIC_OAUTH_REDIRECT_URI=http://localhost:3000/auth/callback
 NEXT_PUBLIC_FAKE_TOKEN_ENABLE=true

tasks/.env.development

@@ -1,5 +1,5 @@
 NODE_ENV=production
-NEXT_PUBLIC_API_URL=https://staging.api.helpwave.de
-NEXT_PUBLIC_OAUTH_REDIRECT_URI=https://staging-tasks.helpwave.de/auth/callback
+NEXT_PUBLIC_API_URL=https://services.helpwave.de
+NEXT_PUBLIC_OAUTH_REDIRECT_URI=https://tasks.helpwave.de/auth/callback
 NEXT_PUBLIC_FAKE_TOKEN_ENABLE=true
 NEXT_PUBLIC_SHOW_STAGING_DISCLAIMER_MODAL=true

tasks/.env.production

@@ -24,11 +24,11 @@ export type HeaderProps = {
  */
 const Header = ({ title, leftSide = [], rightSide = [], withIcon = true }: HeaderProps) => {
   return (
-    <div className="h-16 py-4 relative items-center justify-between border-b border-slate-900/10">
-      <div className="gap-4 w-full justify-between mx-4">
-        <div className="w-full relative items-center align-center">
+    <div className="row h-16 py-4 relative items-center justify-between border-b border-slate-900/10">
+      <div className="row gap-4 w-full justify-between mx-4">
+        <div className="row w-full relative items-center align-center">
           {withIcon && (
-            <div className="relative gap-2 align-center">
+            <div className="row relative align-center">
               <Link href="/">
                 <Helpwave size={52} />
               </Link>
@@ -42,7 +42,7 @@ const Header = ({ title, leftSide = [], rightSide = [], withIcon = true }: Heade
             </div>
           ))}
         </div>
-        <div className="w-full items-center justify-end">
+        <div className="row w-full items-center justify-end">
           {rightSide?.filter(value => value !== undefined).map((value, index) => (
             <div key={'rightAction' + index} className="row items-center">
               {value}

tasks/components/Header.tsx

@@ -59,7 +59,7 @@ export const UserMenu = ({
   const settingsURL = `${config.oauth.issuerUrl}/ui/settings`
 
   return (
-    <div className="relative z-10">
+    <div className="row relative z-10">
       <LanguageModal
         id="userMenu-LanguageModal"
         onDone={() => setLanguageModalOpen(false)}
@@ -69,7 +69,7 @@ export const UserMenu = ({
       />
       <Menu<HTMLDivElement> alignment="_r" trigger={(onClick, ref) => (
         <div ref={ref} onClick={onClick}
-             className="gap-2 relative items-center group cursor-pointer select-none">
+             className="row relative items-center group cursor-pointer select-none">
           {/* TODO set this color in the css config */}
           <div className="text-sm font-semibold text-gray-700 group-hover:text-primary">{user.name}</div>
           <Avatar avatarUrl={user.avatarUrl} alt={user.email} size="small"/>

tasks/components/UserMenu.tsx

@@ -33,7 +33,7 @@ export const PageWithHeader = ({
   const userMenu = <UserMenu />
 
   return (
-    <div className="w-screen h-screen col">
+    <div className="col w-screen h-screen">
       <Header
         title={title}
         withIcon={withIcon}

tasks/components/layout/PageWithHeader.tsx

@@ -0,0 +1,4 @@
+@import 'tailwindcss';
+@import '@helpwave/hightide/globals.css';
+
+@source "./node_modules/@helpwave/hightide";

tasks/globals.css

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "tsc --noEmit && eslint .",
@@ -17,6 +17,7 @@
     "@helpwave/api-services": "workspace:*",
     "@helpwave/hightide": "^0.0.8",
     "@radix-ui/react-checkbox": "1.1.3",
+    "@tailwindcss/postcss": "^4.1.3",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
     "@tanstack/react-table": "8.20.6",
@@ -36,6 +37,7 @@
     "rxjs": "7.8.1",
     "simplebar-core": "1.3.0",
     "simplebar-react": "3.3.0",
+    "tailwindcss": "^4.1.3",
     "typescript": "5.7.2",
     "zod": "3.24.1"
   },