feat: LEAP-452: FE Repo Modernization / Monorepo

.dockerignore

@@ -11,6 +11,7 @@
 !deploy/uwsgi.ini
 !deploy/default.conf
 !label_studio/**
+!web/**
 !setup.py
 !README.md
 !licenses/**

.gitignore

@@ -7,15 +7,15 @@ __pycache__
 # docs
 __generated__
 \#$
-data/
+docs/data/
 etc/
 /src/
 yarn-error.log
+/dist/
 
 # mobile/builds
 db/
 logfile
-env/
 venv/
 .venv
 .vscode

Dockerfile

@@ -1,12 +1,13 @@
 # syntax=docker/dockerfile:1.3
-FROM node:18 AS frontend-builder
+FROM --platform=${BUILDPLATFORM} node:18 AS frontend-builder
 
 ENV NPM_CACHE_LOCATION=$HOME/.cache/yarn/v6 \
-    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
+    NX_REJECT_UNKNOWN_LOCAL_CACHE=0
 
-WORKDIR /label-studio/label_studio/frontend
+WORKDIR /label-studio/web
 
-COPY --chown=1001:0 label_studio/frontend .
+COPY --chown=1001:0 web .
 COPY --chown=1001:0 pyproject.toml /label-studio
 
 # Fix Docker Arm64 Build
@@ -15,7 +16,7 @@ RUN yarn config set network-timeout 1200000 # HTTP timeout used when downloading
 
 RUN --mount=type=cache,target=$NPM_CACHE_LOCATION,uid=1001,gid=0 \
     yarn install --frozen-lockfile \
- && yarn run build:production
+    && yarn run build
 
 FROM ubuntu:22.04
 
@@ -71,8 +72,8 @@ RUN --mount=type=cache,target=$POETRY_CACHE_DIR \
 
 COPY --chown=1001:0 . .
 
-RUN rm -rf ./label_studio/frontend
-COPY --chown=1001:0 --from=frontend-builder /label-studio/label_studio/frontend/dist ./label_studio/frontend/dist
+RUN rm -rf ./label_studio/web
+COPY --chown=1001:0 --from=frontend-builder /label-studio/web/dist ./label_studio/web/dist
 
 RUN python3 label_studio/manage.py collectstatic --no-input && \
     chown -R 1001:0 $LS_DIR && \

MANIFEST.in

@@ -1,16 +1,16 @@
 include deploy/requirements.txt
 
 # react LSF / react-app with dm
-recursive-include label_studio/frontend/dist/lsf *
-include label_studio/frontend/dist/react-app/*
-recursive-include label_studio/frontend/dist/dm/ *
+recursive-include web/dist/libs/editor *
+include web/dist/apps/labelstudio/*
+recursive-include web/dist/libs/datamanager/ *
 
 # html template files
 recursive-include label_studio *.html
 
 # exclude node modules
-prune label_studio/frontend/node_modules
-prune label_studio/frontend/build-tmp
+prune web/node_modules
+prune web/build-tmp
 
 # annotation templates
 recursive-include label_studio/annotation_templates *
@@ -36,4 +36,4 @@ recursive-include label_studio/tests/test_suites *.yml
 include label_studio/pytest.ini
 
 # feature flags
-include label_studio/feature_flags.json
+include label_studio/feature_flags.json

Makefile

@@ -16,19 +16,20 @@ shell-dev:
 
 # Install modules
 frontend-setup:
-	cd label_studio/frontend && yarn install --frozen-lockfile && yarn run download:all;
+	cd web && yarn install --frozen-lockfile;
 
-# Fetch DM and LSF
-frontend-fetch:
-	cd label_studio/frontend && yarn run download:all;
+# Keep it here for potential rollback
+## Fetch DM and LSF
+#frontend-fetch:
+#	cd label_studio/frontend && yarn run download:all;
 
 # Build frontend continuously on files changes
 frontend-watch:
-	cd label_studio/frontend && yarn start
+	cd web && yarn run watch
 
 # Build production-ready optimized bundle
-frontend-build:
-	cd label_studio/frontend && yarn install --frozen-lockfile && yarn run build:production
+frontend-build: frontend-setup
+	cd web && yarn run build
 
 # Run tests
 test:

deploy/default.conf

@@ -123,19 +123,19 @@ http {
     # Frontend react
     # Source: https://github.com/heartexlabs/label-studio-frontend
     location /label-studio-frontend/ {
-        alias /label-studio/label_studio/frontend/dist/lsf/;
+        alias /label-studio/web/dist/libs/editor/;
     }
 
     # Data Manager
     # Source: https://github.com/heartexlabs/dm2
     location /dm/ {
-        alias /label-studio/label_studio/frontend/dist/dm/;
+        alias /label-studio/web/dist/libs/datamanager/;
     }
 
     # LabelStudio frontend
     # Source: https://github.com/heartexlabs/label-studio/blob/HEAD/label_studio/frontend/src
     location /react-app/ {
-        alias /label-studio/label_studio/frontend/dist/react-app/;
+        alias /label-studio/web/dist/apps/labelstudio/;
     }
 
     location /nginx_health {

docker-compose.yml

@@ -11,6 +11,7 @@ services:
       - app
     environment:
       - LABEL_STUDIO_HOST=${LABEL_STUDIO_HOST:-}
+      - ENABLE_MONOREPO_ENV=1
     #   Optional: Specify SSL termination certificate & key
     #   Just drop your cert.pem and cert.key into folder 'deploy/nginx/certs'
     #      - NGINX_SSL_CERT=/certs/cert.pem

label_studio/core/settings/base.py

@@ -476,12 +476,23 @@
 ALLOW_IMPORT_TASKS_WITH_UNKNOWN_EMAILS = get_bool_env('ALLOW_IMPORT_TASKS_WITH_UNKNOWN_EMAILS', default=False)
 
 """ React Libraries: do not forget to change this dir in /etc/nginx/nginx.conf """
+
+ENABLE_MONOREPO_ENV = get_bool_env('ENABLE_MONOREPO_ENV', default=False)
+
 # EDITOR = label-studio-frontend repository
-EDITOR_ROOT = os.path.join(BASE_DIR, '../frontend/dist/lsf')
+EDITOR_ROOT = (
+    os.path.join(BASE_DIR, '../../web/dist/libs/editor')
+    if ENABLE_MONOREPO_ENV
+    else os.path.join(BASE_DIR, '../../label_studio/frontend/dist/lsf')
+)
 # DM = data manager (included into FRONTEND due npm building, we need only version.json file from there)
-DM_ROOT = os.path.join(BASE_DIR, '../frontend/dist/dm')
+DM_ROOT = (
+    os.path.join(BASE_DIR, '../../web/dist/libs/datamanager')
+    if ENABLE_MONOREPO_ENV
+    else os.path.join(BASE_DIR, '../../label_studio/frontend/dist/dm')
+)
 # FRONTEND = GUI for django backend
-REACT_APP_ROOT = os.path.join(BASE_DIR, '../frontend/dist/react-app')
+REACT_APP_ROOT = os.path.join(BASE_DIR, '../../web/dist/apps/labelstudio')
 
 # per project settings
 BATCH_SIZE = 1000

label_studio/core/utils/common.py

@@ -213,10 +213,9 @@ def find_editor_files():
     editor_dir = settings.EDITOR_ROOT
 
     # find editor files to include in html
-    editor_js_dir = os.path.join(editor_dir, 'js')
-    editor_js = [prefix + 'js/' + f for f in os.listdir(editor_js_dir) if f.endswith('.js')]
-    editor_css_dir = os.path.join(editor_dir, 'css')
-    editor_css = [prefix + 'css/' + f for f in os.listdir(editor_css_dir) if f.endswith('.css')]
+    editor_js = [prefix + f for f in os.listdir(editor_dir) if f.endswith('.js')]
+    editor_css = [prefix + f for f in os.listdir(editor_dir) if f.endswith('.css')]
+
     return {'editor_js': editor_js, 'editor_css': editor_css}