Merge pull request #166 from AutomatingSciencePipeline/frontend-hot-r…

…eload

Frontend hot reload + frontend real™ actual™ production server

apps/backend/backend.Dockerfile

@@ -29,7 +29,7 @@ COPY Pipfile.lock .
 
 
 
-
+# =====================================================================================================
 FROM base AS development
 # Args explanation: https://stackoverflow.com/a/49705601
 # https://pipenv-fork.readthedocs.io/en/latest/basics.html#pipenv-install
@@ -46,7 +46,7 @@ CMD flask run --host=0.0.0.0 --no-debugger -p $BACKEND_PORT
 
 
 
-
+# =====================================================================================================
 FROM base AS production
 # Args explanation: https://stackoverflow.com/a/49705601
 # https://pipenv-fork.readthedocs.io/en/latest/basics.html#pipenv-install

apps/frontend/frontend.Dockerfile

@@ -1,27 +1,71 @@
-FROM node:14-alpine
+FROM node:14-alpine AS base
 
-# TODO find a way to toggle between dev and prod
-# ENV NODE_ENV=production
-ENV NODE_ENV=development
-
-# Retain installed node modules
-VOLUME [ "/home/node/app/node_modules" ]
+ARG FRONTEND_WEBSERVER_PORT
+ENV FRONTEND_WEBSERVER_PORT=$FRONTEND_WEBSERVER_PORT
 
-# Expose port
-# TODO switch to ${FRONTEND_WEBSERVER_PORT}
-EXPOSE 3000
+# Retain installed node modules between runs. Production always installs them fresh anyways (npm ci).
+# We can't use the deps from a host because windows and linux deps are different
+# VOLUME [ "/home/node/app/node_modules" ]
 
-WORKDIR /home/node/app
+WORKDIR /app
 
-# Install node modules
+# Copy in node requirements definitions
 COPY ["package.json", "package-lock.json*", "./"]
-# TODO find a way to toggle between dev and prod
-RUN npm install
-# RUN npm install --production
 
+
+
+# =====================================================================================================
+# Only reinstall dependencies when needed
+FROM base as build_deps
+WORKDIR /app
+
+RUN npm ci
+
+
+
+# =====================================================================================================
+FROM build_deps AS development
+WORKDIR /app
+
+# The source code will be bind monuted in via docker compose, so we don't need to copy it in here
+
+ENV NODE_ENV=development
+# Enable hot reload functionality https://github.com/vercel/next.js/issues/36774#issuecomment-1444286244
+ENV WATCHPACK_POLLING=true
+CMD npm run dev
+
+
+# =====================================================================================================
+# Below based on https://github.com/vercel/next.js/blob/7fde79a9e840f3c73b60b49dd7df6849d332d07d/examples/with-docker/Dockerfile
+FROM base AS builder
+WORKDIR /app
+
+COPY --from=build_deps /app/node_modules ./node_modules
 # Copy the rest of the source files over
 COPY [".", "./"]
 
-# TODO find a way to toggle between dev and normal npm run (env var?)
-# ENTRYPOINT [ "npm", "run", "start" ]
-ENTRYPOINT [ "npm", "run", "dev" ]
+RUN npm run build
+
+
+# =====================================================================================================
+# Below based on https://github.com/vercel/next.js/blob/7fde79a9e840f3c73b60b49dd7df6849d332d07d/examples/with-docker/Dockerfile
+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
+
+# 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
+
+ENV PORT=$FRONTEND_WEBSERVER_PORT
+
+CMD ["node", "server.js"]

apps/frontend/next.config.js

@@ -7,6 +7,7 @@
 
 const nextConfig = {
 	reactStrictMode: true,
+	output: 'standalone', // For deployment, https://nextjs.org/docs/advanced-features/output-file-tracing
 	images: {
 		// https://nextjs.org/docs/api-reference/next/image#remote-patterns
 		remotePatterns: [

apps/frontend/pages/dashboard.tsx

@@ -403,7 +403,7 @@ export default function DashboardPage() {
 													aria-hidden='true'
 												/>
 												<span className='text-sm text-gray-500 font-medium'>
-													{experiments?.length} project
+													{experiments?.length} project{experiments?.length == 1 ? '' : 's'}
 												</span>
 											</div>
 										</div>

docker-compose.dev.yml

@@ -10,3 +10,8 @@ services:
       target: development
     volumes:
       - ./apps/backend/:/app
+  app-frontend:
+    build: 
+      target: development
+    volumes:
+      - ./apps/frontend/:/app

docker-compose.yml

@@ -31,15 +31,18 @@ services:
     build:
       context: ./apps/frontend
       dockerfile: ./frontend.Dockerfile
+      target: runner
     container_name: glados-frontend
-    working_dir: /home/node/app
-    # TODO switch to ${FRONTEND_WEBSERVER_PORT}
+    environment:
+      FRONTEND_WEBSERVER_PORT: ${FRONTEND_WEBSERVER_PORT}
+    working_dir: /app
     ports:
-      - 3000:3000
-      - 80:3000
+      - ${FRONTEND_WEBSERVER_PORT}:${FRONTEND_WEBSERVER_PORT}
+      - 80:${FRONTEND_WEBSERVER_PORT}
     expose:
-      - "3000"
+      - "${FRONTEND_WEBSERVER_PORT}"
       - "80"
+
   app-mongodb:
     image: mongo
     container_name: glados-mongodb