🧑‍💻(docker) split frontend to another file

This commit aims at improving the user experience:
- Use a dedicated `Dockerfile` for the frontend
- Run the backend and frontend in "watch"/dev mode in Docker
- Do not start all Docker instances for small tasks

src/backend/pyproject.toml

@@ -34,6 +34,7 @@ dependencies = [
     "django-configurations==2.5.1",
     "django-cors-headers==4.7.0",
     "django-countries==7.6.1",
+    "django-extensions==4.1",
     "django-lasuite==0.0.9",
     "django-oauth-toolkit==3.0.1",
     "django-parler==2.3",
@@ -70,7 +71,6 @@ dependencies = [
 
 [project.optional-dependencies]
 dev = [
-    "django-extensions==4.1",
     "drf-spectacular-sidecar==2025.6.1",
     "ipdb==0.13.13",
     "ipython==9.3.0",

src/frontend/Dockerfile

@@ -0,0 +1,63 @@
+FROM node:22-alpine AS frontend-deps
+
+# Upgrade system packages to install security updates
+RUN apk update && \
+  apk upgrade && \
+  rm -rf /var/cache/apk/*
+
+WORKDIR /home/frontend/
+
+COPY ./src/frontend/package.json ./package.json
+COPY ./src/frontend/yarn.lock ./yarn.lock
+COPY ./src/frontend/apps/desk/package.json ./apps/desk/package.json
+COPY ./src/frontend/packages/i18n/package.json ./packages/i18n/package.json
+COPY ./src/frontend/packages/eslint-config-people/package.json ./packages/eslint-config-people/package.json
+
+RUN yarn install --frozen-lockfile
+
+COPY .dockerignore ./.dockerignore
+COPY ./src/frontend/.prettierrc.js ./.prettierrc.js
+COPY ./src/frontend/packages/eslint-config-people ./packages/eslint-config-people
+COPY ./src/frontend/apps/desk ./apps/desk
+
+### ---- Front-end builder image ----
+FROM frontend-deps AS frontend-base
+
+WORKDIR /home/frontend/apps/desk
+
+### ---- Front-end builder dev image ----
+FROM frontend-deps AS frontend-dev
+
+WORKDIR /home/frontend/apps/desk
+
+EXPOSE 3000
+
+CMD [ "yarn", "dev"]
+
+
+FROM frontend-base AS frontend-builder
+
+WORKDIR /home/frontend/apps/desk
+
+ARG API_ORIGIN
+ENV NEXT_PUBLIC_API_ORIGIN=${API_ORIGIN}
+
+RUN yarn build
+
+# ---- Front-end image ----
+FROM nginxinc/nginx-unprivileged:alpine3.21 AS frontend-production
+
+# Un-privileged user running the application
+ARG DOCKER_USER
+USER ${DOCKER_USER}
+
+COPY --from=frontend-builder \
+    /home/frontend/apps/desk/out \
+    /usr/share/nginx/html
+
+COPY ./src/frontend/apps/desk/conf/default.conf /etc/nginx/conf.d
+COPY ./docker/files/usr/local/bin/entrypoint /usr/local/bin/entrypoint
+
+ENTRYPOINT [ "/usr/local/bin/entrypoint" ]
+
+CMD ["nginx", "-g", "daemon off;"]

src/frontend/apps/desk/conf/default.conf

@@ -1,4 +1,5 @@
 server {
+  listen 3000;
   listen 8080;
   server_name localhost;
   server_tokens off;

src/frontend/apps/e2e/__tests__/app-desk/mail-domain.spec.ts

@@ -97,6 +97,7 @@ test.describe('Mail domain', () => {
     });
 
     await page.goto('/mail-domains/unknown-domain.fr');
+    await page.waitForURL('/404/');
     await expect(
       page.getByText(
         'It seems that the page you are looking for does not exist or cannot be displayed correctly.',

src/frontend/apps/e2e/__tests__/app-desk/mail-domains-add.spec.ts

@@ -101,6 +101,8 @@ test.describe('Add Mail Domains', () => {
   test('checks 404 on mail-domains/[slug] page', async ({ page }) => {
     await page.goto('/mail-domains/unknown-domain');
 
+    await page.waitForURL('/404/');
+
     await expect(
       page.getByText(
         'It seems that the page you are looking for does not exist or cannot be displayed correctly.',

src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts

@@ -83,6 +83,7 @@ test.describe('Teams Create', () => {
 
   test('checks 404 on teams/[id] page', async ({ page }) => {
     await page.goto('/teams/some-unknown-team');
+    await page.waitForURL('/404/');
     await expect(
       page.getByText(
         'It seems that the page you are looking for does not exist or cannot be displayed correctly.',

src/frontend/apps/e2e/playwright.config.ts

@@ -32,12 +32,10 @@ export default defineConfig({
   },
 
   webServer: {
-    command: `cd ../.. && yarn app:${
-      process.env.CI ? 'start -p ' : 'dev --port '
-    } ${PORT}`,
+    command: !process.env.CI ? `cd ../.. && yarn app:dev --port ${PORT}` : '',
     url: baseURL,
     timeout: 120 * 1000,
-    reuseExistingServer: !process.env.CI,
+    reuseExistingServer: true,
   },
 
   /* Configure projects for major browsers */