Merge pull request #823 from Health-Informatics-UoN/feat/770/develope…

…r-quickstart

NextJS Docker containerising

.dockerignore

@@ -1 +1,2 @@
 react-client-app/node_modules
+next-client-app/node_modules

.gitignore

@@ -13,3 +13,5 @@ app/api/static/javascript/react
 app/api/staticfiles
 .venv
 dist
+api/static
+vocabs

app/Dockerfile

@@ -24,18 +24,6 @@ RUN curl -y --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
 RUN addgroup -q django && \
     adduser --quiet --ingroup django --disabled-password django
 
-# Copy 3 files to /react-client-app directory, which can be used for building dependencies
-RUN mkdir /react-client-app
-COPY ./react-client-app/package.json ./react-client-app/package-lock.json ./react-client-app/snowpack.config.js /react-client-app
-RUN chown -R django:django /react-client-app
-
-# Install nvm as django user, and install all dependencies
-USER django
-WORKDIR /react-client-app
-RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
-ENV NVM_DIR "/home/django/.nvm"
-RUN [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" && nvm install 12.18.3 && npm install
-
 # Create /api directory for mounting
 USER root
 RUN mkdir /api
@@ -46,12 +34,12 @@ RUN chown -R django:django /api
 USER django
 ENV PATH=/home/django/.local/bin:$PATH
 
-# Copy pyproject.toml
-COPY /api/pyproject.toml /api/pyproject.toml
-COPY /api/poetry.lock /api/poetry.lock
+# Copy pyproject.toml and poetry.lock
+COPY ./api/pyproject.toml /api/pyproject.toml
+COPY ./api/poetry.lock /api/poetry.lock
 
 # Copy shared package
-COPY /shared /shared
+COPY ./shared /shared
 
 # Install Poetry
 RUN pip install poetry
@@ -61,17 +49,26 @@ RUN poetry config virtualenvs.create false \
     && poetry export --format requirements.txt --output /api/requirements.txt --without-hashes \
     && pip install --no-cache-dir -r /api/requirements.txt
 
-# Copy react-client-app/src and react-client-app/.storybook directories
+# Copy react-client-app directory
+USER root
+COPY ./react-client-app /react-client-app
+RUN chown -R django:django /react-client-app
+
+# Install nvm as django user
 USER django
-COPY ./react-client-app/src /react-client-app/src
-COPY ./react-client-app/.storybook /react-client-app/.storybook
 WORKDIR /react-client-app
+RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
+ENV NVM_DIR "/home/django/.nvm"
+RUN [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" && nvm install 12.18.3 && npm install
 
 # Copy entrypoint as root, elevate it to executable, then give it over to django user
 USER root
 COPY ./entrypoint.sh /entrypoint.sh
 RUN chmod u+x /entrypoint.sh
 RUN chown -R django:django /entrypoint.sh
+
+# Set the working directory to /api
+WORKDIR /api
 ENTRYPOINT ["/entrypoint.sh"]
 
 # Return to django user to run the container as this user by default

app/entrypoint.sh

@@ -7,8 +7,9 @@ npm run build
 # Wait until DB is available
 wait-for-it ${COCONNECT_DB_HOST}:${COCONNECT_DB_PORT} -- echo "Database is ready! Listening on ${COCONNECT_DB_HOST}:${COCONNECT_DB_PORT}"
 
-# Collect static files for serving
 cd /api
+
+# Collect static files for serving
 rm -rf staticfiles
 mkdir staticfiles
 python /api/manage.py collectstatic

app/next-client-app/.dockerignore

@@ -0,0 +1,9 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git
+!.next/static
+!.next/standalone

app/next-client-app/Dockerfile

@@ -0,0 +1,57 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+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
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f package-lock.json ]; then npm ci; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Build the app
+RUN \
+  if [ -f package-lock.json ]; then npm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD HOSTNAME="0.0.0.0" node server.js

app/next-client-app/components/core/sidebar.tsx

@@ -74,12 +74,11 @@ export function Sidebar({ userName }: { userName: string }) {
                 <Link href={"/"}>
                   <div className="text-2xl flex items-center font-semibold">
                     <Image
-                      width={17}
-                      height={0}
+                      width={22}
+                      height={22}
                       src="/carrot-logo.png"
                       alt="carrot-logo"
                       className="mx-3"
-                      style={{ width: "100%", height: "auto" }}
                     />
                     Carrot
                   </div>
@@ -147,12 +146,11 @@ export function Sidebar({ userName }: { userName: string }) {
         <Link href={"/"}>
           <div className="text-2xl flex items-center font-semibold">
             <Image
-              width={17}
-              height={0}
+              width={22}
+              height={22}
               src="/carrot-logo.png"
               alt="carrot-logo"
               className="mx-3"
-              style={{ width: "auto", height: "100%" }}
             />
             Carrot
           </div>